Launch post

The real X launch post recreated with its media playing

Prompt for your agentpaste into Claude Code or Codex

Add the "Launch post" video component (@GoogleDeepMind, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/launch-post.zip?v=1a36b02818a5 and unzip it into components/launch-post/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/launch-post && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o launch-post.mp4
3. Give me the path of the MP4. The text, names and timings live in the CONFIG block at the top of the script in index.html; change nothing there unless I ask.

Code

One file. The project download adds the fonts, skins and motion kit it runs on.

index.htmlhtmlDownload

1<!doctype html>
2<html lang="en" data-composition-variables='[
3  {"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"@OpenAI"},{"value":"1","label":"@claudeai"},{"value":"2","label":"@GoogleDeepMind"}]},
4  {"id":"theme","type":"enum","label":"Theme","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}
5]'>
6  <head>
7    <meta charset="UTF-8" />
8    <meta name="viewport" content="width=1920, height=1080" />
9    <title>Launch post</title>
10    <link rel="stylesheet" href="assets/fonts/fonts.css" />
11    <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />
12    <link rel="stylesheet" href="assets/skins/claude/skin.css" />
13    <link rel="stylesheet" href="assets/skins/gemini/skin.css" />
14    <link rel="stylesheet" href="assets/skins/device/skin.css" />
15    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
16    <script src="assets/kit/motion/motion.js"></script>
17    <script src="assets/skins/chatgpt/icons.js"></script>
18    <script src="assets/skins/claude/icons.js"></script>
19    <script src="assets/skins/gemini/icons.js"></script>
20    <script src="assets/skins/device/icons.js"></script>
21    <style>
22      * { margin: 0; padding: 0; box-sizing: border-box; }
23 
24      /* ---- Stage (DESIGN.md) ---- */
25      html { --stage: #F5F5F4; }
26      html.dark { --stage: #0E0E0F; }
27      html, body { width: 1920px; height: 1080px; overflow: hidden; background: var(--stage); }
28      #root { position: relative; width: 100%; height: 100%; overflow: hidden; }
29      #stage { position: absolute; inset: 0; background: var(--stage); }
30      #cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
31 
32      /* ---- X (x.com web, timeline post). Real CSS px; the post is presented at 1.9x. ----
33         Light = X "Default", dark = X "Lights out". Values: see DECISIONS.md. */
34      html {
35        --x-bg: #FFFFFF; --x-ink: #0F1419; --x-ink2: #536471;
36        --x-line: #EFF3F4; --x-media-line: #CFD9DE; --x-like: #F91880;
37        --x-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 60px -20px rgba(0,0,0,.25);
38      }
39      html.dark {
40        --x-bg: #000000; --x-ink: #E7E9EA; --x-ink2: #71767B;
41        --x-line: #2F3336; --x-media-line: #2F3336;
42        --x-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px -20px rgba(0,0,0,.8);
43      }
44      #place { position: relative; zoom: 1.9; width: 598px; }
45      .xp {
46        position: relative; width: 598px; padding: 12px 16px 12px; display: flex; gap: 8px;
47        background: var(--x-bg); border: 1px solid var(--x-line); border-radius: 16px;
48        box-shadow: var(--x-shadow);

Open full file

Download project1 MB