[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-hyperframes":3,"mdc-d1363d-key":39,"related-repo-openai-hyperframes":5225,"related-org-openai-hyperframes":5347},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":28,"repoUrl":29,"updatedAt":30,"license":31,"forks":32,"topics":33,"repo":34,"sourceUrl":37,"mdContent":38},"hyperframes","create HTML-based video compositions","Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"openai","OpenAI","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fopenai.png",[12,16,19,22,25],{"name":13,"slug":14,"type":15},"HTML","html","tag",{"name":17,"slug":18,"type":15},"Creative","creative",{"name":20,"slug":21,"type":15},"Animation","animation",{"name":23,"slug":24,"type":15},"Video","video",{"name":26,"slug":27,"type":15},"Frontend","frontend",3992,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins","2026-04-24T05:14:22.682782",null,465,[],{"repoUrl":29,"stars":28,"forks":32,"topics":35,"description":36},[],"OpenAI Plugins","https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins\u002Ftree\u002FHEAD\u002Fplugins\u002Fhyperframes\u002Fskills\u002Fhyperframes","---\nname: hyperframes\ndescription: Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.\n---\n\n# HyperFrames\n\nHTML is the source of truth for video. A composition is an HTML file with `data-*` attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework handles clip visibility, media playback, and timeline sync.\n\n## Approach\n\nBefore writing HTML, think at a high level:\n\n1. **What** — what should the viewer experience? Identify the narrative arc, key moments, and emotional beats.\n2. **Structure** — how many compositions, which are sub-compositions vs inline, what tracks carry what (video, audio, overlays, captions).\n3. **Timing** — which clips drive the duration, where do transitions land, what's the pacing.\n4. **Layout** — build the end-state first. See \"Layout Before Animation\" below.\n5. **Animate** — then add motion using the rules below.\n\nFor small edits (fix a color, adjust timing, add one element), skip straight to the rules.\n\n### Visual Identity Gate\n\n\u003CHARD-GATE>\nBefore writing ANY composition HTML, you MUST have a visual identity defined. Do NOT write compositions with default or generic colors.\n\nCheck in this order:\n\n1. **DESIGN.md exists in the project?** → Read it. Use its exact colors, fonts, motion rules, and \"What NOT to Do\" constraints.\n2. **visual-style.md exists?** → Read it. Apply its `style_prompt_full` and structured fields. (Note: `visual-style.md` is a project-specific file. `visual-styles.md` is the style library with 8 named presets — different files.)\n3. **User named a style** (e.g., \"Swiss Pulse\", \"dark and techy\", \"luxury brand\")? → Read [visual-styles.md](.\u002Fvisual-styles.md) for the 8 named presets. Generate a minimal DESIGN.md with: `## Style Prompt` (one paragraph), `## Colors` (3-5 hex values with roles), `## Typography` (1-2 font families), `## What NOT to Do` (3-5 anti-patterns).\n4. **None of the above?** → Ask 3 questions before writing any HTML:\n   - What's the mood? (explosive \u002F cinematic \u002F fluid \u002F technical \u002F chaotic \u002F warm)\n   - Light or dark canvas?\n   - Any specific brand colors, fonts, or visual references?\n     Then generate a minimal DESIGN.md from the answers.\n\nEvery composition must trace its palette and typography back to a DESIGN.md, visual-style.md, or explicit user direction. If you're reaching for `#333`, `#3b82f6`, or `Roboto` — you skipped this step.\n\u003C\u002FHARD-GATE>\n\nFor motion defaults, sizing, entrance patterns, and easing — follow [house-style.md](.\u002Fhouse-style.md). The house style handles HOW things move. The DESIGN.md handles WHAT things look like.\n\n## Layout Before Animation\n\nPosition every element where it should be at its **most visible moment** — the frame where it's fully entered, correctly placed, and not yet exiting. Write this as static HTML+CSS first. No GSAP yet.\n\n**Why this matters:** If you position elements at their animated start state (offscreen, scaled to 0, opacity 0) and tween them to where you think they should land, you're guessing the final layout. Overlaps are invisible until the video renders. By building the end state first, you can see and fix layout problems before adding any motion.\n\n### The process\n\n1. **Identify the hero frame** for each scene — the moment when the most elements are simultaneously visible. This is the layout you build.\n2. **Write static CSS** for that frame. The `.scene-content` container MUST fill the full scene using `width: 100%; height: 100%; padding: Npx;` with `display: flex; flex-direction: column; gap: Npx; box-sizing: border-box`. Use padding to push content inward — NEVER `position: absolute; top: Npx` on a content container. Absolute-positioned content containers overflow when content is taller than the remaining space. Reserve `position: absolute` for decoratives only.\n3. **Add entrances with `gsap.from()`** — animate FROM offscreen\u002Finvisible TO the CSS position. The CSS position is the ground truth; the tween describes the journey to get there.\n4. **Add exits with `gsap.to()`** — animate TO offscreen\u002Finvisible FROM the CSS position.\n\n### Example\n\n```css\n\u002F* scene-content fills the scene, padding positions content *\u002F\n.scene-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: 120px 160px;\n  gap: 24px;\n  box-sizing: border-box;\n}\n.title {\n  font-size: 120px;\n}\n.subtitle {\n  font-size: 42px;\n}\n\u002F* Container fills any scene size (1920x1080, 1080x1920, etc).\n   Padding positions content. Flex + gap handles spacing. *\u002F\n```\n\n**WRONG — hardcoded dimensions and absolute positioning:**\n\n```css\n.scene-content {\n  position: absolute;\n  top: 200px;\n  left: 160px;\n  width: 1920px;\n  height: 1080px;\n  display: flex; \u002F* ... *\u002F\n}\n```\n\n```js\n\u002F\u002F Step 3: Animate INTO those positions\ntl.from(\".title\", { y: 60, opacity: 0, duration: 0.6, ease: \"power3.out\" }, 0);\ntl.from(\".subtitle\", { y: 40, opacity: 0, duration: 0.5, ease: \"power3.out\" }, 0.2);\ntl.from(\".logo\", { scale: 0.8, opacity: 0, duration: 0.4, ease: \"power2.out\" }, 0.3);\n\n\u002F\u002F Step 4: Animate OUT from those positions\ntl.to(\".title\", { y: -40, opacity: 0, duration: 0.4, ease: \"power2.in\" }, 3);\ntl.to(\".subtitle\", { y: -30, opacity: 0, duration: 0.3, ease: \"power2.in\" }, 3.1);\ntl.to(\".logo\", { scale: 0.9, opacity: 0, duration: 0.3, ease: \"power2.in\" }, 3.2);\n```\n\n### When elements share space across time\n\nIf element A exits before element B enters in the same area, both should have correct CSS positions for their respective hero frames. The timeline ordering guarantees they never visually coexist — but if you skip the layout step, you won't catch the case where they accidentally overlap due to a timing error.\n\n### What counts as intentional overlap\n\nLayered effects (glow behind text, shadow elements, background patterns) and z-stacked designs (card stacks, depth layers) are intentional. The layout step is about catching **unintentional** overlap — two headlines landing on top of each other, a stat covering a label, content bleeding off-frame.\n\n## Data Attributes\n\n### All Clips\n\n| Attribute          | Required                          | Values                                                 |\n| ------------------ | --------------------------------- | ------------------------------------------------------ |\n| `id`               | Yes                               | Unique identifier                                      |\n| `data-start`       | Yes                               | Seconds or clip ID reference (`\"el-1\"`, `\"intro + 2\"`) |\n| `data-duration`    | Required for img\u002Fdiv\u002Fcompositions | Seconds. Video\u002Faudio defaults to media duration.       |\n| `data-track-index` | Yes                               | Integer. Same-track clips cannot overlap.              |\n| `data-media-start` | No                                | Trim offset into source (seconds)                      |\n| `data-volume`      | No                                | 0-1 (default 1)                                        |\n\n`data-track-index` does **not** affect visual layering — use CSS `z-index`.\n\n### Composition Clips\n\n| Attribute                    | Required | Values                                       |\n| ---------------------------- | -------- | -------------------------------------------- |\n| `data-composition-id`        | Yes      | Unique composition ID                        |\n| `data-start`                 | Yes      | Start time (root composition: use `\"0\"`)     |\n| `data-duration`              | Yes      | Takes precedence over GSAP timeline duration |\n| `data-width` \u002F `data-height` | Yes      | Pixel dimensions (1920x1080 or 1080x1920)    |\n| `data-composition-src`       | No       | Path to external HTML file                   |\n\n## Composition Structure\n\nSub-compositions loaded via `data-composition-src` use a `\u003Ctemplate>` wrapper. **Standalone compositions (the main index.html) do NOT use `\u003Ctemplate>`** — they put the `data-composition-id` div directly in `\u003Cbody>`. Using `\u003Ctemplate>` on a standalone file hides all content from the browser and breaks rendering.\n\nSub-composition structure:\n\n```html\n\u003Ctemplate id=\"my-comp-template\">\n  \u003Cdiv data-composition-id=\"my-comp\" data-width=\"1920\" data-height=\"1080\">\n    \u003C!-- content -->\n    \u003Cstyle>\n      [data-composition-id=\"my-comp\"] {\n        \u002F* scoped styles *\u002F\n      }\n    \u003C\u002Fstyle>\n    \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3.14.2\u002Fdist\u002Fgsap.min.js\">\u003C\u002Fscript>\n    \u003Cscript>\n      window.__timelines = window.__timelines || {};\n      const tl = gsap.timeline({ paused: true });\n      \u002F\u002F tweens...\n      window.__timelines[\"my-comp\"] = tl;\n    \u003C\u002Fscript>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\nLoad in root: `\u003Cdiv id=\"el-1\" data-composition-id=\"my-comp\" data-composition-src=\"compositions\u002Fmy-comp.html\" data-start=\"0\" data-duration=\"10\" data-track-index=\"1\">\u003C\u002Fdiv>`\n\n## Video and Audio\n\nVideo must be `muted playsinline`. Audio is always a separate `\u003Caudio>` element:\n\n```html\n\u003Cvideo\n  id=\"el-v\"\n  data-start=\"0\"\n  data-duration=\"30\"\n  data-track-index=\"0\"\n  src=\"video.mp4\"\n  muted\n  playsinline\n>\u003C\u002Fvideo>\n\u003Caudio\n  id=\"el-a\"\n  data-start=\"0\"\n  data-duration=\"30\"\n  data-track-index=\"2\"\n  src=\"video.mp4\"\n  data-volume=\"1\"\n>\u003C\u002Faudio>\n```\n\n## Timeline Contract\n\n- All timelines start `{ paused: true }` — the player controls playback\n- Register every timeline: `window.__timelines[\"\u003Ccomposition-id>\"] = tl`\n- Framework auto-nests sub-timelines — do NOT manually add them\n- Duration comes from `data-duration`, not from GSAP timeline length\n- Never create empty tweens to set duration\n\n## Rules (Non-Negotiable)\n\n**Deterministic:** No `Math.random()`, `Date.now()`, or time-based logic. Use a seeded PRNG if you need pseudo-random values (e.g. mulberry32).\n\n**GSAP:** Only animate visual properties (`opacity`, `x`, `y`, `scale`, `rotation`, `color`, `backgroundColor`, `borderRadius`, transforms). Do NOT animate `visibility`, `display`, or call `video.play()`\u002F`audio.play()`.\n\n**Animation conflicts:** Never animate the same property on the same element from multiple timelines simultaneously.\n\n**No `repeat: -1`:** Infinite-repeat timelines break the capture engine. Calculate the exact repeat count from composition duration: `repeat: Math.ceil(duration \u002F cycleDuration) - 1`.\n\n**Synchronous timeline construction:** Never build timelines inside `async`\u002F`await`, `setTimeout`, or Promises. The capture engine reads `window.__timelines` synchronously after page load. Fonts are embedded by the compiler, so they're available immediately — no need to wait for font loading.\n\n**Never do:**\n\n1. Forget `window.__timelines` registration\n2. Use video for audio — always muted video + separate `\u003Caudio>`\n3. Nest video inside a timed div — use a non-timed wrapper\n4. Use `data-layer` (use `data-track-index`) or `data-end` (use `data-duration`)\n5. Animate video element dimensions — animate a wrapper div\n6. Call play\u002Fpause\u002Fseek on media — framework owns playback\n7. Create a top-level container without `data-composition-id`\n8. Use `repeat: -1` on any timeline or tween — always finite repeats\n9. Build timelines asynchronously (inside `async`, `setTimeout`, `Promise`)\n10. Use `gsap.set()` on clip elements from later scenes — they don't exist in the DOM at page load. Use `tl.set(selector, vars, timePosition)` inside the timeline at or after the clip's `data-start` time instead.\n11. Use `\u003Cbr>` in content text — forced line breaks don't account for actual rendered font width. Text that wraps naturally + a `\u003Cbr>` produces an extra unwanted break, causing overlap. Let text wrap via `max-width` instead. Exception: short display titles where each word is deliberately on its own line (e.g., \"THE\\nIMMORTAL\\nGAME\" at 130px).\n\n## Scene Transitions (Non-Negotiable)\n\nEvery multi-scene composition MUST follow ALL of these rules. Violating any one of them is a broken composition.\n\n1. **ALWAYS use transitions between scenes.** No jump cuts. No exceptions.\n2. **ALWAYS use entrance animations on every scene.** Every element animates IN via `gsap.from()`. No element may appear fully-formed. If a scene has 5 elements, it needs 5 entrance tweens.\n3. **NEVER use exit animations** except on the final scene. This means: NO `gsap.to()` that animates opacity to 0, y offscreen, scale to 0, or any other \"out\" animation before a transition fires. The transition IS the exit. The outgoing scene's content MUST be fully visible at the moment the transition starts.\n4. **Final scene only:** The last scene may fade elements out (e.g., fade to black). This is the ONLY scene where `gsap.to(..., { opacity: 0 })` is allowed.\n\n**WRONG — exit animation before transition:**\n\n```js\n\u002F\u002F BANNED — this empties the scene before the transition can use it\ntl.to(\"#s1-title\", { opacity: 0, y: -40, duration: 0.4 }, 6.5);\ntl.to(\"#s1-subtitle\", { opacity: 0, duration: 0.3 }, 6.7);\n\u002F\u002F transition fires on empty frame\n```\n\n**RIGHT — entrance only, transition handles exit:**\n\n```js\n\u002F\u002F Scene 1 entrance animations\ntl.from(\"#s1-title\", { y: 50, opacity: 0, duration: 0.7, ease: \"power3.out\" }, 0.3);\ntl.from(\"#s1-subtitle\", { y: 30, opacity: 0, duration: 0.5, ease: \"power2.out\" }, 0.6);\n\u002F\u002F NO exit tweens — transition at 7.2s handles the scene change\n\u002F\u002F Scene 2 entrance animations\ntl.from(\"#s2-heading\", { x: -40, opacity: 0, duration: 0.6, ease: \"expo.out\" }, 8.0);\n```\n\n## Animation Guardrails\n\n- Offset first animation 0.1-0.3s (not t=0)\n- Vary eases across entrance tweens — use at least 3 different eases per scene\n- Don't repeat an entrance pattern within a scene\n- Avoid full-screen linear gradients on dark backgrounds (H.264 banding — use radial or solid + localized glow)\n- 60px+ headlines, 20px+ body, 16px+ data labels for rendered video\n- `font-variant-numeric: tabular-nums` on number columns\n\nWhen no `visual-style.md` or animation direction is provided, follow [house-style.md](.\u002Fhouse-style.md) for aesthetic defaults.\n\n## Typography and Assets\n\n- **Fonts:** Just write the `font-family` you want in CSS — the compiler embeds supported fonts automatically. If a font isn't supported, the compiler warns.\n- Add `crossorigin=\"anonymous\"` to external media\n- For dynamic text overflow, use `window.__hyperframes.fitTextFontSize(text, { maxWidth, fontFamily, fontWeight })`\n- All files live at the project root alongside `index.html`; sub-compositions use `..\u002F`\n\n## Editing Existing Compositions\n\n- Read the full composition first — match existing fonts, colors, animation patterns\n- Only change what was requested\n- Preserve timing of unrelated clips\n\n## Output Checklist\n\n- [ ] `npx hyperframes lint` and `npx hyperframes validate` both pass\n- [ ] `npx hyperframes inspect` passes, or every reported overflow is intentionally marked\n- [ ] Contrast warnings addressed (see Quality Checks below)\n- [ ] Layout issues addressed (see Quality Checks below)\n- [ ] Animation choreography verified (see Quality Checks below)\n\n## Quality Checks\n\n### Visual Inspect\n\n`hyperframes inspect` runs the composition in headless Chrome, seeks through the timeline, and maps visual layout issues with timestamps, selectors, bounding boxes, and fix hints. Run it after `lint` and `validate`:\n\n```bash\nnpx hyperframes inspect\nnpx hyperframes inspect --json\n```\n\nFailures usually mean text is spilling out of a bubble\u002Fcard, a fixed-size label is clipping dynamic copy, or text has moved off the canvas. Fix by increasing container size or padding, reducing font size or letter spacing, adding a real `max-width` so text wraps inside the container, or using `window.__hyperframes.fitTextFontSize(...)` for dynamic copy.\n\nUse `--samples 15` for dense videos and `--at 1.5,4,7.25` for specific hero frames. Repeated static issues are collapsed by default to avoid flooding agent context. If overflow is intentional for an entrance\u002Fexit animation, mark the element or ancestor with `data-layout-allow-overflow`. If a decorative element should never be audited, mark it with `data-layout-ignore`.\n\n`hyperframes layout` is the compatibility alias for the same check.\n\n### Contrast\n\n`hyperframes validate` runs a WCAG contrast audit by default. It seeks to 5 timestamps, screenshots the page, samples background pixels behind every text element, and computes contrast ratios. Failures appear as warnings:\n\n```\n⚠ WCAG AA contrast warnings (3):\n  · .subtitle \"secondary text\" — 2.67:1 (need 4.5:1, t=5.3s)\n```\n\nIf warnings appear:\n\n- On dark backgrounds: brighten the failing color until it clears 4.5:1 (normal text) or 3:1 (large text, 24px+ or 19px+ bold)\n- On light backgrounds: darken it\n- Stay within the palette family — don't invent a new color, adjust the existing one\n- Re-run `hyperframes validate` until clean\n\nUse `--no-contrast` to skip if iterating rapidly and you'll check later.\n\n### Animation Map\n\nAfter authoring animations, run the animation map to verify choreography:\n\n```bash\nnode skills\u002Fhyperframes\u002Fscripts\u002Fanimation-map.mjs \u003Ccomposition-dir> \\\n  --out \u003Ccomposition-dir>\u002F.hyperframes\u002Fanim-map\n```\n\nOutputs a single `animation-map.json` with:\n\n- **Per-tween summaries**: `\"#card1 animates opacity+y over 0.50s. moves 23px up. fades in. ends at (120, 200)\"`\n- **ASCII timeline**: Gantt chart of all tweens across the composition duration\n- **Stagger detection**: reports actual intervals (`\"3 elements stagger at 120ms\"`)\n- **Dead zones**: periods over 1s with no animation — intentional hold or missing entrance?\n- **Element lifecycles**: first\u002Flast animation time, final visibility\n- **Scene snapshots**: visible element state at 5 key timestamps\n- **Flags**: `offscreen`, `collision`, `invisible`, `paced-fast` (under 0.2s), `paced-slow` (over 2s)\n\nRead the JSON. Scan summaries for anything unexpected. Check every flag — fix or justify. Verify the timeline shows the intended choreography rhythm. Re-run after fixes.\n\nSkip on small edits (fixing a color, adjusting one duration). Run on new compositions and significant animation changes.\n\n---\n\n## References (loaded on demand)\n\n- **[references\u002Fcaptions.md](references\u002Fcaptions.md)** — Captions, subtitles, lyrics, karaoke synced to audio. Tone-adaptive style detection, per-word styling, text overflow prevention, caption exit guarantees, word grouping. Read when adding any text synced to audio timing.\n- **[references\u002Ftts.md](references\u002Ftts.md)** — Text-to-speech with Kokoro-82M. Voice selection, speed tuning, TTS+captions workflow. Read when generating narration or voiceover.\n- **[references\u002Faudio-reactive.md](references\u002Faudio-reactive.md)** — Audio-reactive animation: map frequency bands and amplitude to GSAP properties. Read when visuals should respond to music, voice, or sound.\n- **[references\u002Fcss-patterns.md](references\u002Fcss-patterns.md)** — CSS+GSAP marker highlighting: highlight, circle, burst, scribble, sketchout. Deterministic, fully seekable. Read when adding visual emphasis to text.\n- **[references\u002Ftypography.md](references\u002Ftypography.md)** — Typography: font pairing, OpenType features, dark-background adjustments, font discovery script. **Always read** — every composition has text.\n- **[references\u002Fmotion-principles.md](references\u002Fmotion-principles.md)** — Motion design principles: easing as emotion, timing as weight, choreography as hierarchy, scene pacing, ambient motion, anti-patterns. Read when choreographing GSAP animations.\n- **[visual-styles.md](visual-styles.md)** — 8 named visual styles (Swiss Pulse, Velvet Standard, Deconstructed, Maximalist Type, Data Drift, Soft Signal, Folk Frequency, Shadow Cut) with hex palettes, GSAP easing signatures, and shader pairings. Read when user names a style or when generating DESIGN.md.\n- **[house-style.md](house-style.md)** — Default motion, sizing, and color palettes when no style is specified.\n- **[patterns.md](patterns.md)** — PiP, title cards, slide show patterns.\n- **[data-in-motion.md](data-in-motion.md)** — Data, stats, and infographic patterns.\n- **[references\u002Ftranscript-guide.md](references\u002Ftranscript-guide.md)** — Transcription commands, whisper models, external APIs, troubleshooting.\n- **[references\u002Fdynamic-techniques.md](references\u002Fdynamic-techniques.md)** — Dynamic caption animation techniques (karaoke, clip-path, slam, scatter, elastic, 3D).\n\n- **[references\u002Ftransitions.md](references\u002Ftransitions.md)** — Scene transitions: crossfades, wipes, reveals, shader transitions. Energy\u002Fmood selection, CSS vs WebGL guidance. **Always read for multi-scene compositions** — scenes without transitions feel like jump cuts.\n  - [transitions\u002Fcatalog.md](references\u002Ftransitions\u002Fcatalog.md) — Hard rules, scene template, and routing to per-type implementation code.\n  - Shader transitions are in `@hyperframes\u002Fshader-transitions` (`packages\u002Fshader-transitions\u002F`) — read package source, not skill files.\n\nGSAP patterns and effects are in the `\u002Fgsap` skill.\n",{"data":40,"body":41},{"name":4,"description":6},{"type":42,"children":43},"root",[44,52,67,74,79,135,140,147,5220],{"type":45,"tag":46,"props":47,"children":48},"element","h1",{"id":4},[49],{"type":50,"value":51},"text","HyperFrames",{"type":45,"tag":53,"props":54,"children":55},"p",{},[56,58,65],{"type":50,"value":57},"HTML is the source of truth for video. A composition is an HTML file with ",{"type":45,"tag":59,"props":60,"children":62},"code",{"className":61},[],[63],{"type":50,"value":64},"data-*",{"type":50,"value":66}," attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework handles clip visibility, media playback, and timeline sync.",{"type":45,"tag":68,"props":69,"children":71},"h2",{"id":70},"approach",[72],{"type":50,"value":73},"Approach",{"type":45,"tag":53,"props":75,"children":76},{},[77],{"type":50,"value":78},"Before writing HTML, think at a high level:",{"type":45,"tag":80,"props":81,"children":82},"ol",{},[83,95,105,115,125],{"type":45,"tag":84,"props":85,"children":86},"li",{},[87,93],{"type":45,"tag":88,"props":89,"children":90},"strong",{},[91],{"type":50,"value":92},"What",{"type":50,"value":94}," — what should the viewer experience? Identify the narrative arc, key moments, and emotional beats.",{"type":45,"tag":84,"props":96,"children":97},{},[98,103],{"type":45,"tag":88,"props":99,"children":100},{},[101],{"type":50,"value":102},"Structure",{"type":50,"value":104}," — how many compositions, which are sub-compositions vs inline, what tracks carry what (video, audio, overlays, captions).",{"type":45,"tag":84,"props":106,"children":107},{},[108,113],{"type":45,"tag":88,"props":109,"children":110},{},[111],{"type":50,"value":112},"Timing",{"type":50,"value":114}," — which clips drive the duration, where do transitions land, what's the pacing.",{"type":45,"tag":84,"props":116,"children":117},{},[118,123],{"type":45,"tag":88,"props":119,"children":120},{},[121],{"type":50,"value":122},"Layout",{"type":50,"value":124}," — build the end-state first. See \"Layout Before Animation\" below.",{"type":45,"tag":84,"props":126,"children":127},{},[128,133],{"type":45,"tag":88,"props":129,"children":130},{},[131],{"type":50,"value":132},"Animate",{"type":50,"value":134}," — then add motion using the rules below.",{"type":45,"tag":53,"props":136,"children":137},{},[138],{"type":50,"value":139},"For small edits (fix a color, adjust timing, add one element), skip straight to the rules.",{"type":45,"tag":141,"props":142,"children":144},"h3",{"id":143},"visual-identity-gate",[145],{"type":50,"value":146},"Visual Identity Gate",{"type":45,"tag":148,"props":149,"children":150},"hard-gate",{},[151,153,158,284,313,326,332,344,354,360,455,461,809,817,973,1793,1799,1804,1810,1822,1828,1834,2010,2034,2040,2182,2188,2242,2247,2749,2760,2766,2787,3131,3137,3186,3192,3217,3314,3324,3348,3388,3396,3568,3574,3579,3644,3652,3865,3873,4284,4290,4329,4347,4353,4417,4423,4441,4447,4523,4529,4535,4560,4608,4628,4663,4674,4680,4691,4701,4706,4736,4748,4754,4759,4833,4846,4968,4973,4978,4982,4988,5207],{"type":50,"value":152},"\nBefore writing ANY composition HTML, you MUST have a visual identity defined. Do NOT write compositions with default or generic colors.\n",{"type":45,"tag":53,"props":154,"children":155},{},[156],{"type":50,"value":157},"Check in this order:",{"type":45,"tag":80,"props":159,"children":160},{},[161,171,205,255],{"type":45,"tag":84,"props":162,"children":163},{},[164,169],{"type":45,"tag":88,"props":165,"children":166},{},[167],{"type":50,"value":168},"DESIGN.md exists in the project?",{"type":50,"value":170}," → Read it. Use its exact colors, fonts, motion rules, and \"What NOT to Do\" constraints.",{"type":45,"tag":84,"props":172,"children":173},{},[174,179,181,187,189,195,197,203],{"type":45,"tag":88,"props":175,"children":176},{},[177],{"type":50,"value":178},"visual-style.md exists?",{"type":50,"value":180}," → Read it. Apply its ",{"type":45,"tag":59,"props":182,"children":184},{"className":183},[],[185],{"type":50,"value":186},"style_prompt_full",{"type":50,"value":188}," and structured fields. (Note: ",{"type":45,"tag":59,"props":190,"children":192},{"className":191},[],[193],{"type":50,"value":194},"visual-style.md",{"type":50,"value":196}," is a project-specific file. ",{"type":45,"tag":59,"props":198,"children":200},{"className":199},[],[201],{"type":50,"value":202},"visual-styles.md",{"type":50,"value":204}," is the style library with 8 named presets — different files.)",{"type":45,"tag":84,"props":206,"children":207},{},[208,213,215,221,223,229,231,237,239,245,247,253],{"type":45,"tag":88,"props":209,"children":210},{},[211],{"type":50,"value":212},"User named a style",{"type":50,"value":214}," (e.g., \"Swiss Pulse\", \"dark and techy\", \"luxury brand\")? → Read ",{"type":45,"tag":216,"props":217,"children":219},"a",{"href":218},".\u002Fvisual-styles.md",[220],{"type":50,"value":202},{"type":50,"value":222}," for the 8 named presets. Generate a minimal DESIGN.md with: ",{"type":45,"tag":59,"props":224,"children":226},{"className":225},[],[227],{"type":50,"value":228},"## Style Prompt",{"type":50,"value":230}," (one paragraph), ",{"type":45,"tag":59,"props":232,"children":234},{"className":233},[],[235],{"type":50,"value":236},"## Colors",{"type":50,"value":238}," (3-5 hex values with roles), ",{"type":45,"tag":59,"props":240,"children":242},{"className":241},[],[243],{"type":50,"value":244},"## Typography",{"type":50,"value":246}," (1-2 font families), ",{"type":45,"tag":59,"props":248,"children":250},{"className":249},[],[251],{"type":50,"value":252},"## What NOT to Do",{"type":50,"value":254}," (3-5 anti-patterns).",{"type":45,"tag":84,"props":256,"children":257},{},[258,263,265],{"type":45,"tag":88,"props":259,"children":260},{},[261],{"type":50,"value":262},"None of the above?",{"type":50,"value":264}," → Ask 3 questions before writing any HTML:\n",{"type":45,"tag":266,"props":267,"children":268},"ul",{},[269,274,279],{"type":45,"tag":84,"props":270,"children":271},{},[272],{"type":50,"value":273},"What's the mood? (explosive \u002F cinematic \u002F fluid \u002F technical \u002F chaotic \u002F warm)",{"type":45,"tag":84,"props":275,"children":276},{},[277],{"type":50,"value":278},"Light or dark canvas?",{"type":45,"tag":84,"props":280,"children":281},{},[282],{"type":50,"value":283},"Any specific brand colors, fonts, or visual references?\nThen generate a minimal DESIGN.md from the answers.",{"type":45,"tag":53,"props":285,"children":286},{},[287,289,295,297,303,305,311],{"type":50,"value":288},"Every composition must trace its palette and typography back to a DESIGN.md, visual-style.md, or explicit user direction. If you're reaching for ",{"type":45,"tag":59,"props":290,"children":292},{"className":291},[],[293],{"type":50,"value":294},"#333",{"type":50,"value":296},", ",{"type":45,"tag":59,"props":298,"children":300},{"className":299},[],[301],{"type":50,"value":302},"#3b82f6",{"type":50,"value":304},", or ",{"type":45,"tag":59,"props":306,"children":308},{"className":307},[],[309],{"type":50,"value":310},"Roboto",{"type":50,"value":312}," — you skipped this step.\n",{"type":45,"tag":53,"props":314,"children":315},{},[316,318,324],{"type":50,"value":317},"For motion defaults, sizing, entrance patterns, and easing — follow ",{"type":45,"tag":216,"props":319,"children":321},{"href":320},".\u002Fhouse-style.md",[322],{"type":50,"value":323},"house-style.md",{"type":50,"value":325},". The house style handles HOW things move. The DESIGN.md handles WHAT things look like.",{"type":45,"tag":68,"props":327,"children":329},{"id":328},"layout-before-animation",[330],{"type":50,"value":331},"Layout Before Animation",{"type":45,"tag":53,"props":333,"children":334},{},[335,337,342],{"type":50,"value":336},"Position every element where it should be at its ",{"type":45,"tag":88,"props":338,"children":339},{},[340],{"type":50,"value":341},"most visible moment",{"type":50,"value":343}," — the frame where it's fully entered, correctly placed, and not yet exiting. Write this as static HTML+CSS first. No GSAP yet.",{"type":45,"tag":53,"props":345,"children":346},{},[347,352],{"type":45,"tag":88,"props":348,"children":349},{},[350],{"type":50,"value":351},"Why this matters:",{"type":50,"value":353}," If you position elements at their animated start state (offscreen, scaled to 0, opacity 0) and tween them to where you think they should land, you're guessing the final layout. Overlaps are invisible until the video renders. By building the end state first, you can see and fix layout problems before adding any motion.",{"type":45,"tag":141,"props":355,"children":357},{"id":356},"the-process",[358],{"type":50,"value":359},"The process",{"type":45,"tag":80,"props":361,"children":362},{},[363,373,423,439],{"type":45,"tag":84,"props":364,"children":365},{},[366,371],{"type":45,"tag":88,"props":367,"children":368},{},[369],{"type":50,"value":370},"Identify the hero frame",{"type":50,"value":372}," for each scene — the moment when the most elements are simultaneously visible. This is the layout you build.",{"type":45,"tag":84,"props":374,"children":375},{},[376,381,383,389,391,397,399,405,407,413,415,421],{"type":45,"tag":88,"props":377,"children":378},{},[379],{"type":50,"value":380},"Write static CSS",{"type":50,"value":382}," for that frame. The ",{"type":45,"tag":59,"props":384,"children":386},{"className":385},[],[387],{"type":50,"value":388},".scene-content",{"type":50,"value":390}," container MUST fill the full scene using ",{"type":45,"tag":59,"props":392,"children":394},{"className":393},[],[395],{"type":50,"value":396},"width: 100%; height: 100%; padding: Npx;",{"type":50,"value":398}," with ",{"type":45,"tag":59,"props":400,"children":402},{"className":401},[],[403],{"type":50,"value":404},"display: flex; flex-direction: column; gap: Npx; box-sizing: border-box",{"type":50,"value":406},". Use padding to push content inward — NEVER ",{"type":45,"tag":59,"props":408,"children":410},{"className":409},[],[411],{"type":50,"value":412},"position: absolute; top: Npx",{"type":50,"value":414}," on a content container. Absolute-positioned content containers overflow when content is taller than the remaining space. Reserve ",{"type":45,"tag":59,"props":416,"children":418},{"className":417},[],[419],{"type":50,"value":420},"position: absolute",{"type":50,"value":422}," for decoratives only.",{"type":45,"tag":84,"props":424,"children":425},{},[426,437],{"type":45,"tag":88,"props":427,"children":428},{},[429,431],{"type":50,"value":430},"Add entrances with ",{"type":45,"tag":59,"props":432,"children":434},{"className":433},[],[435],{"type":50,"value":436},"gsap.from()",{"type":50,"value":438}," — animate FROM offscreen\u002Finvisible TO the CSS position. The CSS position is the ground truth; the tween describes the journey to get there.",{"type":45,"tag":84,"props":440,"children":441},{},[442,453],{"type":45,"tag":88,"props":443,"children":444},{},[445,447],{"type":50,"value":446},"Add exits with ",{"type":45,"tag":59,"props":448,"children":450},{"className":449},[],[451],{"type":50,"value":452},"gsap.to()",{"type":50,"value":454}," — animate TO offscreen\u002Finvisible FROM the CSS position.",{"type":45,"tag":141,"props":456,"children":458},{"id":457},"example",[459],{"type":50,"value":460},"Example",{"type":45,"tag":462,"props":463,"children":468},"pre",{"className":464,"code":465,"language":466,"meta":467,"style":467},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* scene-content fills the scene, padding positions content *\u002F\n.scene-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: 120px 160px;\n  gap: 24px;\n  box-sizing: border-box;\n}\n.title {\n  font-size: 120px;\n}\n.subtitle {\n  font-size: 42px;\n}\n\u002F* Container fills any scene size (1920x1080, 1080x1920, etc).\n   Padding positions content. Flex + gap handles spacing. *\u002F\n","css","",[469],{"type":45,"tag":59,"props":470,"children":471},{"__ignoreMap":467},[472,484,505,531,553,575,598,619,646,668,690,699,716,737,745,762,783,791,800],{"type":45,"tag":473,"props":474,"children":477},"span",{"class":475,"line":476},"line",1,[478],{"type":45,"tag":473,"props":479,"children":481},{"style":480},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[482],{"type":50,"value":483},"\u002F* scene-content fills the scene, padding positions content *\u002F\n",{"type":45,"tag":473,"props":485,"children":487},{"class":475,"line":486},2,[488,494,500],{"type":45,"tag":473,"props":489,"children":491},{"style":490},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[492],{"type":50,"value":493},".",{"type":45,"tag":473,"props":495,"children":497},{"style":496},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[498],{"type":50,"value":499},"scene-content",{"type":45,"tag":473,"props":501,"children":502},{"style":490},[503],{"type":50,"value":504}," {\n",{"type":45,"tag":473,"props":506,"children":508},{"class":475,"line":507},3,[509,515,520,526],{"type":45,"tag":473,"props":510,"children":512},{"style":511},"--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6",[513],{"type":50,"value":514},"  display",{"type":45,"tag":473,"props":516,"children":517},{"style":490},[518],{"type":50,"value":519},":",{"type":45,"tag":473,"props":521,"children":523},{"style":522},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[524],{"type":50,"value":525}," flex",{"type":45,"tag":473,"props":527,"children":528},{"style":490},[529],{"type":50,"value":530},";\n",{"type":45,"tag":473,"props":532,"children":534},{"class":475,"line":533},4,[535,540,544,549],{"type":45,"tag":473,"props":536,"children":537},{"style":511},[538],{"type":50,"value":539},"  flex-direction",{"type":45,"tag":473,"props":541,"children":542},{"style":490},[543],{"type":50,"value":519},{"type":45,"tag":473,"props":545,"children":546},{"style":522},[547],{"type":50,"value":548}," column",{"type":45,"tag":473,"props":550,"children":551},{"style":490},[552],{"type":50,"value":530},{"type":45,"tag":473,"props":554,"children":556},{"class":475,"line":555},5,[557,562,566,571],{"type":45,"tag":473,"props":558,"children":559},{"style":511},[560],{"type":50,"value":561},"  justify-content",{"type":45,"tag":473,"props":563,"children":564},{"style":490},[565],{"type":50,"value":519},{"type":45,"tag":473,"props":567,"children":568},{"style":522},[569],{"type":50,"value":570}," center",{"type":45,"tag":473,"props":572,"children":573},{"style":490},[574],{"type":50,"value":530},{"type":45,"tag":473,"props":576,"children":578},{"class":475,"line":577},6,[579,584,588,594],{"type":45,"tag":473,"props":580,"children":581},{"style":511},[582],{"type":50,"value":583},"  width",{"type":45,"tag":473,"props":585,"children":586},{"style":490},[587],{"type":50,"value":519},{"type":45,"tag":473,"props":589,"children":591},{"style":590},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[592],{"type":50,"value":593}," 100%",{"type":45,"tag":473,"props":595,"children":596},{"style":490},[597],{"type":50,"value":530},{"type":45,"tag":473,"props":599,"children":601},{"class":475,"line":600},7,[602,607,611,615],{"type":45,"tag":473,"props":603,"children":604},{"style":511},[605],{"type":50,"value":606},"  height",{"type":45,"tag":473,"props":608,"children":609},{"style":490},[610],{"type":50,"value":519},{"type":45,"tag":473,"props":612,"children":613},{"style":590},[614],{"type":50,"value":593},{"type":45,"tag":473,"props":616,"children":617},{"style":490},[618],{"type":50,"value":530},{"type":45,"tag":473,"props":620,"children":622},{"class":475,"line":621},8,[623,628,632,637,642],{"type":45,"tag":473,"props":624,"children":625},{"style":511},[626],{"type":50,"value":627},"  padding",{"type":45,"tag":473,"props":629,"children":630},{"style":490},[631],{"type":50,"value":519},{"type":45,"tag":473,"props":633,"children":634},{"style":590},[635],{"type":50,"value":636}," 120px",{"type":45,"tag":473,"props":638,"children":639},{"style":590},[640],{"type":50,"value":641}," 160px",{"type":45,"tag":473,"props":643,"children":644},{"style":490},[645],{"type":50,"value":530},{"type":45,"tag":473,"props":647,"children":649},{"class":475,"line":648},9,[650,655,659,664],{"type":45,"tag":473,"props":651,"children":652},{"style":511},[653],{"type":50,"value":654},"  gap",{"type":45,"tag":473,"props":656,"children":657},{"style":490},[658],{"type":50,"value":519},{"type":45,"tag":473,"props":660,"children":661},{"style":590},[662],{"type":50,"value":663}," 24px",{"type":45,"tag":473,"props":665,"children":666},{"style":490},[667],{"type":50,"value":530},{"type":45,"tag":473,"props":669,"children":671},{"class":475,"line":670},10,[672,677,681,686],{"type":45,"tag":473,"props":673,"children":674},{"style":511},[675],{"type":50,"value":676},"  box-sizing",{"type":45,"tag":473,"props":678,"children":679},{"style":490},[680],{"type":50,"value":519},{"type":45,"tag":473,"props":682,"children":683},{"style":522},[684],{"type":50,"value":685}," border-box",{"type":45,"tag":473,"props":687,"children":688},{"style":490},[689],{"type":50,"value":530},{"type":45,"tag":473,"props":691,"children":693},{"class":475,"line":692},11,[694],{"type":45,"tag":473,"props":695,"children":696},{"style":490},[697],{"type":50,"value":698},"}\n",{"type":45,"tag":473,"props":700,"children":702},{"class":475,"line":701},12,[703,707,712],{"type":45,"tag":473,"props":704,"children":705},{"style":490},[706],{"type":50,"value":493},{"type":45,"tag":473,"props":708,"children":709},{"style":496},[710],{"type":50,"value":711},"title",{"type":45,"tag":473,"props":713,"children":714},{"style":490},[715],{"type":50,"value":504},{"type":45,"tag":473,"props":717,"children":719},{"class":475,"line":718},13,[720,725,729,733],{"type":45,"tag":473,"props":721,"children":722},{"style":511},[723],{"type":50,"value":724},"  font-size",{"type":45,"tag":473,"props":726,"children":727},{"style":490},[728],{"type":50,"value":519},{"type":45,"tag":473,"props":730,"children":731},{"style":590},[732],{"type":50,"value":636},{"type":45,"tag":473,"props":734,"children":735},{"style":490},[736],{"type":50,"value":530},{"type":45,"tag":473,"props":738,"children":740},{"class":475,"line":739},14,[741],{"type":45,"tag":473,"props":742,"children":743},{"style":490},[744],{"type":50,"value":698},{"type":45,"tag":473,"props":746,"children":748},{"class":475,"line":747},15,[749,753,758],{"type":45,"tag":473,"props":750,"children":751},{"style":490},[752],{"type":50,"value":493},{"type":45,"tag":473,"props":754,"children":755},{"style":496},[756],{"type":50,"value":757},"subtitle",{"type":45,"tag":473,"props":759,"children":760},{"style":490},[761],{"type":50,"value":504},{"type":45,"tag":473,"props":763,"children":765},{"class":475,"line":764},16,[766,770,774,779],{"type":45,"tag":473,"props":767,"children":768},{"style":511},[769],{"type":50,"value":724},{"type":45,"tag":473,"props":771,"children":772},{"style":490},[773],{"type":50,"value":519},{"type":45,"tag":473,"props":775,"children":776},{"style":590},[777],{"type":50,"value":778}," 42px",{"type":45,"tag":473,"props":780,"children":781},{"style":490},[782],{"type":50,"value":530},{"type":45,"tag":473,"props":784,"children":786},{"class":475,"line":785},17,[787],{"type":45,"tag":473,"props":788,"children":789},{"style":490},[790],{"type":50,"value":698},{"type":45,"tag":473,"props":792,"children":794},{"class":475,"line":793},18,[795],{"type":45,"tag":473,"props":796,"children":797},{"style":480},[798],{"type":50,"value":799},"\u002F* Container fills any scene size (1920x1080, 1080x1920, etc).\n",{"type":45,"tag":473,"props":801,"children":803},{"class":475,"line":802},19,[804],{"type":45,"tag":473,"props":805,"children":806},{"style":480},[807],{"type":50,"value":808},"   Padding positions content. Flex + gap handles spacing. *\u002F\n",{"type":45,"tag":53,"props":810,"children":811},{},[812],{"type":45,"tag":88,"props":813,"children":814},{},[815],{"type":50,"value":816},"WRONG — hardcoded dimensions and absolute positioning:",{"type":45,"tag":462,"props":818,"children":820},{"className":464,"code":819,"language":466,"meta":467,"style":467},".scene-content {\n  position: absolute;\n  top: 200px;\n  left: 160px;\n  width: 1920px;\n  height: 1080px;\n  display: flex; \u002F* ... *\u002F\n}\n",[821],{"type":45,"tag":59,"props":822,"children":823},{"__ignoreMap":467},[824,839,860,881,901,921,941,966],{"type":45,"tag":473,"props":825,"children":826},{"class":475,"line":476},[827,831,835],{"type":45,"tag":473,"props":828,"children":829},{"style":490},[830],{"type":50,"value":493},{"type":45,"tag":473,"props":832,"children":833},{"style":496},[834],{"type":50,"value":499},{"type":45,"tag":473,"props":836,"children":837},{"style":490},[838],{"type":50,"value":504},{"type":45,"tag":473,"props":840,"children":841},{"class":475,"line":486},[842,847,851,856],{"type":45,"tag":473,"props":843,"children":844},{"style":511},[845],{"type":50,"value":846},"  position",{"type":45,"tag":473,"props":848,"children":849},{"style":490},[850],{"type":50,"value":519},{"type":45,"tag":473,"props":852,"children":853},{"style":522},[854],{"type":50,"value":855}," absolute",{"type":45,"tag":473,"props":857,"children":858},{"style":490},[859],{"type":50,"value":530},{"type":45,"tag":473,"props":861,"children":862},{"class":475,"line":507},[863,868,872,877],{"type":45,"tag":473,"props":864,"children":865},{"style":511},[866],{"type":50,"value":867},"  top",{"type":45,"tag":473,"props":869,"children":870},{"style":490},[871],{"type":50,"value":519},{"type":45,"tag":473,"props":873,"children":874},{"style":590},[875],{"type":50,"value":876}," 200px",{"type":45,"tag":473,"props":878,"children":879},{"style":490},[880],{"type":50,"value":530},{"type":45,"tag":473,"props":882,"children":883},{"class":475,"line":533},[884,889,893,897],{"type":45,"tag":473,"props":885,"children":886},{"style":511},[887],{"type":50,"value":888},"  left",{"type":45,"tag":473,"props":890,"children":891},{"style":490},[892],{"type":50,"value":519},{"type":45,"tag":473,"props":894,"children":895},{"style":590},[896],{"type":50,"value":641},{"type":45,"tag":473,"props":898,"children":899},{"style":490},[900],{"type":50,"value":530},{"type":45,"tag":473,"props":902,"children":903},{"class":475,"line":555},[904,908,912,917],{"type":45,"tag":473,"props":905,"children":906},{"style":511},[907],{"type":50,"value":583},{"type":45,"tag":473,"props":909,"children":910},{"style":490},[911],{"type":50,"value":519},{"type":45,"tag":473,"props":913,"children":914},{"style":590},[915],{"type":50,"value":916}," 1920px",{"type":45,"tag":473,"props":918,"children":919},{"style":490},[920],{"type":50,"value":530},{"type":45,"tag":473,"props":922,"children":923},{"class":475,"line":577},[924,928,932,937],{"type":45,"tag":473,"props":925,"children":926},{"style":511},[927],{"type":50,"value":606},{"type":45,"tag":473,"props":929,"children":930},{"style":490},[931],{"type":50,"value":519},{"type":45,"tag":473,"props":933,"children":934},{"style":590},[935],{"type":50,"value":936}," 1080px",{"type":45,"tag":473,"props":938,"children":939},{"style":490},[940],{"type":50,"value":530},{"type":45,"tag":473,"props":942,"children":943},{"class":475,"line":600},[944,948,952,956,961],{"type":45,"tag":473,"props":945,"children":946},{"style":511},[947],{"type":50,"value":514},{"type":45,"tag":473,"props":949,"children":950},{"style":490},[951],{"type":50,"value":519},{"type":45,"tag":473,"props":953,"children":954},{"style":522},[955],{"type":50,"value":525},{"type":45,"tag":473,"props":957,"children":958},{"style":490},[959],{"type":50,"value":960},";",{"type":45,"tag":473,"props":962,"children":963},{"style":480},[964],{"type":50,"value":965}," \u002F* ... *\u002F\n",{"type":45,"tag":473,"props":967,"children":968},{"class":475,"line":621},[969],{"type":45,"tag":473,"props":970,"children":971},{"style":490},[972],{"type":50,"value":698},{"type":45,"tag":462,"props":974,"children":978},{"className":975,"code":976,"language":977,"meta":467,"style":467},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Step 3: Animate INTO those positions\ntl.from(\".title\", { y: 60, opacity: 0, duration: 0.6, ease: \"power3.out\" }, 0);\ntl.from(\".subtitle\", { y: 40, opacity: 0, duration: 0.5, ease: \"power3.out\" }, 0.2);\ntl.from(\".logo\", { scale: 0.8, opacity: 0, duration: 0.4, ease: \"power2.out\" }, 0.3);\n\n\u002F\u002F Step 4: Animate OUT from those positions\ntl.to(\".title\", { y: -40, opacity: 0, duration: 0.4, ease: \"power2.in\" }, 3);\ntl.to(\".subtitle\", { y: -30, opacity: 0, duration: 0.3, ease: \"power2.in\" }, 3.1);\ntl.to(\".logo\", { scale: 0.9, opacity: 0, duration: 0.3, ease: \"power2.in\" }, 3.2);\n","js",[979],{"type":45,"tag":59,"props":980,"children":981},{"__ignoreMap":467},[982,990,1134,1261,1390,1399,1407,1539,1668],{"type":45,"tag":473,"props":983,"children":984},{"class":475,"line":476},[985],{"type":45,"tag":473,"props":986,"children":987},{"style":480},[988],{"type":50,"value":989},"\u002F\u002F Step 3: Animate INTO those positions\n",{"type":45,"tag":473,"props":991,"children":992},{"class":475,"line":486},[993,998,1002,1008,1013,1018,1024,1028,1033,1038,1044,1048,1053,1057,1062,1066,1071,1075,1080,1084,1089,1093,1098,1102,1107,1112,1116,1121,1125,1130],{"type":45,"tag":473,"props":994,"children":995},{"style":522},[996],{"type":50,"value":997},"tl",{"type":45,"tag":473,"props":999,"children":1000},{"style":490},[1001],{"type":50,"value":493},{"type":45,"tag":473,"props":1003,"children":1005},{"style":1004},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1006],{"type":50,"value":1007},"from",{"type":45,"tag":473,"props":1009,"children":1010},{"style":522},[1011],{"type":50,"value":1012},"(",{"type":45,"tag":473,"props":1014,"children":1015},{"style":490},[1016],{"type":50,"value":1017},"\"",{"type":45,"tag":473,"props":1019,"children":1021},{"style":1020},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[1022],{"type":50,"value":1023},".title",{"type":45,"tag":473,"props":1025,"children":1026},{"style":490},[1027],{"type":50,"value":1017},{"type":45,"tag":473,"props":1029,"children":1030},{"style":490},[1031],{"type":50,"value":1032},",",{"type":45,"tag":473,"props":1034,"children":1035},{"style":490},[1036],{"type":50,"value":1037}," {",{"type":45,"tag":473,"props":1039,"children":1041},{"style":1040},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1042],{"type":50,"value":1043}," y",{"type":45,"tag":473,"props":1045,"children":1046},{"style":490},[1047],{"type":50,"value":519},{"type":45,"tag":473,"props":1049,"children":1050},{"style":590},[1051],{"type":50,"value":1052}," 60",{"type":45,"tag":473,"props":1054,"children":1055},{"style":490},[1056],{"type":50,"value":1032},{"type":45,"tag":473,"props":1058,"children":1059},{"style":1040},[1060],{"type":50,"value":1061}," opacity",{"type":45,"tag":473,"props":1063,"children":1064},{"style":490},[1065],{"type":50,"value":519},{"type":45,"tag":473,"props":1067,"children":1068},{"style":590},[1069],{"type":50,"value":1070}," 0",{"type":45,"tag":473,"props":1072,"children":1073},{"style":490},[1074],{"type":50,"value":1032},{"type":45,"tag":473,"props":1076,"children":1077},{"style":1040},[1078],{"type":50,"value":1079}," duration",{"type":45,"tag":473,"props":1081,"children":1082},{"style":490},[1083],{"type":50,"value":519},{"type":45,"tag":473,"props":1085,"children":1086},{"style":590},[1087],{"type":50,"value":1088}," 0.6",{"type":45,"tag":473,"props":1090,"children":1091},{"style":490},[1092],{"type":50,"value":1032},{"type":45,"tag":473,"props":1094,"children":1095},{"style":1040},[1096],{"type":50,"value":1097}," ease",{"type":45,"tag":473,"props":1099,"children":1100},{"style":490},[1101],{"type":50,"value":519},{"type":45,"tag":473,"props":1103,"children":1104},{"style":490},[1105],{"type":50,"value":1106}," \"",{"type":45,"tag":473,"props":1108,"children":1109},{"style":1020},[1110],{"type":50,"value":1111},"power3.out",{"type":45,"tag":473,"props":1113,"children":1114},{"style":490},[1115],{"type":50,"value":1017},{"type":45,"tag":473,"props":1117,"children":1118},{"style":490},[1119],{"type":50,"value":1120}," },",{"type":45,"tag":473,"props":1122,"children":1123},{"style":590},[1124],{"type":50,"value":1070},{"type":45,"tag":473,"props":1126,"children":1127},{"style":522},[1128],{"type":50,"value":1129},")",{"type":45,"tag":473,"props":1131,"children":1132},{"style":490},[1133],{"type":50,"value":530},{"type":45,"tag":473,"props":1135,"children":1136},{"class":475,"line":507},[1137,1141,1145,1149,1153,1157,1162,1166,1170,1174,1178,1182,1187,1191,1195,1199,1203,1207,1211,1215,1220,1224,1228,1232,1236,1240,1244,1248,1253,1257],{"type":45,"tag":473,"props":1138,"children":1139},{"style":522},[1140],{"type":50,"value":997},{"type":45,"tag":473,"props":1142,"children":1143},{"style":490},[1144],{"type":50,"value":493},{"type":45,"tag":473,"props":1146,"children":1147},{"style":1004},[1148],{"type":50,"value":1007},{"type":45,"tag":473,"props":1150,"children":1151},{"style":522},[1152],{"type":50,"value":1012},{"type":45,"tag":473,"props":1154,"children":1155},{"style":490},[1156],{"type":50,"value":1017},{"type":45,"tag":473,"props":1158,"children":1159},{"style":1020},[1160],{"type":50,"value":1161},".subtitle",{"type":45,"tag":473,"props":1163,"children":1164},{"style":490},[1165],{"type":50,"value":1017},{"type":45,"tag":473,"props":1167,"children":1168},{"style":490},[1169],{"type":50,"value":1032},{"type":45,"tag":473,"props":1171,"children":1172},{"style":490},[1173],{"type":50,"value":1037},{"type":45,"tag":473,"props":1175,"children":1176},{"style":1040},[1177],{"type":50,"value":1043},{"type":45,"tag":473,"props":1179,"children":1180},{"style":490},[1181],{"type":50,"value":519},{"type":45,"tag":473,"props":1183,"children":1184},{"style":590},[1185],{"type":50,"value":1186}," 40",{"type":45,"tag":473,"props":1188,"children":1189},{"style":490},[1190],{"type":50,"value":1032},{"type":45,"tag":473,"props":1192,"children":1193},{"style":1040},[1194],{"type":50,"value":1061},{"type":45,"tag":473,"props":1196,"children":1197},{"style":490},[1198],{"type":50,"value":519},{"type":45,"tag":473,"props":1200,"children":1201},{"style":590},[1202],{"type":50,"value":1070},{"type":45,"tag":473,"props":1204,"children":1205},{"style":490},[1206],{"type":50,"value":1032},{"type":45,"tag":473,"props":1208,"children":1209},{"style":1040},[1210],{"type":50,"value":1079},{"type":45,"tag":473,"props":1212,"children":1213},{"style":490},[1214],{"type":50,"value":519},{"type":45,"tag":473,"props":1216,"children":1217},{"style":590},[1218],{"type":50,"value":1219}," 0.5",{"type":45,"tag":473,"props":1221,"children":1222},{"style":490},[1223],{"type":50,"value":1032},{"type":45,"tag":473,"props":1225,"children":1226},{"style":1040},[1227],{"type":50,"value":1097},{"type":45,"tag":473,"props":1229,"children":1230},{"style":490},[1231],{"type":50,"value":519},{"type":45,"tag":473,"props":1233,"children":1234},{"style":490},[1235],{"type":50,"value":1106},{"type":45,"tag":473,"props":1237,"children":1238},{"style":1020},[1239],{"type":50,"value":1111},{"type":45,"tag":473,"props":1241,"children":1242},{"style":490},[1243],{"type":50,"value":1017},{"type":45,"tag":473,"props":1245,"children":1246},{"style":490},[1247],{"type":50,"value":1120},{"type":45,"tag":473,"props":1249,"children":1250},{"style":590},[1251],{"type":50,"value":1252}," 0.2",{"type":45,"tag":473,"props":1254,"children":1255},{"style":522},[1256],{"type":50,"value":1129},{"type":45,"tag":473,"props":1258,"children":1259},{"style":490},[1260],{"type":50,"value":530},{"type":45,"tag":473,"props":1262,"children":1263},{"class":475,"line":533},[1264,1268,1272,1276,1280,1284,1289,1293,1297,1301,1306,1310,1315,1319,1323,1327,1331,1335,1339,1343,1348,1352,1356,1360,1364,1369,1373,1377,1382,1386],{"type":45,"tag":473,"props":1265,"children":1266},{"style":522},[1267],{"type":50,"value":997},{"type":45,"tag":473,"props":1269,"children":1270},{"style":490},[1271],{"type":50,"value":493},{"type":45,"tag":473,"props":1273,"children":1274},{"style":1004},[1275],{"type":50,"value":1007},{"type":45,"tag":473,"props":1277,"children":1278},{"style":522},[1279],{"type":50,"value":1012},{"type":45,"tag":473,"props":1281,"children":1282},{"style":490},[1283],{"type":50,"value":1017},{"type":45,"tag":473,"props":1285,"children":1286},{"style":1020},[1287],{"type":50,"value":1288},".logo",{"type":45,"tag":473,"props":1290,"children":1291},{"style":490},[1292],{"type":50,"value":1017},{"type":45,"tag":473,"props":1294,"children":1295},{"style":490},[1296],{"type":50,"value":1032},{"type":45,"tag":473,"props":1298,"children":1299},{"style":490},[1300],{"type":50,"value":1037},{"type":45,"tag":473,"props":1302,"children":1303},{"style":1040},[1304],{"type":50,"value":1305}," scale",{"type":45,"tag":473,"props":1307,"children":1308},{"style":490},[1309],{"type":50,"value":519},{"type":45,"tag":473,"props":1311,"children":1312},{"style":590},[1313],{"type":50,"value":1314}," 0.8",{"type":45,"tag":473,"props":1316,"children":1317},{"style":490},[1318],{"type":50,"value":1032},{"type":45,"tag":473,"props":1320,"children":1321},{"style":1040},[1322],{"type":50,"value":1061},{"type":45,"tag":473,"props":1324,"children":1325},{"style":490},[1326],{"type":50,"value":519},{"type":45,"tag":473,"props":1328,"children":1329},{"style":590},[1330],{"type":50,"value":1070},{"type":45,"tag":473,"props":1332,"children":1333},{"style":490},[1334],{"type":50,"value":1032},{"type":45,"tag":473,"props":1336,"children":1337},{"style":1040},[1338],{"type":50,"value":1079},{"type":45,"tag":473,"props":1340,"children":1341},{"style":490},[1342],{"type":50,"value":519},{"type":45,"tag":473,"props":1344,"children":1345},{"style":590},[1346],{"type":50,"value":1347}," 0.4",{"type":45,"tag":473,"props":1349,"children":1350},{"style":490},[1351],{"type":50,"value":1032},{"type":45,"tag":473,"props":1353,"children":1354},{"style":1040},[1355],{"type":50,"value":1097},{"type":45,"tag":473,"props":1357,"children":1358},{"style":490},[1359],{"type":50,"value":519},{"type":45,"tag":473,"props":1361,"children":1362},{"style":490},[1363],{"type":50,"value":1106},{"type":45,"tag":473,"props":1365,"children":1366},{"style":1020},[1367],{"type":50,"value":1368},"power2.out",{"type":45,"tag":473,"props":1370,"children":1371},{"style":490},[1372],{"type":50,"value":1017},{"type":45,"tag":473,"props":1374,"children":1375},{"style":490},[1376],{"type":50,"value":1120},{"type":45,"tag":473,"props":1378,"children":1379},{"style":590},[1380],{"type":50,"value":1381}," 0.3",{"type":45,"tag":473,"props":1383,"children":1384},{"style":522},[1385],{"type":50,"value":1129},{"type":45,"tag":473,"props":1387,"children":1388},{"style":490},[1389],{"type":50,"value":530},{"type":45,"tag":473,"props":1391,"children":1392},{"class":475,"line":555},[1393],{"type":45,"tag":473,"props":1394,"children":1396},{"emptyLinePlaceholder":1395},true,[1397],{"type":50,"value":1398},"\n",{"type":45,"tag":473,"props":1400,"children":1401},{"class":475,"line":577},[1402],{"type":45,"tag":473,"props":1403,"children":1404},{"style":480},[1405],{"type":50,"value":1406},"\u002F\u002F Step 4: Animate OUT from those positions\n",{"type":45,"tag":473,"props":1408,"children":1409},{"class":475,"line":600},[1410,1414,1418,1423,1427,1431,1435,1439,1443,1447,1451,1455,1460,1465,1469,1473,1477,1481,1485,1489,1493,1497,1501,1505,1509,1513,1518,1522,1526,1531,1535],{"type":45,"tag":473,"props":1411,"children":1412},{"style":522},[1413],{"type":50,"value":997},{"type":45,"tag":473,"props":1415,"children":1416},{"style":490},[1417],{"type":50,"value":493},{"type":45,"tag":473,"props":1419,"children":1420},{"style":1004},[1421],{"type":50,"value":1422},"to",{"type":45,"tag":473,"props":1424,"children":1425},{"style":522},[1426],{"type":50,"value":1012},{"type":45,"tag":473,"props":1428,"children":1429},{"style":490},[1430],{"type":50,"value":1017},{"type":45,"tag":473,"props":1432,"children":1433},{"style":1020},[1434],{"type":50,"value":1023},{"type":45,"tag":473,"props":1436,"children":1437},{"style":490},[1438],{"type":50,"value":1017},{"type":45,"tag":473,"props":1440,"children":1441},{"style":490},[1442],{"type":50,"value":1032},{"type":45,"tag":473,"props":1444,"children":1445},{"style":490},[1446],{"type":50,"value":1037},{"type":45,"tag":473,"props":1448,"children":1449},{"style":1040},[1450],{"type":50,"value":1043},{"type":45,"tag":473,"props":1452,"children":1453},{"style":490},[1454],{"type":50,"value":519},{"type":45,"tag":473,"props":1456,"children":1457},{"style":490},[1458],{"type":50,"value":1459}," -",{"type":45,"tag":473,"props":1461,"children":1462},{"style":590},[1463],{"type":50,"value":1464},"40",{"type":45,"tag":473,"props":1466,"children":1467},{"style":490},[1468],{"type":50,"value":1032},{"type":45,"tag":473,"props":1470,"children":1471},{"style":1040},[1472],{"type":50,"value":1061},{"type":45,"tag":473,"props":1474,"children":1475},{"style":490},[1476],{"type":50,"value":519},{"type":45,"tag":473,"props":1478,"children":1479},{"style":590},[1480],{"type":50,"value":1070},{"type":45,"tag":473,"props":1482,"children":1483},{"style":490},[1484],{"type":50,"value":1032},{"type":45,"tag":473,"props":1486,"children":1487},{"style":1040},[1488],{"type":50,"value":1079},{"type":45,"tag":473,"props":1490,"children":1491},{"style":490},[1492],{"type":50,"value":519},{"type":45,"tag":473,"props":1494,"children":1495},{"style":590},[1496],{"type":50,"value":1347},{"type":45,"tag":473,"props":1498,"children":1499},{"style":490},[1500],{"type":50,"value":1032},{"type":45,"tag":473,"props":1502,"children":1503},{"style":1040},[1504],{"type":50,"value":1097},{"type":45,"tag":473,"props":1506,"children":1507},{"style":490},[1508],{"type":50,"value":519},{"type":45,"tag":473,"props":1510,"children":1511},{"style":490},[1512],{"type":50,"value":1106},{"type":45,"tag":473,"props":1514,"children":1515},{"style":1020},[1516],{"type":50,"value":1517},"power2.in",{"type":45,"tag":473,"props":1519,"children":1520},{"style":490},[1521],{"type":50,"value":1017},{"type":45,"tag":473,"props":1523,"children":1524},{"style":490},[1525],{"type":50,"value":1120},{"type":45,"tag":473,"props":1527,"children":1528},{"style":590},[1529],{"type":50,"value":1530}," 3",{"type":45,"tag":473,"props":1532,"children":1533},{"style":522},[1534],{"type":50,"value":1129},{"type":45,"tag":473,"props":1536,"children":1537},{"style":490},[1538],{"type":50,"value":530},{"type":45,"tag":473,"props":1540,"children":1541},{"class":475,"line":621},[1542,1546,1550,1554,1558,1562,1566,1570,1574,1578,1582,1586,1590,1595,1599,1603,1607,1611,1615,1619,1623,1627,1631,1635,1639,1643,1647,1651,1655,1660,1664],{"type":45,"tag":473,"props":1543,"children":1544},{"style":522},[1545],{"type":50,"value":997},{"type":45,"tag":473,"props":1547,"children":1548},{"style":490},[1549],{"type":50,"value":493},{"type":45,"tag":473,"props":1551,"children":1552},{"style":1004},[1553],{"type":50,"value":1422},{"type":45,"tag":473,"props":1555,"children":1556},{"style":522},[1557],{"type":50,"value":1012},{"type":45,"tag":473,"props":1559,"children":1560},{"style":490},[1561],{"type":50,"value":1017},{"type":45,"tag":473,"props":1563,"children":1564},{"style":1020},[1565],{"type":50,"value":1161},{"type":45,"tag":473,"props":1567,"children":1568},{"style":490},[1569],{"type":50,"value":1017},{"type":45,"tag":473,"props":1571,"children":1572},{"style":490},[1573],{"type":50,"value":1032},{"type":45,"tag":473,"props":1575,"children":1576},{"style":490},[1577],{"type":50,"value":1037},{"type":45,"tag":473,"props":1579,"children":1580},{"style":1040},[1581],{"type":50,"value":1043},{"type":45,"tag":473,"props":1583,"children":1584},{"style":490},[1585],{"type":50,"value":519},{"type":45,"tag":473,"props":1587,"children":1588},{"style":490},[1589],{"type":50,"value":1459},{"type":45,"tag":473,"props":1591,"children":1592},{"style":590},[1593],{"type":50,"value":1594},"30",{"type":45,"tag":473,"props":1596,"children":1597},{"style":490},[1598],{"type":50,"value":1032},{"type":45,"tag":473,"props":1600,"children":1601},{"style":1040},[1602],{"type":50,"value":1061},{"type":45,"tag":473,"props":1604,"children":1605},{"style":490},[1606],{"type":50,"value":519},{"type":45,"tag":473,"props":1608,"children":1609},{"style":590},[1610],{"type":50,"value":1070},{"type":45,"tag":473,"props":1612,"children":1613},{"style":490},[1614],{"type":50,"value":1032},{"type":45,"tag":473,"props":1616,"children":1617},{"style":1040},[1618],{"type":50,"value":1079},{"type":45,"tag":473,"props":1620,"children":1621},{"style":490},[1622],{"type":50,"value":519},{"type":45,"tag":473,"props":1624,"children":1625},{"style":590},[1626],{"type":50,"value":1381},{"type":45,"tag":473,"props":1628,"children":1629},{"style":490},[1630],{"type":50,"value":1032},{"type":45,"tag":473,"props":1632,"children":1633},{"style":1040},[1634],{"type":50,"value":1097},{"type":45,"tag":473,"props":1636,"children":1637},{"style":490},[1638],{"type":50,"value":519},{"type":45,"tag":473,"props":1640,"children":1641},{"style":490},[1642],{"type":50,"value":1106},{"type":45,"tag":473,"props":1644,"children":1645},{"style":1020},[1646],{"type":50,"value":1517},{"type":45,"tag":473,"props":1648,"children":1649},{"style":490},[1650],{"type":50,"value":1017},{"type":45,"tag":473,"props":1652,"children":1653},{"style":490},[1654],{"type":50,"value":1120},{"type":45,"tag":473,"props":1656,"children":1657},{"style":590},[1658],{"type":50,"value":1659}," 3.1",{"type":45,"tag":473,"props":1661,"children":1662},{"style":522},[1663],{"type":50,"value":1129},{"type":45,"tag":473,"props":1665,"children":1666},{"style":490},[1667],{"type":50,"value":530},{"type":45,"tag":473,"props":1669,"children":1670},{"class":475,"line":648},[1671,1675,1679,1683,1687,1691,1695,1699,1703,1707,1711,1715,1720,1724,1728,1732,1736,1740,1744,1748,1752,1756,1760,1764,1768,1772,1776,1780,1785,1789],{"type":45,"tag":473,"props":1672,"children":1673},{"style":522},[1674],{"type":50,"value":997},{"type":45,"tag":473,"props":1676,"children":1677},{"style":490},[1678],{"type":50,"value":493},{"type":45,"tag":473,"props":1680,"children":1681},{"style":1004},[1682],{"type":50,"value":1422},{"type":45,"tag":473,"props":1684,"children":1685},{"style":522},[1686],{"type":50,"value":1012},{"type":45,"tag":473,"props":1688,"children":1689},{"style":490},[1690],{"type":50,"value":1017},{"type":45,"tag":473,"props":1692,"children":1693},{"style":1020},[1694],{"type":50,"value":1288},{"type":45,"tag":473,"props":1696,"children":1697},{"style":490},[1698],{"type":50,"value":1017},{"type":45,"tag":473,"props":1700,"children":1701},{"style":490},[1702],{"type":50,"value":1032},{"type":45,"tag":473,"props":1704,"children":1705},{"style":490},[1706],{"type":50,"value":1037},{"type":45,"tag":473,"props":1708,"children":1709},{"style":1040},[1710],{"type":50,"value":1305},{"type":45,"tag":473,"props":1712,"children":1713},{"style":490},[1714],{"type":50,"value":519},{"type":45,"tag":473,"props":1716,"children":1717},{"style":590},[1718],{"type":50,"value":1719}," 0.9",{"type":45,"tag":473,"props":1721,"children":1722},{"style":490},[1723],{"type":50,"value":1032},{"type":45,"tag":473,"props":1725,"children":1726},{"style":1040},[1727],{"type":50,"value":1061},{"type":45,"tag":473,"props":1729,"children":1730},{"style":490},[1731],{"type":50,"value":519},{"type":45,"tag":473,"props":1733,"children":1734},{"style":590},[1735],{"type":50,"value":1070},{"type":45,"tag":473,"props":1737,"children":1738},{"style":490},[1739],{"type":50,"value":1032},{"type":45,"tag":473,"props":1741,"children":1742},{"style":1040},[1743],{"type":50,"value":1079},{"type":45,"tag":473,"props":1745,"children":1746},{"style":490},[1747],{"type":50,"value":519},{"type":45,"tag":473,"props":1749,"children":1750},{"style":590},[1751],{"type":50,"value":1381},{"type":45,"tag":473,"props":1753,"children":1754},{"style":490},[1755],{"type":50,"value":1032},{"type":45,"tag":473,"props":1757,"children":1758},{"style":1040},[1759],{"type":50,"value":1097},{"type":45,"tag":473,"props":1761,"children":1762},{"style":490},[1763],{"type":50,"value":519},{"type":45,"tag":473,"props":1765,"children":1766},{"style":490},[1767],{"type":50,"value":1106},{"type":45,"tag":473,"props":1769,"children":1770},{"style":1020},[1771],{"type":50,"value":1517},{"type":45,"tag":473,"props":1773,"children":1774},{"style":490},[1775],{"type":50,"value":1017},{"type":45,"tag":473,"props":1777,"children":1778},{"style":490},[1779],{"type":50,"value":1120},{"type":45,"tag":473,"props":1781,"children":1782},{"style":590},[1783],{"type":50,"value":1784}," 3.2",{"type":45,"tag":473,"props":1786,"children":1787},{"style":522},[1788],{"type":50,"value":1129},{"type":45,"tag":473,"props":1790,"children":1791},{"style":490},[1792],{"type":50,"value":530},{"type":45,"tag":141,"props":1794,"children":1796},{"id":1795},"when-elements-share-space-across-time",[1797],{"type":50,"value":1798},"When elements share space across time",{"type":45,"tag":53,"props":1800,"children":1801},{},[1802],{"type":50,"value":1803},"If element A exits before element B enters in the same area, both should have correct CSS positions for their respective hero frames. The timeline ordering guarantees they never visually coexist — but if you skip the layout step, you won't catch the case where they accidentally overlap due to a timing error.",{"type":45,"tag":141,"props":1805,"children":1807},{"id":1806},"what-counts-as-intentional-overlap",[1808],{"type":50,"value":1809},"What counts as intentional overlap",{"type":45,"tag":53,"props":1811,"children":1812},{},[1813,1815,1820],{"type":50,"value":1814},"Layered effects (glow behind text, shadow elements, background patterns) and z-stacked designs (card stacks, depth layers) are intentional. The layout step is about catching ",{"type":45,"tag":88,"props":1816,"children":1817},{},[1818],{"type":50,"value":1819},"unintentional",{"type":50,"value":1821}," overlap — two headlines landing on top of each other, a stat covering a label, content bleeding off-frame.",{"type":45,"tag":68,"props":1823,"children":1825},{"id":1824},"data-attributes",[1826],{"type":50,"value":1827},"Data Attributes",{"type":45,"tag":141,"props":1829,"children":1831},{"id":1830},"all-clips",[1832],{"type":50,"value":1833},"All Clips",{"type":45,"tag":1835,"props":1836,"children":1837},"table",{},[1838,1862],{"type":45,"tag":1839,"props":1840,"children":1841},"thead",{},[1842],{"type":45,"tag":1843,"props":1844,"children":1845},"tr",{},[1846,1852,1857],{"type":45,"tag":1847,"props":1848,"children":1849},"th",{},[1850],{"type":50,"value":1851},"Attribute",{"type":45,"tag":1847,"props":1853,"children":1854},{},[1855],{"type":50,"value":1856},"Required",{"type":45,"tag":1847,"props":1858,"children":1859},{},[1860],{"type":50,"value":1861},"Values",{"type":45,"tag":1863,"props":1864,"children":1865},"tbody",{},[1866,1889,1924,1946,1967,1989],{"type":45,"tag":1843,"props":1867,"children":1868},{},[1869,1879,1884],{"type":45,"tag":1870,"props":1871,"children":1872},"td",{},[1873],{"type":45,"tag":59,"props":1874,"children":1876},{"className":1875},[],[1877],{"type":50,"value":1878},"id",{"type":45,"tag":1870,"props":1880,"children":1881},{},[1882],{"type":50,"value":1883},"Yes",{"type":45,"tag":1870,"props":1885,"children":1886},{},[1887],{"type":50,"value":1888},"Unique identifier",{"type":45,"tag":1843,"props":1890,"children":1891},{},[1892,1901,1905],{"type":45,"tag":1870,"props":1893,"children":1894},{},[1895],{"type":45,"tag":59,"props":1896,"children":1898},{"className":1897},[],[1899],{"type":50,"value":1900},"data-start",{"type":45,"tag":1870,"props":1902,"children":1903},{},[1904],{"type":50,"value":1883},{"type":45,"tag":1870,"props":1906,"children":1907},{},[1908,1910,1916,1917,1923],{"type":50,"value":1909},"Seconds or clip ID reference (",{"type":45,"tag":59,"props":1911,"children":1913},{"className":1912},[],[1914],{"type":50,"value":1915},"\"el-1\"",{"type":50,"value":296},{"type":45,"tag":59,"props":1918,"children":1920},{"className":1919},[],[1921],{"type":50,"value":1922},"\"intro + 2\"",{"type":50,"value":1129},{"type":45,"tag":1843,"props":1925,"children":1926},{},[1927,1936,1941],{"type":45,"tag":1870,"props":1928,"children":1929},{},[1930],{"type":45,"tag":59,"props":1931,"children":1933},{"className":1932},[],[1934],{"type":50,"value":1935},"data-duration",{"type":45,"tag":1870,"props":1937,"children":1938},{},[1939],{"type":50,"value":1940},"Required for img\u002Fdiv\u002Fcompositions",{"type":45,"tag":1870,"props":1942,"children":1943},{},[1944],{"type":50,"value":1945},"Seconds. Video\u002Faudio defaults to media duration.",{"type":45,"tag":1843,"props":1947,"children":1948},{},[1949,1958,1962],{"type":45,"tag":1870,"props":1950,"children":1951},{},[1952],{"type":45,"tag":59,"props":1953,"children":1955},{"className":1954},[],[1956],{"type":50,"value":1957},"data-track-index",{"type":45,"tag":1870,"props":1959,"children":1960},{},[1961],{"type":50,"value":1883},{"type":45,"tag":1870,"props":1963,"children":1964},{},[1965],{"type":50,"value":1966},"Integer. Same-track clips cannot overlap.",{"type":45,"tag":1843,"props":1968,"children":1969},{},[1970,1979,1984],{"type":45,"tag":1870,"props":1971,"children":1972},{},[1973],{"type":45,"tag":59,"props":1974,"children":1976},{"className":1975},[],[1977],{"type":50,"value":1978},"data-media-start",{"type":45,"tag":1870,"props":1980,"children":1981},{},[1982],{"type":50,"value":1983},"No",{"type":45,"tag":1870,"props":1985,"children":1986},{},[1987],{"type":50,"value":1988},"Trim offset into source (seconds)",{"type":45,"tag":1843,"props":1990,"children":1991},{},[1992,2001,2005],{"type":45,"tag":1870,"props":1993,"children":1994},{},[1995],{"type":45,"tag":59,"props":1996,"children":1998},{"className":1997},[],[1999],{"type":50,"value":2000},"data-volume",{"type":45,"tag":1870,"props":2002,"children":2003},{},[2004],{"type":50,"value":1983},{"type":45,"tag":1870,"props":2006,"children":2007},{},[2008],{"type":50,"value":2009},"0-1 (default 1)",{"type":45,"tag":53,"props":2011,"children":2012},{},[2013,2018,2020,2025,2027,2033],{"type":45,"tag":59,"props":2014,"children":2016},{"className":2015},[],[2017],{"type":50,"value":1957},{"type":50,"value":2019}," does ",{"type":45,"tag":88,"props":2021,"children":2022},{},[2023],{"type":50,"value":2024},"not",{"type":50,"value":2026}," affect visual layering — use CSS ",{"type":45,"tag":59,"props":2028,"children":2030},{"className":2029},[],[2031],{"type":50,"value":2032},"z-index",{"type":50,"value":493},{"type":45,"tag":141,"props":2035,"children":2037},{"id":2036},"composition-clips",[2038],{"type":50,"value":2039},"Composition Clips",{"type":45,"tag":1835,"props":2041,"children":2042},{},[2043,2061],{"type":45,"tag":1839,"props":2044,"children":2045},{},[2046],{"type":45,"tag":1843,"props":2047,"children":2048},{},[2049,2053,2057],{"type":45,"tag":1847,"props":2050,"children":2051},{},[2052],{"type":50,"value":1851},{"type":45,"tag":1847,"props":2054,"children":2055},{},[2056],{"type":50,"value":1856},{"type":45,"tag":1847,"props":2058,"children":2059},{},[2060],{"type":50,"value":1861},{"type":45,"tag":1863,"props":2062,"children":2063},{},[2064,2085,2112,2132,2161],{"type":45,"tag":1843,"props":2065,"children":2066},{},[2067,2076,2080],{"type":45,"tag":1870,"props":2068,"children":2069},{},[2070],{"type":45,"tag":59,"props":2071,"children":2073},{"className":2072},[],[2074],{"type":50,"value":2075},"data-composition-id",{"type":45,"tag":1870,"props":2077,"children":2078},{},[2079],{"type":50,"value":1883},{"type":45,"tag":1870,"props":2081,"children":2082},{},[2083],{"type":50,"value":2084},"Unique composition ID",{"type":45,"tag":1843,"props":2086,"children":2087},{},[2088,2096,2100],{"type":45,"tag":1870,"props":2089,"children":2090},{},[2091],{"type":45,"tag":59,"props":2092,"children":2094},{"className":2093},[],[2095],{"type":50,"value":1900},{"type":45,"tag":1870,"props":2097,"children":2098},{},[2099],{"type":50,"value":1883},{"type":45,"tag":1870,"props":2101,"children":2102},{},[2103,2105,2111],{"type":50,"value":2104},"Start time (root composition: use ",{"type":45,"tag":59,"props":2106,"children":2108},{"className":2107},[],[2109],{"type":50,"value":2110},"\"0\"",{"type":50,"value":1129},{"type":45,"tag":1843,"props":2113,"children":2114},{},[2115,2123,2127],{"type":45,"tag":1870,"props":2116,"children":2117},{},[2118],{"type":45,"tag":59,"props":2119,"children":2121},{"className":2120},[],[2122],{"type":50,"value":1935},{"type":45,"tag":1870,"props":2124,"children":2125},{},[2126],{"type":50,"value":1883},{"type":45,"tag":1870,"props":2128,"children":2129},{},[2130],{"type":50,"value":2131},"Takes precedence over GSAP timeline duration",{"type":45,"tag":1843,"props":2133,"children":2134},{},[2135,2152,2156],{"type":45,"tag":1870,"props":2136,"children":2137},{},[2138,2144,2146],{"type":45,"tag":59,"props":2139,"children":2141},{"className":2140},[],[2142],{"type":50,"value":2143},"data-width",{"type":50,"value":2145}," \u002F ",{"type":45,"tag":59,"props":2147,"children":2149},{"className":2148},[],[2150],{"type":50,"value":2151},"data-height",{"type":45,"tag":1870,"props":2153,"children":2154},{},[2155],{"type":50,"value":1883},{"type":45,"tag":1870,"props":2157,"children":2158},{},[2159],{"type":50,"value":2160},"Pixel dimensions (1920x1080 or 1080x1920)",{"type":45,"tag":1843,"props":2162,"children":2163},{},[2164,2173,2177],{"type":45,"tag":1870,"props":2165,"children":2166},{},[2167],{"type":45,"tag":59,"props":2168,"children":2170},{"className":2169},[],[2171],{"type":50,"value":2172},"data-composition-src",{"type":45,"tag":1870,"props":2174,"children":2175},{},[2176],{"type":50,"value":1983},{"type":45,"tag":1870,"props":2178,"children":2179},{},[2180],{"type":50,"value":2181},"Path to external HTML file",{"type":45,"tag":68,"props":2183,"children":2185},{"id":2184},"composition-structure",[2186],{"type":50,"value":2187},"Composition Structure",{"type":45,"tag":53,"props":2189,"children":2190},{},[2191,2193,2198,2200,2206,2208,2218,2220,2225,2227,2233,2235,2240],{"type":50,"value":2192},"Sub-compositions loaded via ",{"type":45,"tag":59,"props":2194,"children":2196},{"className":2195},[],[2197],{"type":50,"value":2172},{"type":50,"value":2199}," use a ",{"type":45,"tag":59,"props":2201,"children":2203},{"className":2202},[],[2204],{"type":50,"value":2205},"\u003Ctemplate>",{"type":50,"value":2207}," wrapper. ",{"type":45,"tag":88,"props":2209,"children":2210},{},[2211,2213],{"type":50,"value":2212},"Standalone compositions (the main index.html) do NOT use ",{"type":45,"tag":59,"props":2214,"children":2216},{"className":2215},[],[2217],{"type":50,"value":2205},{"type":50,"value":2219}," — they put the ",{"type":45,"tag":59,"props":2221,"children":2223},{"className":2222},[],[2224],{"type":50,"value":2075},{"type":50,"value":2226}," div directly in ",{"type":45,"tag":59,"props":2228,"children":2230},{"className":2229},[],[2231],{"type":50,"value":2232},"\u003Cbody>",{"type":50,"value":2234},". Using ",{"type":45,"tag":59,"props":2236,"children":2238},{"className":2237},[],[2239],{"type":50,"value":2205},{"type":50,"value":2241}," on a standalone file hides all content from the browser and breaks rendering.",{"type":45,"tag":53,"props":2243,"children":2244},{},[2245],{"type":50,"value":2246},"Sub-composition structure:",{"type":45,"tag":462,"props":2248,"children":2251},{"className":2249,"code":2250,"language":14,"meta":467,"style":467},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate id=\"my-comp-template\">\n  \u003Cdiv data-composition-id=\"my-comp\" data-width=\"1920\" data-height=\"1080\">\n    \u003C!-- content -->\n    \u003Cstyle>\n      [data-composition-id=\"my-comp\"] {\n        \u002F* scoped styles *\u002F\n      }\n    \u003C\u002Fstyle>\n    \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3.14.2\u002Fdist\u002Fgsap.min.js\">\u003C\u002Fscript>\n    \u003Cscript>\n      window.__timelines = window.__timelines || {};\n      const tl = gsap.timeline({ paused: true });\n      \u002F\u002F tweens...\n      window.__timelines[\"my-comp\"] = tl;\n    \u003C\u002Fscript>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[2252],{"type":45,"tag":59,"props":2253,"children":2254},{"__ignoreMap":467},[2255,2297,2380,2388,2405,2442,2450,2458,2474,2521,2536,2580,2648,2656,2702,2717,2733],{"type":45,"tag":473,"props":2256,"children":2257},{"class":475,"line":476},[2258,2263,2268,2274,2279,2283,2288,2292],{"type":45,"tag":473,"props":2259,"children":2260},{"style":490},[2261],{"type":50,"value":2262},"\u003C",{"type":45,"tag":473,"props":2264,"children":2265},{"style":1040},[2266],{"type":50,"value":2267},"template",{"type":45,"tag":473,"props":2269,"children":2271},{"style":2270},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[2272],{"type":50,"value":2273}," id",{"type":45,"tag":473,"props":2275,"children":2276},{"style":490},[2277],{"type":50,"value":2278},"=",{"type":45,"tag":473,"props":2280,"children":2281},{"style":490},[2282],{"type":50,"value":1017},{"type":45,"tag":473,"props":2284,"children":2285},{"style":1020},[2286],{"type":50,"value":2287},"my-comp-template",{"type":45,"tag":473,"props":2289,"children":2290},{"style":490},[2291],{"type":50,"value":1017},{"type":45,"tag":473,"props":2293,"children":2294},{"style":490},[2295],{"type":50,"value":2296},">\n",{"type":45,"tag":473,"props":2298,"children":2299},{"class":475,"line":486},[2300,2305,2310,2315,2319,2323,2328,2332,2337,2341,2345,2350,2354,2359,2363,2367,2372,2376],{"type":45,"tag":473,"props":2301,"children":2302},{"style":490},[2303],{"type":50,"value":2304},"  \u003C",{"type":45,"tag":473,"props":2306,"children":2307},{"style":1040},[2308],{"type":50,"value":2309},"div",{"type":45,"tag":473,"props":2311,"children":2312},{"style":2270},[2313],{"type":50,"value":2314}," data-composition-id",{"type":45,"tag":473,"props":2316,"children":2317},{"style":490},[2318],{"type":50,"value":2278},{"type":45,"tag":473,"props":2320,"children":2321},{"style":490},[2322],{"type":50,"value":1017},{"type":45,"tag":473,"props":2324,"children":2325},{"style":1020},[2326],{"type":50,"value":2327},"my-comp",{"type":45,"tag":473,"props":2329,"children":2330},{"style":490},[2331],{"type":50,"value":1017},{"type":45,"tag":473,"props":2333,"children":2334},{"style":2270},[2335],{"type":50,"value":2336}," data-width",{"type":45,"tag":473,"props":2338,"children":2339},{"style":490},[2340],{"type":50,"value":2278},{"type":45,"tag":473,"props":2342,"children":2343},{"style":490},[2344],{"type":50,"value":1017},{"type":45,"tag":473,"props":2346,"children":2347},{"style":1020},[2348],{"type":50,"value":2349},"1920",{"type":45,"tag":473,"props":2351,"children":2352},{"style":490},[2353],{"type":50,"value":1017},{"type":45,"tag":473,"props":2355,"children":2356},{"style":2270},[2357],{"type":50,"value":2358}," data-height",{"type":45,"tag":473,"props":2360,"children":2361},{"style":490},[2362],{"type":50,"value":2278},{"type":45,"tag":473,"props":2364,"children":2365},{"style":490},[2366],{"type":50,"value":1017},{"type":45,"tag":473,"props":2368,"children":2369},{"style":1020},[2370],{"type":50,"value":2371},"1080",{"type":45,"tag":473,"props":2373,"children":2374},{"style":490},[2375],{"type":50,"value":1017},{"type":45,"tag":473,"props":2377,"children":2378},{"style":490},[2379],{"type":50,"value":2296},{"type":45,"tag":473,"props":2381,"children":2382},{"class":475,"line":507},[2383],{"type":45,"tag":473,"props":2384,"children":2385},{"style":480},[2386],{"type":50,"value":2387},"    \u003C!-- content -->\n",{"type":45,"tag":473,"props":2389,"children":2390},{"class":475,"line":533},[2391,2396,2401],{"type":45,"tag":473,"props":2392,"children":2393},{"style":490},[2394],{"type":50,"value":2395},"    \u003C",{"type":45,"tag":473,"props":2397,"children":2398},{"style":1040},[2399],{"type":50,"value":2400},"style",{"type":45,"tag":473,"props":2402,"children":2403},{"style":490},[2404],{"type":50,"value":2296},{"type":45,"tag":473,"props":2406,"children":2407},{"class":475,"line":555},[2408,2413,2417,2421,2425,2429,2433,2438],{"type":45,"tag":473,"props":2409,"children":2410},{"style":490},[2411],{"type":50,"value":2412},"      [",{"type":45,"tag":473,"props":2414,"children":2415},{"style":2270},[2416],{"type":50,"value":2075},{"type":45,"tag":473,"props":2418,"children":2419},{"style":490},[2420],{"type":50,"value":2278},{"type":45,"tag":473,"props":2422,"children":2423},{"style":490},[2424],{"type":50,"value":1017},{"type":45,"tag":473,"props":2426,"children":2427},{"style":1020},[2428],{"type":50,"value":2327},{"type":45,"tag":473,"props":2430,"children":2431},{"style":490},[2432],{"type":50,"value":1017},{"type":45,"tag":473,"props":2434,"children":2435},{"style":490},[2436],{"type":50,"value":2437},"]",{"type":45,"tag":473,"props":2439,"children":2440},{"style":490},[2441],{"type":50,"value":504},{"type":45,"tag":473,"props":2443,"children":2444},{"class":475,"line":577},[2445],{"type":45,"tag":473,"props":2446,"children":2447},{"style":480},[2448],{"type":50,"value":2449},"        \u002F* scoped styles *\u002F\n",{"type":45,"tag":473,"props":2451,"children":2452},{"class":475,"line":600},[2453],{"type":45,"tag":473,"props":2454,"children":2455},{"style":490},[2456],{"type":50,"value":2457},"      }\n",{"type":45,"tag":473,"props":2459,"children":2460},{"class":475,"line":621},[2461,2466,2470],{"type":45,"tag":473,"props":2462,"children":2463},{"style":490},[2464],{"type":50,"value":2465},"    \u003C\u002F",{"type":45,"tag":473,"props":2467,"children":2468},{"style":1040},[2469],{"type":50,"value":2400},{"type":45,"tag":473,"props":2471,"children":2472},{"style":490},[2473],{"type":50,"value":2296},{"type":45,"tag":473,"props":2475,"children":2476},{"class":475,"line":648},[2477,2481,2486,2491,2495,2499,2504,2508,2513,2517],{"type":45,"tag":473,"props":2478,"children":2479},{"style":490},[2480],{"type":50,"value":2395},{"type":45,"tag":473,"props":2482,"children":2483},{"style":1040},[2484],{"type":50,"value":2485},"script",{"type":45,"tag":473,"props":2487,"children":2488},{"style":2270},[2489],{"type":50,"value":2490}," src",{"type":45,"tag":473,"props":2492,"children":2493},{"style":490},[2494],{"type":50,"value":2278},{"type":45,"tag":473,"props":2496,"children":2497},{"style":490},[2498],{"type":50,"value":1017},{"type":45,"tag":473,"props":2500,"children":2501},{"style":1020},[2502],{"type":50,"value":2503},"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3.14.2\u002Fdist\u002Fgsap.min.js",{"type":45,"tag":473,"props":2505,"children":2506},{"style":490},[2507],{"type":50,"value":1017},{"type":45,"tag":473,"props":2509,"children":2510},{"style":490},[2511],{"type":50,"value":2512},">\u003C\u002F",{"type":45,"tag":473,"props":2514,"children":2515},{"style":1040},[2516],{"type":50,"value":2485},{"type":45,"tag":473,"props":2518,"children":2519},{"style":490},[2520],{"type":50,"value":2296},{"type":45,"tag":473,"props":2522,"children":2523},{"class":475,"line":670},[2524,2528,2532],{"type":45,"tag":473,"props":2525,"children":2526},{"style":490},[2527],{"type":50,"value":2395},{"type":45,"tag":473,"props":2529,"children":2530},{"style":1040},[2531],{"type":50,"value":2485},{"type":45,"tag":473,"props":2533,"children":2534},{"style":490},[2535],{"type":50,"value":2296},{"type":45,"tag":473,"props":2537,"children":2538},{"class":475,"line":692},[2539,2544,2548,2553,2557,2562,2566,2570,2575],{"type":45,"tag":473,"props":2540,"children":2541},{"style":522},[2542],{"type":50,"value":2543},"      window",{"type":45,"tag":473,"props":2545,"children":2546},{"style":490},[2547],{"type":50,"value":493},{"type":45,"tag":473,"props":2549,"children":2550},{"style":522},[2551],{"type":50,"value":2552},"__timelines ",{"type":45,"tag":473,"props":2554,"children":2555},{"style":490},[2556],{"type":50,"value":2278},{"type":45,"tag":473,"props":2558,"children":2559},{"style":522},[2560],{"type":50,"value":2561}," window",{"type":45,"tag":473,"props":2563,"children":2564},{"style":490},[2565],{"type":50,"value":493},{"type":45,"tag":473,"props":2567,"children":2568},{"style":522},[2569],{"type":50,"value":2552},{"type":45,"tag":473,"props":2571,"children":2572},{"style":490},[2573],{"type":50,"value":2574},"||",{"type":45,"tag":473,"props":2576,"children":2577},{"style":490},[2578],{"type":50,"value":2579}," {};\n",{"type":45,"tag":473,"props":2581,"children":2582},{"class":475,"line":701},[2583,2588,2593,2597,2602,2606,2611,2615,2620,2625,2629,2635,2640,2644],{"type":45,"tag":473,"props":2584,"children":2585},{"style":2270},[2586],{"type":50,"value":2587},"      const",{"type":45,"tag":473,"props":2589,"children":2590},{"style":522},[2591],{"type":50,"value":2592}," tl ",{"type":45,"tag":473,"props":2594,"children":2595},{"style":490},[2596],{"type":50,"value":2278},{"type":45,"tag":473,"props":2598,"children":2599},{"style":522},[2600],{"type":50,"value":2601}," gsap",{"type":45,"tag":473,"props":2603,"children":2604},{"style":490},[2605],{"type":50,"value":493},{"type":45,"tag":473,"props":2607,"children":2608},{"style":1004},[2609],{"type":50,"value":2610},"timeline",{"type":45,"tag":473,"props":2612,"children":2613},{"style":522},[2614],{"type":50,"value":1012},{"type":45,"tag":473,"props":2616,"children":2617},{"style":490},[2618],{"type":50,"value":2619},"{",{"type":45,"tag":473,"props":2621,"children":2622},{"style":1040},[2623],{"type":50,"value":2624}," paused",{"type":45,"tag":473,"props":2626,"children":2627},{"style":490},[2628],{"type":50,"value":519},{"type":45,"tag":473,"props":2630,"children":2632},{"style":2631},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[2633],{"type":50,"value":2634}," true",{"type":45,"tag":473,"props":2636,"children":2637},{"style":490},[2638],{"type":50,"value":2639}," }",{"type":45,"tag":473,"props":2641,"children":2642},{"style":522},[2643],{"type":50,"value":1129},{"type":45,"tag":473,"props":2645,"children":2646},{"style":490},[2647],{"type":50,"value":530},{"type":45,"tag":473,"props":2649,"children":2650},{"class":475,"line":718},[2651],{"type":45,"tag":473,"props":2652,"children":2653},{"style":480},[2654],{"type":50,"value":2655},"      \u002F\u002F tweens...\n",{"type":45,"tag":473,"props":2657,"children":2658},{"class":475,"line":739},[2659,2663,2667,2672,2676,2680,2684,2689,2693,2698],{"type":45,"tag":473,"props":2660,"children":2661},{"style":522},[2662],{"type":50,"value":2543},{"type":45,"tag":473,"props":2664,"children":2665},{"style":490},[2666],{"type":50,"value":493},{"type":45,"tag":473,"props":2668,"children":2669},{"style":522},[2670],{"type":50,"value":2671},"__timelines[",{"type":45,"tag":473,"props":2673,"children":2674},{"style":490},[2675],{"type":50,"value":1017},{"type":45,"tag":473,"props":2677,"children":2678},{"style":1020},[2679],{"type":50,"value":2327},{"type":45,"tag":473,"props":2681,"children":2682},{"style":490},[2683],{"type":50,"value":1017},{"type":45,"tag":473,"props":2685,"children":2686},{"style":522},[2687],{"type":50,"value":2688},"] ",{"type":45,"tag":473,"props":2690,"children":2691},{"style":490},[2692],{"type":50,"value":2278},{"type":45,"tag":473,"props":2694,"children":2695},{"style":522},[2696],{"type":50,"value":2697}," tl",{"type":45,"tag":473,"props":2699,"children":2700},{"style":490},[2701],{"type":50,"value":530},{"type":45,"tag":473,"props":2703,"children":2704},{"class":475,"line":747},[2705,2709,2713],{"type":45,"tag":473,"props":2706,"children":2707},{"style":490},[2708],{"type":50,"value":2465},{"type":45,"tag":473,"props":2710,"children":2711},{"style":1040},[2712],{"type":50,"value":2485},{"type":45,"tag":473,"props":2714,"children":2715},{"style":490},[2716],{"type":50,"value":2296},{"type":45,"tag":473,"props":2718,"children":2719},{"class":475,"line":764},[2720,2725,2729],{"type":45,"tag":473,"props":2721,"children":2722},{"style":490},[2723],{"type":50,"value":2724},"  \u003C\u002F",{"type":45,"tag":473,"props":2726,"children":2727},{"style":1040},[2728],{"type":50,"value":2309},{"type":45,"tag":473,"props":2730,"children":2731},{"style":490},[2732],{"type":50,"value":2296},{"type":45,"tag":473,"props":2734,"children":2735},{"class":475,"line":785},[2736,2741,2745],{"type":45,"tag":473,"props":2737,"children":2738},{"style":490},[2739],{"type":50,"value":2740},"\u003C\u002F",{"type":45,"tag":473,"props":2742,"children":2743},{"style":1040},[2744],{"type":50,"value":2267},{"type":45,"tag":473,"props":2746,"children":2747},{"style":490},[2748],{"type":50,"value":2296},{"type":45,"tag":53,"props":2750,"children":2751},{},[2752,2754],{"type":50,"value":2753},"Load in root: ",{"type":45,"tag":59,"props":2755,"children":2757},{"className":2756},[],[2758],{"type":50,"value":2759},"\u003Cdiv id=\"el-1\" data-composition-id=\"my-comp\" data-composition-src=\"compositions\u002Fmy-comp.html\" data-start=\"0\" data-duration=\"10\" data-track-index=\"1\">\u003C\u002Fdiv>",{"type":45,"tag":68,"props":2761,"children":2763},{"id":2762},"video-and-audio",[2764],{"type":50,"value":2765},"Video and Audio",{"type":45,"tag":53,"props":2767,"children":2768},{},[2769,2771,2777,2779,2785],{"type":50,"value":2770},"Video must be ",{"type":45,"tag":59,"props":2772,"children":2774},{"className":2773},[],[2775],{"type":50,"value":2776},"muted playsinline",{"type":50,"value":2778},". Audio is always a separate ",{"type":45,"tag":59,"props":2780,"children":2782},{"className":2781},[],[2783],{"type":50,"value":2784},"\u003Caudio>",{"type":50,"value":2786}," element:",{"type":45,"tag":462,"props":2788,"children":2790},{"className":2249,"code":2789,"language":14,"meta":467,"style":467},"\u003Cvideo\n  id=\"el-v\"\n  data-start=\"0\"\n  data-duration=\"30\"\n  data-track-index=\"0\"\n  src=\"video.mp4\"\n  muted\n  playsinline\n>\u003C\u002Fvideo>\n\u003Caudio\n  id=\"el-a\"\n  data-start=\"0\"\n  data-duration=\"30\"\n  data-track-index=\"2\"\n  src=\"video.mp4\"\n  data-volume=\"1\"\n>\u003C\u002Faudio>\n",[2791],{"type":45,"tag":59,"props":2792,"children":2793},{"__ignoreMap":467},[2794,2806,2832,2857,2881,2905,2930,2938,2946,2961,2973,2997,3020,3043,3067,3090,3115],{"type":45,"tag":473,"props":2795,"children":2796},{"class":475,"line":476},[2797,2801],{"type":45,"tag":473,"props":2798,"children":2799},{"style":490},[2800],{"type":50,"value":2262},{"type":45,"tag":473,"props":2802,"children":2803},{"style":1040},[2804],{"type":50,"value":2805},"video\n",{"type":45,"tag":473,"props":2807,"children":2808},{"class":475,"line":486},[2809,2814,2818,2822,2827],{"type":45,"tag":473,"props":2810,"children":2811},{"style":2270},[2812],{"type":50,"value":2813},"  id",{"type":45,"tag":473,"props":2815,"children":2816},{"style":490},[2817],{"type":50,"value":2278},{"type":45,"tag":473,"props":2819,"children":2820},{"style":490},[2821],{"type":50,"value":1017},{"type":45,"tag":473,"props":2823,"children":2824},{"style":1020},[2825],{"type":50,"value":2826},"el-v",{"type":45,"tag":473,"props":2828,"children":2829},{"style":490},[2830],{"type":50,"value":2831},"\"\n",{"type":45,"tag":473,"props":2833,"children":2834},{"class":475,"line":507},[2835,2840,2844,2848,2853],{"type":45,"tag":473,"props":2836,"children":2837},{"style":2270},[2838],{"type":50,"value":2839},"  data-start",{"type":45,"tag":473,"props":2841,"children":2842},{"style":490},[2843],{"type":50,"value":2278},{"type":45,"tag":473,"props":2845,"children":2846},{"style":490},[2847],{"type":50,"value":1017},{"type":45,"tag":473,"props":2849,"children":2850},{"style":1020},[2851],{"type":50,"value":2852},"0",{"type":45,"tag":473,"props":2854,"children":2855},{"style":490},[2856],{"type":50,"value":2831},{"type":45,"tag":473,"props":2858,"children":2859},{"class":475,"line":533},[2860,2865,2869,2873,2877],{"type":45,"tag":473,"props":2861,"children":2862},{"style":2270},[2863],{"type":50,"value":2864},"  data-duration",{"type":45,"tag":473,"props":2866,"children":2867},{"style":490},[2868],{"type":50,"value":2278},{"type":45,"tag":473,"props":2870,"children":2871},{"style":490},[2872],{"type":50,"value":1017},{"type":45,"tag":473,"props":2874,"children":2875},{"style":1020},[2876],{"type":50,"value":1594},{"type":45,"tag":473,"props":2878,"children":2879},{"style":490},[2880],{"type":50,"value":2831},{"type":45,"tag":473,"props":2882,"children":2883},{"class":475,"line":555},[2884,2889,2893,2897,2901],{"type":45,"tag":473,"props":2885,"children":2886},{"style":2270},[2887],{"type":50,"value":2888},"  data-track-index",{"type":45,"tag":473,"props":2890,"children":2891},{"style":490},[2892],{"type":50,"value":2278},{"type":45,"tag":473,"props":2894,"children":2895},{"style":490},[2896],{"type":50,"value":1017},{"type":45,"tag":473,"props":2898,"children":2899},{"style":1020},[2900],{"type":50,"value":2852},{"type":45,"tag":473,"props":2902,"children":2903},{"style":490},[2904],{"type":50,"value":2831},{"type":45,"tag":473,"props":2906,"children":2907},{"class":475,"line":577},[2908,2913,2917,2921,2926],{"type":45,"tag":473,"props":2909,"children":2910},{"style":2270},[2911],{"type":50,"value":2912},"  src",{"type":45,"tag":473,"props":2914,"children":2915},{"style":490},[2916],{"type":50,"value":2278},{"type":45,"tag":473,"props":2918,"children":2919},{"style":490},[2920],{"type":50,"value":1017},{"type":45,"tag":473,"props":2922,"children":2923},{"style":1020},[2924],{"type":50,"value":2925},"video.mp4",{"type":45,"tag":473,"props":2927,"children":2928},{"style":490},[2929],{"type":50,"value":2831},{"type":45,"tag":473,"props":2931,"children":2932},{"class":475,"line":600},[2933],{"type":45,"tag":473,"props":2934,"children":2935},{"style":2270},[2936],{"type":50,"value":2937},"  muted\n",{"type":45,"tag":473,"props":2939,"children":2940},{"class":475,"line":621},[2941],{"type":45,"tag":473,"props":2942,"children":2943},{"style":2270},[2944],{"type":50,"value":2945},"  playsinline\n",{"type":45,"tag":473,"props":2947,"children":2948},{"class":475,"line":648},[2949,2953,2957],{"type":45,"tag":473,"props":2950,"children":2951},{"style":490},[2952],{"type":50,"value":2512},{"type":45,"tag":473,"props":2954,"children":2955},{"style":1040},[2956],{"type":50,"value":24},{"type":45,"tag":473,"props":2958,"children":2959},{"style":490},[2960],{"type":50,"value":2296},{"type":45,"tag":473,"props":2962,"children":2963},{"class":475,"line":670},[2964,2968],{"type":45,"tag":473,"props":2965,"children":2966},{"style":490},[2967],{"type":50,"value":2262},{"type":45,"tag":473,"props":2969,"children":2970},{"style":1040},[2971],{"type":50,"value":2972},"audio\n",{"type":45,"tag":473,"props":2974,"children":2975},{"class":475,"line":692},[2976,2980,2984,2988,2993],{"type":45,"tag":473,"props":2977,"children":2978},{"style":2270},[2979],{"type":50,"value":2813},{"type":45,"tag":473,"props":2981,"children":2982},{"style":490},[2983],{"type":50,"value":2278},{"type":45,"tag":473,"props":2985,"children":2986},{"style":490},[2987],{"type":50,"value":1017},{"type":45,"tag":473,"props":2989,"children":2990},{"style":1020},[2991],{"type":50,"value":2992},"el-a",{"type":45,"tag":473,"props":2994,"children":2995},{"style":490},[2996],{"type":50,"value":2831},{"type":45,"tag":473,"props":2998,"children":2999},{"class":475,"line":701},[3000,3004,3008,3012,3016],{"type":45,"tag":473,"props":3001,"children":3002},{"style":2270},[3003],{"type":50,"value":2839},{"type":45,"tag":473,"props":3005,"children":3006},{"style":490},[3007],{"type":50,"value":2278},{"type":45,"tag":473,"props":3009,"children":3010},{"style":490},[3011],{"type":50,"value":1017},{"type":45,"tag":473,"props":3013,"children":3014},{"style":1020},[3015],{"type":50,"value":2852},{"type":45,"tag":473,"props":3017,"children":3018},{"style":490},[3019],{"type":50,"value":2831},{"type":45,"tag":473,"props":3021,"children":3022},{"class":475,"line":718},[3023,3027,3031,3035,3039],{"type":45,"tag":473,"props":3024,"children":3025},{"style":2270},[3026],{"type":50,"value":2864},{"type":45,"tag":473,"props":3028,"children":3029},{"style":490},[3030],{"type":50,"value":2278},{"type":45,"tag":473,"props":3032,"children":3033},{"style":490},[3034],{"type":50,"value":1017},{"type":45,"tag":473,"props":3036,"children":3037},{"style":1020},[3038],{"type":50,"value":1594},{"type":45,"tag":473,"props":3040,"children":3041},{"style":490},[3042],{"type":50,"value":2831},{"type":45,"tag":473,"props":3044,"children":3045},{"class":475,"line":739},[3046,3050,3054,3058,3063],{"type":45,"tag":473,"props":3047,"children":3048},{"style":2270},[3049],{"type":50,"value":2888},{"type":45,"tag":473,"props":3051,"children":3052},{"style":490},[3053],{"type":50,"value":2278},{"type":45,"tag":473,"props":3055,"children":3056},{"style":490},[3057],{"type":50,"value":1017},{"type":45,"tag":473,"props":3059,"children":3060},{"style":1020},[3061],{"type":50,"value":3062},"2",{"type":45,"tag":473,"props":3064,"children":3065},{"style":490},[3066],{"type":50,"value":2831},{"type":45,"tag":473,"props":3068,"children":3069},{"class":475,"line":747},[3070,3074,3078,3082,3086],{"type":45,"tag":473,"props":3071,"children":3072},{"style":2270},[3073],{"type":50,"value":2912},{"type":45,"tag":473,"props":3075,"children":3076},{"style":490},[3077],{"type":50,"value":2278},{"type":45,"tag":473,"props":3079,"children":3080},{"style":490},[3081],{"type":50,"value":1017},{"type":45,"tag":473,"props":3083,"children":3084},{"style":1020},[3085],{"type":50,"value":2925},{"type":45,"tag":473,"props":3087,"children":3088},{"style":490},[3089],{"type":50,"value":2831},{"type":45,"tag":473,"props":3091,"children":3092},{"class":475,"line":764},[3093,3098,3102,3106,3111],{"type":45,"tag":473,"props":3094,"children":3095},{"style":2270},[3096],{"type":50,"value":3097},"  data-volume",{"type":45,"tag":473,"props":3099,"children":3100},{"style":490},[3101],{"type":50,"value":2278},{"type":45,"tag":473,"props":3103,"children":3104},{"style":490},[3105],{"type":50,"value":1017},{"type":45,"tag":473,"props":3107,"children":3108},{"style":1020},[3109],{"type":50,"value":3110},"1",{"type":45,"tag":473,"props":3112,"children":3113},{"style":490},[3114],{"type":50,"value":2831},{"type":45,"tag":473,"props":3116,"children":3117},{"class":475,"line":785},[3118,3122,3127],{"type":45,"tag":473,"props":3119,"children":3120},{"style":490},[3121],{"type":50,"value":2512},{"type":45,"tag":473,"props":3123,"children":3124},{"style":1040},[3125],{"type":50,"value":3126},"audio",{"type":45,"tag":473,"props":3128,"children":3129},{"style":490},[3130],{"type":50,"value":2296},{"type":45,"tag":68,"props":3132,"children":3134},{"id":3133},"timeline-contract",[3135],{"type":50,"value":3136},"Timeline Contract",{"type":45,"tag":266,"props":3138,"children":3139},{},[3140,3153,3164,3169,3181],{"type":45,"tag":84,"props":3141,"children":3142},{},[3143,3145,3151],{"type":50,"value":3144},"All timelines start ",{"type":45,"tag":59,"props":3146,"children":3148},{"className":3147},[],[3149],{"type":50,"value":3150},"{ paused: true }",{"type":50,"value":3152}," — the player controls playback",{"type":45,"tag":84,"props":3154,"children":3155},{},[3156,3158],{"type":50,"value":3157},"Register every timeline: ",{"type":45,"tag":59,"props":3159,"children":3161},{"className":3160},[],[3162],{"type":50,"value":3163},"window.__timelines[\"\u003Ccomposition-id>\"] = tl",{"type":45,"tag":84,"props":3165,"children":3166},{},[3167],{"type":50,"value":3168},"Framework auto-nests sub-timelines — do NOT manually add them",{"type":45,"tag":84,"props":3170,"children":3171},{},[3172,3174,3179],{"type":50,"value":3173},"Duration comes from ",{"type":45,"tag":59,"props":3175,"children":3177},{"className":3176},[],[3178],{"type":50,"value":1935},{"type":50,"value":3180},", not from GSAP timeline length",{"type":45,"tag":84,"props":3182,"children":3183},{},[3184],{"type":50,"value":3185},"Never create empty tweens to set duration",{"type":45,"tag":68,"props":3187,"children":3189},{"id":3188},"rules-non-negotiable",[3190],{"type":50,"value":3191},"Rules (Non-Negotiable)",{"type":45,"tag":53,"props":3193,"children":3194},{},[3195,3200,3202,3208,3209,3215],{"type":45,"tag":88,"props":3196,"children":3197},{},[3198],{"type":50,"value":3199},"Deterministic:",{"type":50,"value":3201}," No ",{"type":45,"tag":59,"props":3203,"children":3205},{"className":3204},[],[3206],{"type":50,"value":3207},"Math.random()",{"type":50,"value":296},{"type":45,"tag":59,"props":3210,"children":3212},{"className":3211},[],[3213],{"type":50,"value":3214},"Date.now()",{"type":50,"value":3216},", or time-based logic. Use a seeded PRNG if you need pseudo-random values (e.g. mulberry32).",{"type":45,"tag":53,"props":3218,"children":3219},{},[3220,3225,3227,3233,3234,3240,3241,3247,3248,3254,3255,3261,3262,3268,3269,3275,3276,3282,3284,3290,3291,3297,3299,3305,3307,3313],{"type":45,"tag":88,"props":3221,"children":3222},{},[3223],{"type":50,"value":3224},"GSAP:",{"type":50,"value":3226}," Only animate visual properties (",{"type":45,"tag":59,"props":3228,"children":3230},{"className":3229},[],[3231],{"type":50,"value":3232},"opacity",{"type":50,"value":296},{"type":45,"tag":59,"props":3235,"children":3237},{"className":3236},[],[3238],{"type":50,"value":3239},"x",{"type":50,"value":296},{"type":45,"tag":59,"props":3242,"children":3244},{"className":3243},[],[3245],{"type":50,"value":3246},"y",{"type":50,"value":296},{"type":45,"tag":59,"props":3249,"children":3251},{"className":3250},[],[3252],{"type":50,"value":3253},"scale",{"type":50,"value":296},{"type":45,"tag":59,"props":3256,"children":3258},{"className":3257},[],[3259],{"type":50,"value":3260},"rotation",{"type":50,"value":296},{"type":45,"tag":59,"props":3263,"children":3265},{"className":3264},[],[3266],{"type":50,"value":3267},"color",{"type":50,"value":296},{"type":45,"tag":59,"props":3270,"children":3272},{"className":3271},[],[3273],{"type":50,"value":3274},"backgroundColor",{"type":50,"value":296},{"type":45,"tag":59,"props":3277,"children":3279},{"className":3278},[],[3280],{"type":50,"value":3281},"borderRadius",{"type":50,"value":3283},", transforms). Do NOT animate ",{"type":45,"tag":59,"props":3285,"children":3287},{"className":3286},[],[3288],{"type":50,"value":3289},"visibility",{"type":50,"value":296},{"type":45,"tag":59,"props":3292,"children":3294},{"className":3293},[],[3295],{"type":50,"value":3296},"display",{"type":50,"value":3298},", or call ",{"type":45,"tag":59,"props":3300,"children":3302},{"className":3301},[],[3303],{"type":50,"value":3304},"video.play()",{"type":50,"value":3306},"\u002F",{"type":45,"tag":59,"props":3308,"children":3310},{"className":3309},[],[3311],{"type":50,"value":3312},"audio.play()",{"type":50,"value":493},{"type":45,"tag":53,"props":3315,"children":3316},{},[3317,3322],{"type":45,"tag":88,"props":3318,"children":3319},{},[3320],{"type":50,"value":3321},"Animation conflicts:",{"type":50,"value":3323}," Never animate the same property on the same element from multiple timelines simultaneously.",{"type":45,"tag":53,"props":3325,"children":3326},{},[3327,3339,3341,3347],{"type":45,"tag":88,"props":3328,"children":3329},{},[3330,3332,3338],{"type":50,"value":3331},"No ",{"type":45,"tag":59,"props":3333,"children":3335},{"className":3334},[],[3336],{"type":50,"value":3337},"repeat: -1",{"type":50,"value":519},{"type":50,"value":3340}," Infinite-repeat timelines break the capture engine. Calculate the exact repeat count from composition duration: ",{"type":45,"tag":59,"props":3342,"children":3344},{"className":3343},[],[3345],{"type":50,"value":3346},"repeat: Math.ceil(duration \u002F cycleDuration) - 1",{"type":50,"value":493},{"type":45,"tag":53,"props":3349,"children":3350},{},[3351,3356,3358,3364,3365,3371,3372,3378,3380,3386],{"type":45,"tag":88,"props":3352,"children":3353},{},[3354],{"type":50,"value":3355},"Synchronous timeline construction:",{"type":50,"value":3357}," Never build timelines inside ",{"type":45,"tag":59,"props":3359,"children":3361},{"className":3360},[],[3362],{"type":50,"value":3363},"async",{"type":50,"value":3306},{"type":45,"tag":59,"props":3366,"children":3368},{"className":3367},[],[3369],{"type":50,"value":3370},"await",{"type":50,"value":296},{"type":45,"tag":59,"props":3373,"children":3375},{"className":3374},[],[3376],{"type":50,"value":3377},"setTimeout",{"type":50,"value":3379},", or Promises. The capture engine reads ",{"type":45,"tag":59,"props":3381,"children":3383},{"className":3382},[],[3384],{"type":50,"value":3385},"window.__timelines",{"type":50,"value":3387}," synchronously after page load. Fonts are embedded by the compiler, so they're available immediately — no need to wait for font loading.",{"type":45,"tag":53,"props":3389,"children":3390},{},[3391],{"type":45,"tag":88,"props":3392,"children":3393},{},[3394],{"type":50,"value":3395},"Never do:",{"type":45,"tag":80,"props":3397,"children":3398},{},[3399,3411,3421,3426,3459,3464,3469,3479,3490,3514,3541],{"type":45,"tag":84,"props":3400,"children":3401},{},[3402,3404,3409],{"type":50,"value":3403},"Forget ",{"type":45,"tag":59,"props":3405,"children":3407},{"className":3406},[],[3408],{"type":50,"value":3385},{"type":50,"value":3410}," registration",{"type":45,"tag":84,"props":3412,"children":3413},{},[3414,3416],{"type":50,"value":3415},"Use video for audio — always muted video + separate ",{"type":45,"tag":59,"props":3417,"children":3419},{"className":3418},[],[3420],{"type":50,"value":2784},{"type":45,"tag":84,"props":3422,"children":3423},{},[3424],{"type":50,"value":3425},"Nest video inside a timed div — use a non-timed wrapper",{"type":45,"tag":84,"props":3427,"children":3428},{},[3429,3431,3437,3439,3444,3446,3452,3453,3458],{"type":50,"value":3430},"Use ",{"type":45,"tag":59,"props":3432,"children":3434},{"className":3433},[],[3435],{"type":50,"value":3436},"data-layer",{"type":50,"value":3438}," (use ",{"type":45,"tag":59,"props":3440,"children":3442},{"className":3441},[],[3443],{"type":50,"value":1957},{"type":50,"value":3445},") or ",{"type":45,"tag":59,"props":3447,"children":3449},{"className":3448},[],[3450],{"type":50,"value":3451},"data-end",{"type":50,"value":3438},{"type":45,"tag":59,"props":3454,"children":3456},{"className":3455},[],[3457],{"type":50,"value":1935},{"type":50,"value":1129},{"type":45,"tag":84,"props":3460,"children":3461},{},[3462],{"type":50,"value":3463},"Animate video element dimensions — animate a wrapper div",{"type":45,"tag":84,"props":3465,"children":3466},{},[3467],{"type":50,"value":3468},"Call play\u002Fpause\u002Fseek on media — framework owns playback",{"type":45,"tag":84,"props":3470,"children":3471},{},[3472,3474],{"type":50,"value":3473},"Create a top-level container without ",{"type":45,"tag":59,"props":3475,"children":3477},{"className":3476},[],[3478],{"type":50,"value":2075},{"type":45,"tag":84,"props":3480,"children":3481},{},[3482,3483,3488],{"type":50,"value":3430},{"type":45,"tag":59,"props":3484,"children":3486},{"className":3485},[],[3487],{"type":50,"value":3337},{"type":50,"value":3489}," on any timeline or tween — always finite repeats",{"type":45,"tag":84,"props":3491,"children":3492},{},[3493,3495,3500,3501,3506,3507,3513],{"type":50,"value":3494},"Build timelines asynchronously (inside ",{"type":45,"tag":59,"props":3496,"children":3498},{"className":3497},[],[3499],{"type":50,"value":3363},{"type":50,"value":296},{"type":45,"tag":59,"props":3502,"children":3504},{"className":3503},[],[3505],{"type":50,"value":3377},{"type":50,"value":296},{"type":45,"tag":59,"props":3508,"children":3510},{"className":3509},[],[3511],{"type":50,"value":3512},"Promise",{"type":50,"value":1129},{"type":45,"tag":84,"props":3515,"children":3516},{},[3517,3518,3524,3526,3532,3534,3539],{"type":50,"value":3430},{"type":45,"tag":59,"props":3519,"children":3521},{"className":3520},[],[3522],{"type":50,"value":3523},"gsap.set()",{"type":50,"value":3525}," on clip elements from later scenes — they don't exist in the DOM at page load. Use ",{"type":45,"tag":59,"props":3527,"children":3529},{"className":3528},[],[3530],{"type":50,"value":3531},"tl.set(selector, vars, timePosition)",{"type":50,"value":3533}," inside the timeline at or after the clip's ",{"type":45,"tag":59,"props":3535,"children":3537},{"className":3536},[],[3538],{"type":50,"value":1900},{"type":50,"value":3540}," time instead.",{"type":45,"tag":84,"props":3542,"children":3543},{},[3544,3545,3551,3553,3558,3560,3566],{"type":50,"value":3430},{"type":45,"tag":59,"props":3546,"children":3548},{"className":3547},[],[3549],{"type":50,"value":3550},"\u003Cbr>",{"type":50,"value":3552}," in content text — forced line breaks don't account for actual rendered font width. Text that wraps naturally + a ",{"type":45,"tag":59,"props":3554,"children":3556},{"className":3555},[],[3557],{"type":50,"value":3550},{"type":50,"value":3559}," produces an extra unwanted break, causing overlap. Let text wrap via ",{"type":45,"tag":59,"props":3561,"children":3563},{"className":3562},[],[3564],{"type":50,"value":3565},"max-width",{"type":50,"value":3567}," instead. Exception: short display titles where each word is deliberately on its own line (e.g., \"THE\\nIMMORTAL\\nGAME\" at 130px).",{"type":45,"tag":68,"props":3569,"children":3571},{"id":3570},"scene-transitions-non-negotiable",[3572],{"type":50,"value":3573},"Scene Transitions (Non-Negotiable)",{"type":45,"tag":53,"props":3575,"children":3576},{},[3577],{"type":50,"value":3578},"Every multi-scene composition MUST follow ALL of these rules. Violating any one of them is a broken composition.",{"type":45,"tag":80,"props":3580,"children":3581},{},[3582,3592,3609,3626],{"type":45,"tag":84,"props":3583,"children":3584},{},[3585,3590],{"type":45,"tag":88,"props":3586,"children":3587},{},[3588],{"type":50,"value":3589},"ALWAYS use transitions between scenes.",{"type":50,"value":3591}," No jump cuts. No exceptions.",{"type":45,"tag":84,"props":3593,"children":3594},{},[3595,3600,3602,3607],{"type":45,"tag":88,"props":3596,"children":3597},{},[3598],{"type":50,"value":3599},"ALWAYS use entrance animations on every scene.",{"type":50,"value":3601}," Every element animates IN via ",{"type":45,"tag":59,"props":3603,"children":3605},{"className":3604},[],[3606],{"type":50,"value":436},{"type":50,"value":3608},". No element may appear fully-formed. If a scene has 5 elements, it needs 5 entrance tweens.",{"type":45,"tag":84,"props":3610,"children":3611},{},[3612,3617,3619,3624],{"type":45,"tag":88,"props":3613,"children":3614},{},[3615],{"type":50,"value":3616},"NEVER use exit animations",{"type":50,"value":3618}," except on the final scene. This means: NO ",{"type":45,"tag":59,"props":3620,"children":3622},{"className":3621},[],[3623],{"type":50,"value":452},{"type":50,"value":3625}," that animates opacity to 0, y offscreen, scale to 0, or any other \"out\" animation before a transition fires. The transition IS the exit. The outgoing scene's content MUST be fully visible at the moment the transition starts.",{"type":45,"tag":84,"props":3627,"children":3628},{},[3629,3634,3636,3642],{"type":45,"tag":88,"props":3630,"children":3631},{},[3632],{"type":50,"value":3633},"Final scene only:",{"type":50,"value":3635}," The last scene may fade elements out (e.g., fade to black). This is the ONLY scene where ",{"type":45,"tag":59,"props":3637,"children":3639},{"className":3638},[],[3640],{"type":50,"value":3641},"gsap.to(..., { opacity: 0 })",{"type":50,"value":3643}," is allowed.",{"type":45,"tag":53,"props":3645,"children":3646},{},[3647],{"type":45,"tag":88,"props":3648,"children":3649},{},[3650],{"type":50,"value":3651},"WRONG — exit animation before transition:",{"type":45,"tag":462,"props":3653,"children":3655},{"className":975,"code":3654,"language":977,"meta":467,"style":467},"\u002F\u002F BANNED — this empties the scene before the transition can use it\ntl.to(\"#s1-title\", { opacity: 0, y: -40, duration: 0.4 }, 6.5);\ntl.to(\"#s1-subtitle\", { opacity: 0, duration: 0.3 }, 6.7);\n\u002F\u002F transition fires on empty frame\n",[3656],{"type":45,"tag":59,"props":3657,"children":3658},{"__ignoreMap":467},[3659,3667,3772,3857],{"type":45,"tag":473,"props":3660,"children":3661},{"class":475,"line":476},[3662],{"type":45,"tag":473,"props":3663,"children":3664},{"style":480},[3665],{"type":50,"value":3666},"\u002F\u002F BANNED — this empties the scene before the transition can use it\n",{"type":45,"tag":473,"props":3668,"children":3669},{"class":475,"line":486},[3670,3674,3678,3682,3686,3690,3695,3699,3703,3707,3711,3715,3719,3723,3727,3731,3735,3739,3743,3747,3751,3755,3759,3764,3768],{"type":45,"tag":473,"props":3671,"children":3672},{"style":522},[3673],{"type":50,"value":997},{"type":45,"tag":473,"props":3675,"children":3676},{"style":490},[3677],{"type":50,"value":493},{"type":45,"tag":473,"props":3679,"children":3680},{"style":1004},[3681],{"type":50,"value":1422},{"type":45,"tag":473,"props":3683,"children":3684},{"style":522},[3685],{"type":50,"value":1012},{"type":45,"tag":473,"props":3687,"children":3688},{"style":490},[3689],{"type":50,"value":1017},{"type":45,"tag":473,"props":3691,"children":3692},{"style":1020},[3693],{"type":50,"value":3694},"#s1-title",{"type":45,"tag":473,"props":3696,"children":3697},{"style":490},[3698],{"type":50,"value":1017},{"type":45,"tag":473,"props":3700,"children":3701},{"style":490},[3702],{"type":50,"value":1032},{"type":45,"tag":473,"props":3704,"children":3705},{"style":490},[3706],{"type":50,"value":1037},{"type":45,"tag":473,"props":3708,"children":3709},{"style":1040},[3710],{"type":50,"value":1061},{"type":45,"tag":473,"props":3712,"children":3713},{"style":490},[3714],{"type":50,"value":519},{"type":45,"tag":473,"props":3716,"children":3717},{"style":590},[3718],{"type":50,"value":1070},{"type":45,"tag":473,"props":3720,"children":3721},{"style":490},[3722],{"type":50,"value":1032},{"type":45,"tag":473,"props":3724,"children":3725},{"style":1040},[3726],{"type":50,"value":1043},{"type":45,"tag":473,"props":3728,"children":3729},{"style":490},[3730],{"type":50,"value":519},{"type":45,"tag":473,"props":3732,"children":3733},{"style":490},[3734],{"type":50,"value":1459},{"type":45,"tag":473,"props":3736,"children":3737},{"style":590},[3738],{"type":50,"value":1464},{"type":45,"tag":473,"props":3740,"children":3741},{"style":490},[3742],{"type":50,"value":1032},{"type":45,"tag":473,"props":3744,"children":3745},{"style":1040},[3746],{"type":50,"value":1079},{"type":45,"tag":473,"props":3748,"children":3749},{"style":490},[3750],{"type":50,"value":519},{"type":45,"tag":473,"props":3752,"children":3753},{"style":590},[3754],{"type":50,"value":1347},{"type":45,"tag":473,"props":3756,"children":3757},{"style":490},[3758],{"type":50,"value":1120},{"type":45,"tag":473,"props":3760,"children":3761},{"style":590},[3762],{"type":50,"value":3763}," 6.5",{"type":45,"tag":473,"props":3765,"children":3766},{"style":522},[3767],{"type":50,"value":1129},{"type":45,"tag":473,"props":3769,"children":3770},{"style":490},[3771],{"type":50,"value":530},{"type":45,"tag":473,"props":3773,"children":3774},{"class":475,"line":507},[3775,3779,3783,3787,3791,3795,3800,3804,3808,3812,3816,3820,3824,3828,3832,3836,3840,3844,3849,3853],{"type":45,"tag":473,"props":3776,"children":3777},{"style":522},[3778],{"type":50,"value":997},{"type":45,"tag":473,"props":3780,"children":3781},{"style":490},[3782],{"type":50,"value":493},{"type":45,"tag":473,"props":3784,"children":3785},{"style":1004},[3786],{"type":50,"value":1422},{"type":45,"tag":473,"props":3788,"children":3789},{"style":522},[3790],{"type":50,"value":1012},{"type":45,"tag":473,"props":3792,"children":3793},{"style":490},[3794],{"type":50,"value":1017},{"type":45,"tag":473,"props":3796,"children":3797},{"style":1020},[3798],{"type":50,"value":3799},"#s1-subtitle",{"type":45,"tag":473,"props":3801,"children":3802},{"style":490},[3803],{"type":50,"value":1017},{"type":45,"tag":473,"props":3805,"children":3806},{"style":490},[3807],{"type":50,"value":1032},{"type":45,"tag":473,"props":3809,"children":3810},{"style":490},[3811],{"type":50,"value":1037},{"type":45,"tag":473,"props":3813,"children":3814},{"style":1040},[3815],{"type":50,"value":1061},{"type":45,"tag":473,"props":3817,"children":3818},{"style":490},[3819],{"type":50,"value":519},{"type":45,"tag":473,"props":3821,"children":3822},{"style":590},[3823],{"type":50,"value":1070},{"type":45,"tag":473,"props":3825,"children":3826},{"style":490},[3827],{"type":50,"value":1032},{"type":45,"tag":473,"props":3829,"children":3830},{"style":1040},[3831],{"type":50,"value":1079},{"type":45,"tag":473,"props":3833,"children":3834},{"style":490},[3835],{"type":50,"value":519},{"type":45,"tag":473,"props":3837,"children":3838},{"style":590},[3839],{"type":50,"value":1381},{"type":45,"tag":473,"props":3841,"children":3842},{"style":490},[3843],{"type":50,"value":1120},{"type":45,"tag":473,"props":3845,"children":3846},{"style":590},[3847],{"type":50,"value":3848}," 6.7",{"type":45,"tag":473,"props":3850,"children":3851},{"style":522},[3852],{"type":50,"value":1129},{"type":45,"tag":473,"props":3854,"children":3855},{"style":490},[3856],{"type":50,"value":530},{"type":45,"tag":473,"props":3858,"children":3859},{"class":475,"line":533},[3860],{"type":45,"tag":473,"props":3861,"children":3862},{"style":480},[3863],{"type":50,"value":3864},"\u002F\u002F transition fires on empty frame\n",{"type":45,"tag":53,"props":3866,"children":3867},{},[3868],{"type":45,"tag":88,"props":3869,"children":3870},{},[3871],{"type":50,"value":3872},"RIGHT — entrance only, transition handles exit:",{"type":45,"tag":462,"props":3874,"children":3876},{"className":975,"code":3875,"language":977,"meta":467,"style":467},"\u002F\u002F Scene 1 entrance animations\ntl.from(\"#s1-title\", { y: 50, opacity: 0, duration: 0.7, ease: \"power3.out\" }, 0.3);\ntl.from(\"#s1-subtitle\", { y: 30, opacity: 0, duration: 0.5, ease: \"power2.out\" }, 0.6);\n\u002F\u002F NO exit tweens — transition at 7.2s handles the scene change\n\u002F\u002F Scene 2 entrance animations\ntl.from(\"#s2-heading\", { x: -40, opacity: 0, duration: 0.6, ease: \"expo.out\" }, 8.0);\n",[3877],{"type":45,"tag":59,"props":3878,"children":3879},{"__ignoreMap":467},[3880,3888,4013,4137,4145,4153],{"type":45,"tag":473,"props":3881,"children":3882},{"class":475,"line":476},[3883],{"type":45,"tag":473,"props":3884,"children":3885},{"style":480},[3886],{"type":50,"value":3887},"\u002F\u002F Scene 1 entrance animations\n",{"type":45,"tag":473,"props":3889,"children":3890},{"class":475,"line":486},[3891,3895,3899,3903,3907,3911,3915,3919,3923,3927,3931,3935,3940,3944,3948,3952,3956,3960,3964,3968,3973,3977,3981,3985,3989,3993,3997,4001,4005,4009],{"type":45,"tag":473,"props":3892,"children":3893},{"style":522},[3894],{"type":50,"value":997},{"type":45,"tag":473,"props":3896,"children":3897},{"style":490},[3898],{"type":50,"value":493},{"type":45,"tag":473,"props":3900,"children":3901},{"style":1004},[3902],{"type":50,"value":1007},{"type":45,"tag":473,"props":3904,"children":3905},{"style":522},[3906],{"type":50,"value":1012},{"type":45,"tag":473,"props":3908,"children":3909},{"style":490},[3910],{"type":50,"value":1017},{"type":45,"tag":473,"props":3912,"children":3913},{"style":1020},[3914],{"type":50,"value":3694},{"type":45,"tag":473,"props":3916,"children":3917},{"style":490},[3918],{"type":50,"value":1017},{"type":45,"tag":473,"props":3920,"children":3921},{"style":490},[3922],{"type":50,"value":1032},{"type":45,"tag":473,"props":3924,"children":3925},{"style":490},[3926],{"type":50,"value":1037},{"type":45,"tag":473,"props":3928,"children":3929},{"style":1040},[3930],{"type":50,"value":1043},{"type":45,"tag":473,"props":3932,"children":3933},{"style":490},[3934],{"type":50,"value":519},{"type":45,"tag":473,"props":3936,"children":3937},{"style":590},[3938],{"type":50,"value":3939}," 50",{"type":45,"tag":473,"props":3941,"children":3942},{"style":490},[3943],{"type":50,"value":1032},{"type":45,"tag":473,"props":3945,"children":3946},{"style":1040},[3947],{"type":50,"value":1061},{"type":45,"tag":473,"props":3949,"children":3950},{"style":490},[3951],{"type":50,"value":519},{"type":45,"tag":473,"props":3953,"children":3954},{"style":590},[3955],{"type":50,"value":1070},{"type":45,"tag":473,"props":3957,"children":3958},{"style":490},[3959],{"type":50,"value":1032},{"type":45,"tag":473,"props":3961,"children":3962},{"style":1040},[3963],{"type":50,"value":1079},{"type":45,"tag":473,"props":3965,"children":3966},{"style":490},[3967],{"type":50,"value":519},{"type":45,"tag":473,"props":3969,"children":3970},{"style":590},[3971],{"type":50,"value":3972}," 0.7",{"type":45,"tag":473,"props":3974,"children":3975},{"style":490},[3976],{"type":50,"value":1032},{"type":45,"tag":473,"props":3978,"children":3979},{"style":1040},[3980],{"type":50,"value":1097},{"type":45,"tag":473,"props":3982,"children":3983},{"style":490},[3984],{"type":50,"value":519},{"type":45,"tag":473,"props":3986,"children":3987},{"style":490},[3988],{"type":50,"value":1106},{"type":45,"tag":473,"props":3990,"children":3991},{"style":1020},[3992],{"type":50,"value":1111},{"type":45,"tag":473,"props":3994,"children":3995},{"style":490},[3996],{"type":50,"value":1017},{"type":45,"tag":473,"props":3998,"children":3999},{"style":490},[4000],{"type":50,"value":1120},{"type":45,"tag":473,"props":4002,"children":4003},{"style":590},[4004],{"type":50,"value":1381},{"type":45,"tag":473,"props":4006,"children":4007},{"style":522},[4008],{"type":50,"value":1129},{"type":45,"tag":473,"props":4010,"children":4011},{"style":490},[4012],{"type":50,"value":530},{"type":45,"tag":473,"props":4014,"children":4015},{"class":475,"line":507},[4016,4020,4024,4028,4032,4036,4040,4044,4048,4052,4056,4060,4065,4069,4073,4077,4081,4085,4089,4093,4097,4101,4105,4109,4113,4117,4121,4125,4129,4133],{"type":45,"tag":473,"props":4017,"children":4018},{"style":522},[4019],{"type":50,"value":997},{"type":45,"tag":473,"props":4021,"children":4022},{"style":490},[4023],{"type":50,"value":493},{"type":45,"tag":473,"props":4025,"children":4026},{"style":1004},[4027],{"type":50,"value":1007},{"type":45,"tag":473,"props":4029,"children":4030},{"style":522},[4031],{"type":50,"value":1012},{"type":45,"tag":473,"props":4033,"children":4034},{"style":490},[4035],{"type":50,"value":1017},{"type":45,"tag":473,"props":4037,"children":4038},{"style":1020},[4039],{"type":50,"value":3799},{"type":45,"tag":473,"props":4041,"children":4042},{"style":490},[4043],{"type":50,"value":1017},{"type":45,"tag":473,"props":4045,"children":4046},{"style":490},[4047],{"type":50,"value":1032},{"type":45,"tag":473,"props":4049,"children":4050},{"style":490},[4051],{"type":50,"value":1037},{"type":45,"tag":473,"props":4053,"children":4054},{"style":1040},[4055],{"type":50,"value":1043},{"type":45,"tag":473,"props":4057,"children":4058},{"style":490},[4059],{"type":50,"value":519},{"type":45,"tag":473,"props":4061,"children":4062},{"style":590},[4063],{"type":50,"value":4064}," 30",{"type":45,"tag":473,"props":4066,"children":4067},{"style":490},[4068],{"type":50,"value":1032},{"type":45,"tag":473,"props":4070,"children":4071},{"style":1040},[4072],{"type":50,"value":1061},{"type":45,"tag":473,"props":4074,"children":4075},{"style":490},[4076],{"type":50,"value":519},{"type":45,"tag":473,"props":4078,"children":4079},{"style":590},[4080],{"type":50,"value":1070},{"type":45,"tag":473,"props":4082,"children":4083},{"style":490},[4084],{"type":50,"value":1032},{"type":45,"tag":473,"props":4086,"children":4087},{"style":1040},[4088],{"type":50,"value":1079},{"type":45,"tag":473,"props":4090,"children":4091},{"style":490},[4092],{"type":50,"value":519},{"type":45,"tag":473,"props":4094,"children":4095},{"style":590},[4096],{"type":50,"value":1219},{"type":45,"tag":473,"props":4098,"children":4099},{"style":490},[4100],{"type":50,"value":1032},{"type":45,"tag":473,"props":4102,"children":4103},{"style":1040},[4104],{"type":50,"value":1097},{"type":45,"tag":473,"props":4106,"children":4107},{"style":490},[4108],{"type":50,"value":519},{"type":45,"tag":473,"props":4110,"children":4111},{"style":490},[4112],{"type":50,"value":1106},{"type":45,"tag":473,"props":4114,"children":4115},{"style":1020},[4116],{"type":50,"value":1368},{"type":45,"tag":473,"props":4118,"children":4119},{"style":490},[4120],{"type":50,"value":1017},{"type":45,"tag":473,"props":4122,"children":4123},{"style":490},[4124],{"type":50,"value":1120},{"type":45,"tag":473,"props":4126,"children":4127},{"style":590},[4128],{"type":50,"value":1088},{"type":45,"tag":473,"props":4130,"children":4131},{"style":522},[4132],{"type":50,"value":1129},{"type":45,"tag":473,"props":4134,"children":4135},{"style":490},[4136],{"type":50,"value":530},{"type":45,"tag":473,"props":4138,"children":4139},{"class":475,"line":533},[4140],{"type":45,"tag":473,"props":4141,"children":4142},{"style":480},[4143],{"type":50,"value":4144},"\u002F\u002F NO exit tweens — transition at 7.2s handles the scene change\n",{"type":45,"tag":473,"props":4146,"children":4147},{"class":475,"line":555},[4148],{"type":45,"tag":473,"props":4149,"children":4150},{"style":480},[4151],{"type":50,"value":4152},"\u002F\u002F Scene 2 entrance animations\n",{"type":45,"tag":473,"props":4154,"children":4155},{"class":475,"line":577},[4156,4160,4164,4168,4172,4176,4181,4185,4189,4193,4198,4202,4206,4210,4214,4218,4222,4226,4230,4234,4238,4242,4246,4250,4254,4258,4263,4267,4271,4276,4280],{"type":45,"tag":473,"props":4157,"children":4158},{"style":522},[4159],{"type":50,"value":997},{"type":45,"tag":473,"props":4161,"children":4162},{"style":490},[4163],{"type":50,"value":493},{"type":45,"tag":473,"props":4165,"children":4166},{"style":1004},[4167],{"type":50,"value":1007},{"type":45,"tag":473,"props":4169,"children":4170},{"style":522},[4171],{"type":50,"value":1012},{"type":45,"tag":473,"props":4173,"children":4174},{"style":490},[4175],{"type":50,"value":1017},{"type":45,"tag":473,"props":4177,"children":4178},{"style":1020},[4179],{"type":50,"value":4180},"#s2-heading",{"type":45,"tag":473,"props":4182,"children":4183},{"style":490},[4184],{"type":50,"value":1017},{"type":45,"tag":473,"props":4186,"children":4187},{"style":490},[4188],{"type":50,"value":1032},{"type":45,"tag":473,"props":4190,"children":4191},{"style":490},[4192],{"type":50,"value":1037},{"type":45,"tag":473,"props":4194,"children":4195},{"style":1040},[4196],{"type":50,"value":4197}," x",{"type":45,"tag":473,"props":4199,"children":4200},{"style":490},[4201],{"type":50,"value":519},{"type":45,"tag":473,"props":4203,"children":4204},{"style":490},[4205],{"type":50,"value":1459},{"type":45,"tag":473,"props":4207,"children":4208},{"style":590},[4209],{"type":50,"value":1464},{"type":45,"tag":473,"props":4211,"children":4212},{"style":490},[4213],{"type":50,"value":1032},{"type":45,"tag":473,"props":4215,"children":4216},{"style":1040},[4217],{"type":50,"value":1061},{"type":45,"tag":473,"props":4219,"children":4220},{"style":490},[4221],{"type":50,"value":519},{"type":45,"tag":473,"props":4223,"children":4224},{"style":590},[4225],{"type":50,"value":1070},{"type":45,"tag":473,"props":4227,"children":4228},{"style":490},[4229],{"type":50,"value":1032},{"type":45,"tag":473,"props":4231,"children":4232},{"style":1040},[4233],{"type":50,"value":1079},{"type":45,"tag":473,"props":4235,"children":4236},{"style":490},[4237],{"type":50,"value":519},{"type":45,"tag":473,"props":4239,"children":4240},{"style":590},[4241],{"type":50,"value":1088},{"type":45,"tag":473,"props":4243,"children":4244},{"style":490},[4245],{"type":50,"value":1032},{"type":45,"tag":473,"props":4247,"children":4248},{"style":1040},[4249],{"type":50,"value":1097},{"type":45,"tag":473,"props":4251,"children":4252},{"style":490},[4253],{"type":50,"value":519},{"type":45,"tag":473,"props":4255,"children":4256},{"style":490},[4257],{"type":50,"value":1106},{"type":45,"tag":473,"props":4259,"children":4260},{"style":1020},[4261],{"type":50,"value":4262},"expo.out",{"type":45,"tag":473,"props":4264,"children":4265},{"style":490},[4266],{"type":50,"value":1017},{"type":45,"tag":473,"props":4268,"children":4269},{"style":490},[4270],{"type":50,"value":1120},{"type":45,"tag":473,"props":4272,"children":4273},{"style":590},[4274],{"type":50,"value":4275}," 8.0",{"type":45,"tag":473,"props":4277,"children":4278},{"style":522},[4279],{"type":50,"value":1129},{"type":45,"tag":473,"props":4281,"children":4282},{"style":490},[4283],{"type":50,"value":530},{"type":45,"tag":68,"props":4285,"children":4287},{"id":4286},"animation-guardrails",[4288],{"type":50,"value":4289},"Animation Guardrails",{"type":45,"tag":266,"props":4291,"children":4292},{},[4293,4298,4303,4308,4313,4318],{"type":45,"tag":84,"props":4294,"children":4295},{},[4296],{"type":50,"value":4297},"Offset first animation 0.1-0.3s (not t=0)",{"type":45,"tag":84,"props":4299,"children":4300},{},[4301],{"type":50,"value":4302},"Vary eases across entrance tweens — use at least 3 different eases per scene",{"type":45,"tag":84,"props":4304,"children":4305},{},[4306],{"type":50,"value":4307},"Don't repeat an entrance pattern within a scene",{"type":45,"tag":84,"props":4309,"children":4310},{},[4311],{"type":50,"value":4312},"Avoid full-screen linear gradients on dark backgrounds (H.264 banding — use radial or solid + localized glow)",{"type":45,"tag":84,"props":4314,"children":4315},{},[4316],{"type":50,"value":4317},"60px+ headlines, 20px+ body, 16px+ data labels for rendered video",{"type":45,"tag":84,"props":4319,"children":4320},{},[4321,4327],{"type":45,"tag":59,"props":4322,"children":4324},{"className":4323},[],[4325],{"type":50,"value":4326},"font-variant-numeric: tabular-nums",{"type":50,"value":4328}," on number columns",{"type":45,"tag":53,"props":4330,"children":4331},{},[4332,4334,4339,4341,4345],{"type":50,"value":4333},"When no ",{"type":45,"tag":59,"props":4335,"children":4337},{"className":4336},[],[4338],{"type":50,"value":194},{"type":50,"value":4340}," or animation direction is provided, follow ",{"type":45,"tag":216,"props":4342,"children":4343},{"href":320},[4344],{"type":50,"value":323},{"type":50,"value":4346}," for aesthetic defaults.",{"type":45,"tag":68,"props":4348,"children":4350},{"id":4349},"typography-and-assets",[4351],{"type":50,"value":4352},"Typography and Assets",{"type":45,"tag":266,"props":4354,"children":4355},{},[4356,4374,4387,4398],{"type":45,"tag":84,"props":4357,"children":4358},{},[4359,4364,4366,4372],{"type":45,"tag":88,"props":4360,"children":4361},{},[4362],{"type":50,"value":4363},"Fonts:",{"type":50,"value":4365}," Just write the ",{"type":45,"tag":59,"props":4367,"children":4369},{"className":4368},[],[4370],{"type":50,"value":4371},"font-family",{"type":50,"value":4373}," you want in CSS — the compiler embeds supported fonts automatically. If a font isn't supported, the compiler warns.",{"type":45,"tag":84,"props":4375,"children":4376},{},[4377,4379,4385],{"type":50,"value":4378},"Add ",{"type":45,"tag":59,"props":4380,"children":4382},{"className":4381},[],[4383],{"type":50,"value":4384},"crossorigin=\"anonymous\"",{"type":50,"value":4386}," to external media",{"type":45,"tag":84,"props":4388,"children":4389},{},[4390,4392],{"type":50,"value":4391},"For dynamic text overflow, use ",{"type":45,"tag":59,"props":4393,"children":4395},{"className":4394},[],[4396],{"type":50,"value":4397},"window.__hyperframes.fitTextFontSize(text, { maxWidth, fontFamily, fontWeight })",{"type":45,"tag":84,"props":4399,"children":4400},{},[4401,4403,4409,4411],{"type":50,"value":4402},"All files live at the project root alongside ",{"type":45,"tag":59,"props":4404,"children":4406},{"className":4405},[],[4407],{"type":50,"value":4408},"index.html",{"type":50,"value":4410},"; sub-compositions use ",{"type":45,"tag":59,"props":4412,"children":4414},{"className":4413},[],[4415],{"type":50,"value":4416},"..\u002F",{"type":45,"tag":68,"props":4418,"children":4420},{"id":4419},"editing-existing-compositions",[4421],{"type":50,"value":4422},"Editing Existing Compositions",{"type":45,"tag":266,"props":4424,"children":4425},{},[4426,4431,4436],{"type":45,"tag":84,"props":4427,"children":4428},{},[4429],{"type":50,"value":4430},"Read the full composition first — match existing fonts, colors, animation patterns",{"type":45,"tag":84,"props":4432,"children":4433},{},[4434],{"type":50,"value":4435},"Only change what was requested",{"type":45,"tag":84,"props":4437,"children":4438},{},[4439],{"type":50,"value":4440},"Preserve timing of unrelated clips",{"type":45,"tag":68,"props":4442,"children":4444},{"id":4443},"output-checklist",[4445],{"type":50,"value":4446},"Output Checklist",{"type":45,"tag":266,"props":4448,"children":4451},{"className":4449},[4450],"contains-task-list",[4452,4480,4496,4505,4514],{"type":45,"tag":84,"props":4453,"children":4456},{"className":4454},[4455],"task-list-item",[4457,4462,4464,4470,4472,4478],{"type":45,"tag":4458,"props":4459,"children":4461},"input",{"disabled":1395,"type":4460},"checkbox",[],{"type":50,"value":4463}," ",{"type":45,"tag":59,"props":4465,"children":4467},{"className":4466},[],[4468],{"type":50,"value":4469},"npx hyperframes lint",{"type":50,"value":4471}," and ",{"type":45,"tag":59,"props":4473,"children":4475},{"className":4474},[],[4476],{"type":50,"value":4477},"npx hyperframes validate",{"type":50,"value":4479}," both pass",{"type":45,"tag":84,"props":4481,"children":4483},{"className":4482},[4455],[4484,4487,4488,4494],{"type":45,"tag":4458,"props":4485,"children":4486},{"disabled":1395,"type":4460},[],{"type":50,"value":4463},{"type":45,"tag":59,"props":4489,"children":4491},{"className":4490},[],[4492],{"type":50,"value":4493},"npx hyperframes inspect",{"type":50,"value":4495}," passes, or every reported overflow is intentionally marked",{"type":45,"tag":84,"props":4497,"children":4499},{"className":4498},[4455],[4500,4503],{"type":45,"tag":4458,"props":4501,"children":4502},{"disabled":1395,"type":4460},[],{"type":50,"value":4504}," Contrast warnings addressed (see Quality Checks below)",{"type":45,"tag":84,"props":4506,"children":4508},{"className":4507},[4455],[4509,4512],{"type":45,"tag":4458,"props":4510,"children":4511},{"disabled":1395,"type":4460},[],{"type":50,"value":4513}," Layout issues addressed (see Quality Checks below)",{"type":45,"tag":84,"props":4515,"children":4517},{"className":4516},[4455],[4518,4521],{"type":45,"tag":4458,"props":4519,"children":4520},{"disabled":1395,"type":4460},[],{"type":50,"value":4522}," Animation choreography verified (see Quality Checks below)",{"type":45,"tag":68,"props":4524,"children":4526},{"id":4525},"quality-checks",[4527],{"type":50,"value":4528},"Quality Checks",{"type":45,"tag":141,"props":4530,"children":4532},{"id":4531},"visual-inspect",[4533],{"type":50,"value":4534},"Visual Inspect",{"type":45,"tag":53,"props":4536,"children":4537},{},[4538,4544,4546,4552,4553,4559],{"type":45,"tag":59,"props":4539,"children":4541},{"className":4540},[],[4542],{"type":50,"value":4543},"hyperframes inspect",{"type":50,"value":4545}," runs the composition in headless Chrome, seeks through the timeline, and maps visual layout issues with timestamps, selectors, bounding boxes, and fix hints. Run it after ",{"type":45,"tag":59,"props":4547,"children":4549},{"className":4548},[],[4550],{"type":50,"value":4551},"lint",{"type":50,"value":4471},{"type":45,"tag":59,"props":4554,"children":4556},{"className":4555},[],[4557],{"type":50,"value":4558},"validate",{"type":50,"value":519},{"type":45,"tag":462,"props":4561,"children":4565},{"className":4562,"code":4563,"language":4564,"meta":467,"style":467},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx hyperframes inspect\nnpx hyperframes inspect --json\n","bash",[4566],{"type":45,"tag":59,"props":4567,"children":4568},{"__ignoreMap":467},[4569,4587],{"type":45,"tag":473,"props":4570,"children":4571},{"class":475,"line":476},[4572,4577,4582],{"type":45,"tag":473,"props":4573,"children":4574},{"style":496},[4575],{"type":50,"value":4576},"npx",{"type":45,"tag":473,"props":4578,"children":4579},{"style":1020},[4580],{"type":50,"value":4581}," hyperframes",{"type":45,"tag":473,"props":4583,"children":4584},{"style":1020},[4585],{"type":50,"value":4586}," inspect\n",{"type":45,"tag":473,"props":4588,"children":4589},{"class":475,"line":486},[4590,4594,4598,4603],{"type":45,"tag":473,"props":4591,"children":4592},{"style":496},[4593],{"type":50,"value":4576},{"type":45,"tag":473,"props":4595,"children":4596},{"style":1020},[4597],{"type":50,"value":4581},{"type":45,"tag":473,"props":4599,"children":4600},{"style":1020},[4601],{"type":50,"value":4602}," inspect",{"type":45,"tag":473,"props":4604,"children":4605},{"style":1020},[4606],{"type":50,"value":4607}," --json\n",{"type":45,"tag":53,"props":4609,"children":4610},{},[4611,4613,4618,4620,4626],{"type":50,"value":4612},"Failures usually mean text is spilling out of a bubble\u002Fcard, a fixed-size label is clipping dynamic copy, or text has moved off the canvas. Fix by increasing container size or padding, reducing font size or letter spacing, adding a real ",{"type":45,"tag":59,"props":4614,"children":4616},{"className":4615},[],[4617],{"type":50,"value":3565},{"type":50,"value":4619}," so text wraps inside the container, or using ",{"type":45,"tag":59,"props":4621,"children":4623},{"className":4622},[],[4624],{"type":50,"value":4625},"window.__hyperframes.fitTextFontSize(...)",{"type":50,"value":4627}," for dynamic copy.",{"type":45,"tag":53,"props":4629,"children":4630},{},[4631,4632,4638,4640,4646,4648,4654,4656,4662],{"type":50,"value":3430},{"type":45,"tag":59,"props":4633,"children":4635},{"className":4634},[],[4636],{"type":50,"value":4637},"--samples 15",{"type":50,"value":4639}," for dense videos and ",{"type":45,"tag":59,"props":4641,"children":4643},{"className":4642},[],[4644],{"type":50,"value":4645},"--at 1.5,4,7.25",{"type":50,"value":4647}," for specific hero frames. Repeated static issues are collapsed by default to avoid flooding agent context. If overflow is intentional for an entrance\u002Fexit animation, mark the element or ancestor with ",{"type":45,"tag":59,"props":4649,"children":4651},{"className":4650},[],[4652],{"type":50,"value":4653},"data-layout-allow-overflow",{"type":50,"value":4655},". If a decorative element should never be audited, mark it with ",{"type":45,"tag":59,"props":4657,"children":4659},{"className":4658},[],[4660],{"type":50,"value":4661},"data-layout-ignore",{"type":50,"value":493},{"type":45,"tag":53,"props":4664,"children":4665},{},[4666,4672],{"type":45,"tag":59,"props":4667,"children":4669},{"className":4668},[],[4670],{"type":50,"value":4671},"hyperframes layout",{"type":50,"value":4673}," is the compatibility alias for the same check.",{"type":45,"tag":141,"props":4675,"children":4677},{"id":4676},"contrast",[4678],{"type":50,"value":4679},"Contrast",{"type":45,"tag":53,"props":4681,"children":4682},{},[4683,4689],{"type":45,"tag":59,"props":4684,"children":4686},{"className":4685},[],[4687],{"type":50,"value":4688},"hyperframes validate",{"type":50,"value":4690}," runs a WCAG contrast audit by default. It seeks to 5 timestamps, screenshots the page, samples background pixels behind every text element, and computes contrast ratios. Failures appear as warnings:",{"type":45,"tag":462,"props":4692,"children":4696},{"className":4693,"code":4695,"language":50},[4694],"language-text","⚠ WCAG AA contrast warnings (3):\n  · .subtitle \"secondary text\" — 2.67:1 (need 4.5:1, t=5.3s)\n",[4697],{"type":45,"tag":59,"props":4698,"children":4699},{"__ignoreMap":467},[4700],{"type":50,"value":4695},{"type":45,"tag":53,"props":4702,"children":4703},{},[4704],{"type":50,"value":4705},"If warnings appear:",{"type":45,"tag":266,"props":4707,"children":4708},{},[4709,4714,4719,4724],{"type":45,"tag":84,"props":4710,"children":4711},{},[4712],{"type":50,"value":4713},"On dark backgrounds: brighten the failing color until it clears 4.5:1 (normal text) or 3:1 (large text, 24px+ or 19px+ bold)",{"type":45,"tag":84,"props":4715,"children":4716},{},[4717],{"type":50,"value":4718},"On light backgrounds: darken it",{"type":45,"tag":84,"props":4720,"children":4721},{},[4722],{"type":50,"value":4723},"Stay within the palette family — don't invent a new color, adjust the existing one",{"type":45,"tag":84,"props":4725,"children":4726},{},[4727,4729,4734],{"type":50,"value":4728},"Re-run ",{"type":45,"tag":59,"props":4730,"children":4732},{"className":4731},[],[4733],{"type":50,"value":4688},{"type":50,"value":4735}," until clean",{"type":45,"tag":53,"props":4737,"children":4738},{},[4739,4740,4746],{"type":50,"value":3430},{"type":45,"tag":59,"props":4741,"children":4743},{"className":4742},[],[4744],{"type":50,"value":4745},"--no-contrast",{"type":50,"value":4747}," to skip if iterating rapidly and you'll check later.",{"type":45,"tag":141,"props":4749,"children":4751},{"id":4750},"animation-map",[4752],{"type":50,"value":4753},"Animation Map",{"type":45,"tag":53,"props":4755,"children":4756},{},[4757],{"type":50,"value":4758},"After authoring animations, run the animation map to verify choreography:",{"type":45,"tag":462,"props":4760,"children":4762},{"className":4562,"code":4761,"language":4564,"meta":467,"style":467},"node skills\u002Fhyperframes\u002Fscripts\u002Fanimation-map.mjs \u003Ccomposition-dir> \\\n  --out \u003Ccomposition-dir>\u002F.hyperframes\u002Fanim-map\n",[4763],{"type":45,"tag":59,"props":4764,"children":4765},{"__ignoreMap":467},[4766,4804],{"type":45,"tag":473,"props":4767,"children":4768},{"class":475,"line":476},[4769,4774,4779,4784,4789,4794,4799],{"type":45,"tag":473,"props":4770,"children":4771},{"style":496},[4772],{"type":50,"value":4773},"node",{"type":45,"tag":473,"props":4775,"children":4776},{"style":1020},[4777],{"type":50,"value":4778}," skills\u002Fhyperframes\u002Fscripts\u002Fanimation-map.mjs",{"type":45,"tag":473,"props":4780,"children":4781},{"style":490},[4782],{"type":50,"value":4783}," \u003C",{"type":45,"tag":473,"props":4785,"children":4786},{"style":1020},[4787],{"type":50,"value":4788},"composition-di",{"type":45,"tag":473,"props":4790,"children":4791},{"style":522},[4792],{"type":50,"value":4793},"r",{"type":45,"tag":473,"props":4795,"children":4796},{"style":490},[4797],{"type":50,"value":4798},">",{"type":45,"tag":473,"props":4800,"children":4801},{"style":522},[4802],{"type":50,"value":4803}," \\\n",{"type":45,"tag":473,"props":4805,"children":4806},{"class":475,"line":486},[4807,4812,4816,4820,4824,4828],{"type":45,"tag":473,"props":4808,"children":4809},{"style":1020},[4810],{"type":50,"value":4811},"  --out",{"type":45,"tag":473,"props":4813,"children":4814},{"style":490},[4815],{"type":50,"value":4783},{"type":45,"tag":473,"props":4817,"children":4818},{"style":1020},[4819],{"type":50,"value":4788},{"type":45,"tag":473,"props":4821,"children":4822},{"style":522},[4823],{"type":50,"value":4793},{"type":45,"tag":473,"props":4825,"children":4826},{"style":490},[4827],{"type":50,"value":4798},{"type":45,"tag":473,"props":4829,"children":4830},{"style":1020},[4831],{"type":50,"value":4832},"\u002F.hyperframes\u002Fanim-map\n",{"type":45,"tag":53,"props":4834,"children":4835},{},[4836,4838,4844],{"type":50,"value":4837},"Outputs a single ",{"type":45,"tag":59,"props":4839,"children":4841},{"className":4840},[],[4842],{"type":50,"value":4843},"animation-map.json",{"type":50,"value":4845}," with:",{"type":45,"tag":266,"props":4847,"children":4848},{},[4849,4865,4875,4892,4902,4912,4922],{"type":45,"tag":84,"props":4850,"children":4851},{},[4852,4857,4859],{"type":45,"tag":88,"props":4853,"children":4854},{},[4855],{"type":50,"value":4856},"Per-tween summaries",{"type":50,"value":4858},": ",{"type":45,"tag":59,"props":4860,"children":4862},{"className":4861},[],[4863],{"type":50,"value":4864},"\"#card1 animates opacity+y over 0.50s. moves 23px up. fades in. ends at (120, 200)\"",{"type":45,"tag":84,"props":4866,"children":4867},{},[4868,4873],{"type":45,"tag":88,"props":4869,"children":4870},{},[4871],{"type":50,"value":4872},"ASCII timeline",{"type":50,"value":4874},": Gantt chart of all tweens across the composition duration",{"type":45,"tag":84,"props":4876,"children":4877},{},[4878,4883,4885,4891],{"type":45,"tag":88,"props":4879,"children":4880},{},[4881],{"type":50,"value":4882},"Stagger detection",{"type":50,"value":4884},": reports actual intervals (",{"type":45,"tag":59,"props":4886,"children":4888},{"className":4887},[],[4889],{"type":50,"value":4890},"\"3 elements stagger at 120ms\"",{"type":50,"value":1129},{"type":45,"tag":84,"props":4893,"children":4894},{},[4895,4900],{"type":45,"tag":88,"props":4896,"children":4897},{},[4898],{"type":50,"value":4899},"Dead zones",{"type":50,"value":4901},": periods over 1s with no animation — intentional hold or missing entrance?",{"type":45,"tag":84,"props":4903,"children":4904},{},[4905,4910],{"type":45,"tag":88,"props":4906,"children":4907},{},[4908],{"type":50,"value":4909},"Element lifecycles",{"type":50,"value":4911},": first\u002Flast animation time, final visibility",{"type":45,"tag":84,"props":4913,"children":4914},{},[4915,4920],{"type":45,"tag":88,"props":4916,"children":4917},{},[4918],{"type":50,"value":4919},"Scene snapshots",{"type":50,"value":4921},": visible element state at 5 key timestamps",{"type":45,"tag":84,"props":4923,"children":4924},{},[4925,4930,4931,4937,4938,4944,4945,4951,4952,4958,4960,4966],{"type":45,"tag":88,"props":4926,"children":4927},{},[4928],{"type":50,"value":4929},"Flags",{"type":50,"value":4858},{"type":45,"tag":59,"props":4932,"children":4934},{"className":4933},[],[4935],{"type":50,"value":4936},"offscreen",{"type":50,"value":296},{"type":45,"tag":59,"props":4939,"children":4941},{"className":4940},[],[4942],{"type":50,"value":4943},"collision",{"type":50,"value":296},{"type":45,"tag":59,"props":4946,"children":4948},{"className":4947},[],[4949],{"type":50,"value":4950},"invisible",{"type":50,"value":296},{"type":45,"tag":59,"props":4953,"children":4955},{"className":4954},[],[4956],{"type":50,"value":4957},"paced-fast",{"type":50,"value":4959}," (under 0.2s), ",{"type":45,"tag":59,"props":4961,"children":4963},{"className":4962},[],[4964],{"type":50,"value":4965},"paced-slow",{"type":50,"value":4967}," (over 2s)",{"type":45,"tag":53,"props":4969,"children":4970},{},[4971],{"type":50,"value":4972},"Read the JSON. Scan summaries for anything unexpected. Check every flag — fix or justify. Verify the timeline shows the intended choreography rhythm. Re-run after fixes.",{"type":45,"tag":53,"props":4974,"children":4975},{},[4976],{"type":50,"value":4977},"Skip on small edits (fixing a color, adjusting one duration). Run on new compositions and significant animation changes.",{"type":45,"tag":4979,"props":4980,"children":4981},"hr",{},[],{"type":45,"tag":68,"props":4983,"children":4985},{"id":4984},"references-loaded-on-demand",[4986],{"type":50,"value":4987},"References (loaded on demand)",{"type":45,"tag":266,"props":4989,"children":4990},{},[4991,5004,5017,5030,5043,5063,5076,5088,5100,5113,5126,5139,5152],{"type":45,"tag":84,"props":4992,"children":4993},{},[4994,5002],{"type":45,"tag":88,"props":4995,"children":4996},{},[4997],{"type":45,"tag":216,"props":4998,"children":5000},{"href":4999},"references\u002Fcaptions.md",[5001],{"type":50,"value":4999},{"type":50,"value":5003}," — Captions, subtitles, lyrics, karaoke synced to audio. Tone-adaptive style detection, per-word styling, text overflow prevention, caption exit guarantees, word grouping. Read when adding any text synced to audio timing.",{"type":45,"tag":84,"props":5005,"children":5006},{},[5007,5015],{"type":45,"tag":88,"props":5008,"children":5009},{},[5010],{"type":45,"tag":216,"props":5011,"children":5013},{"href":5012},"references\u002Ftts.md",[5014],{"type":50,"value":5012},{"type":50,"value":5016}," — Text-to-speech with Kokoro-82M. Voice selection, speed tuning, TTS+captions workflow. Read when generating narration or voiceover.",{"type":45,"tag":84,"props":5018,"children":5019},{},[5020,5028],{"type":45,"tag":88,"props":5021,"children":5022},{},[5023],{"type":45,"tag":216,"props":5024,"children":5026},{"href":5025},"references\u002Faudio-reactive.md",[5027],{"type":50,"value":5025},{"type":50,"value":5029}," — Audio-reactive animation: map frequency bands and amplitude to GSAP properties. Read when visuals should respond to music, voice, or sound.",{"type":45,"tag":84,"props":5031,"children":5032},{},[5033,5041],{"type":45,"tag":88,"props":5034,"children":5035},{},[5036],{"type":45,"tag":216,"props":5037,"children":5039},{"href":5038},"references\u002Fcss-patterns.md",[5040],{"type":50,"value":5038},{"type":50,"value":5042}," — CSS+GSAP marker highlighting: highlight, circle, burst, scribble, sketchout. Deterministic, fully seekable. Read when adding visual emphasis to text.",{"type":45,"tag":84,"props":5044,"children":5045},{},[5046,5054,5056,5061],{"type":45,"tag":88,"props":5047,"children":5048},{},[5049],{"type":45,"tag":216,"props":5050,"children":5052},{"href":5051},"references\u002Ftypography.md",[5053],{"type":50,"value":5051},{"type":50,"value":5055}," — Typography: font pairing, OpenType features, dark-background adjustments, font discovery script. ",{"type":45,"tag":88,"props":5057,"children":5058},{},[5059],{"type":50,"value":5060},"Always read",{"type":50,"value":5062}," — every composition has text.",{"type":45,"tag":84,"props":5064,"children":5065},{},[5066,5074],{"type":45,"tag":88,"props":5067,"children":5068},{},[5069],{"type":45,"tag":216,"props":5070,"children":5072},{"href":5071},"references\u002Fmotion-principles.md",[5073],{"type":50,"value":5071},{"type":50,"value":5075}," — Motion design principles: easing as emotion, timing as weight, choreography as hierarchy, scene pacing, ambient motion, anti-patterns. Read when choreographing GSAP animations.",{"type":45,"tag":84,"props":5077,"children":5078},{},[5079,5086],{"type":45,"tag":88,"props":5080,"children":5081},{},[5082],{"type":45,"tag":216,"props":5083,"children":5084},{"href":202},[5085],{"type":50,"value":202},{"type":50,"value":5087}," — 8 named visual styles (Swiss Pulse, Velvet Standard, Deconstructed, Maximalist Type, Data Drift, Soft Signal, Folk Frequency, Shadow Cut) with hex palettes, GSAP easing signatures, and shader pairings. Read when user names a style or when generating DESIGN.md.",{"type":45,"tag":84,"props":5089,"children":5090},{},[5091,5098],{"type":45,"tag":88,"props":5092,"children":5093},{},[5094],{"type":45,"tag":216,"props":5095,"children":5096},{"href":323},[5097],{"type":50,"value":323},{"type":50,"value":5099}," — Default motion, sizing, and color palettes when no style is specified.",{"type":45,"tag":84,"props":5101,"children":5102},{},[5103,5111],{"type":45,"tag":88,"props":5104,"children":5105},{},[5106],{"type":45,"tag":216,"props":5107,"children":5109},{"href":5108},"patterns.md",[5110],{"type":50,"value":5108},{"type":50,"value":5112}," — PiP, title cards, slide show patterns.",{"type":45,"tag":84,"props":5114,"children":5115},{},[5116,5124],{"type":45,"tag":88,"props":5117,"children":5118},{},[5119],{"type":45,"tag":216,"props":5120,"children":5122},{"href":5121},"data-in-motion.md",[5123],{"type":50,"value":5121},{"type":50,"value":5125}," — Data, stats, and infographic patterns.",{"type":45,"tag":84,"props":5127,"children":5128},{},[5129,5137],{"type":45,"tag":88,"props":5130,"children":5131},{},[5132],{"type":45,"tag":216,"props":5133,"children":5135},{"href":5134},"references\u002Ftranscript-guide.md",[5136],{"type":50,"value":5134},{"type":50,"value":5138}," — Transcription commands, whisper models, external APIs, troubleshooting.",{"type":45,"tag":84,"props":5140,"children":5141},{},[5142,5150],{"type":45,"tag":88,"props":5143,"children":5144},{},[5145],{"type":45,"tag":216,"props":5146,"children":5148},{"href":5147},"references\u002Fdynamic-techniques.md",[5149],{"type":50,"value":5147},{"type":50,"value":5151}," — Dynamic caption animation techniques (karaoke, clip-path, slam, scatter, elastic, 3D).",{"type":45,"tag":84,"props":5153,"children":5154},{},[5155,5163,5165,5170,5172],{"type":45,"tag":88,"props":5156,"children":5157},{},[5158],{"type":45,"tag":216,"props":5159,"children":5161},{"href":5160},"references\u002Ftransitions.md",[5162],{"type":50,"value":5160},{"type":50,"value":5164}," — Scene transitions: crossfades, wipes, reveals, shader transitions. Energy\u002Fmood selection, CSS vs WebGL guidance. ",{"type":45,"tag":88,"props":5166,"children":5167},{},[5168],{"type":50,"value":5169},"Always read for multi-scene compositions",{"type":50,"value":5171}," — scenes without transitions feel like jump cuts.",{"type":45,"tag":266,"props":5173,"children":5174},{},[5175,5186],{"type":45,"tag":84,"props":5176,"children":5177},{},[5178,5184],{"type":45,"tag":216,"props":5179,"children":5181},{"href":5180},"references\u002Ftransitions\u002Fcatalog.md",[5182],{"type":50,"value":5183},"transitions\u002Fcatalog.md",{"type":50,"value":5185}," — Hard rules, scene template, and routing to per-type implementation code.",{"type":45,"tag":84,"props":5187,"children":5188},{},[5189,5191,5197,5199,5205],{"type":50,"value":5190},"Shader transitions are in ",{"type":45,"tag":59,"props":5192,"children":5194},{"className":5193},[],[5195],{"type":50,"value":5196},"@hyperframes\u002Fshader-transitions",{"type":50,"value":5198}," (",{"type":45,"tag":59,"props":5200,"children":5202},{"className":5201},[],[5203],{"type":50,"value":5204},"packages\u002Fshader-transitions\u002F",{"type":50,"value":5206},") — read package source, not skill files.",{"type":45,"tag":53,"props":5208,"children":5209},{},[5210,5212,5218],{"type":50,"value":5211},"GSAP patterns and effects are in the ",{"type":45,"tag":59,"props":5213,"children":5215},{"className":5214},[],[5216],{"type":50,"value":5217},"\u002Fgsap",{"type":50,"value":5219}," skill.",{"type":45,"tag":2400,"props":5221,"children":5222},{},[5223],{"type":50,"value":5224},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":5226,"total":5346},[5227,5246,5262,5274,5294,5314,5334],{"slug":5228,"name":5228,"fn":5229,"description":5230,"org":5231,"tags":5232,"stars":28,"repoUrl":29,"updatedAt":5245},"accessibility-and-inclusive-visualization","make data visualizations accessible","Make data visualizations accessible and inclusive. Use when the user needs chart or diagram accessibility guidance, text alternatives for complex visuals, color and contrast review, keyboard support, reduced-motion behavior for animation or parallax, or an accessibility QA workflow for exported figures, UML-like diagrams, and dashboards.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5233,5236,5239,5242],{"name":5234,"slug":5235,"type":15},"Accessibility","accessibility",{"name":5237,"slug":5238,"type":15},"Charts","charts",{"name":5240,"slug":5241,"type":15},"Data Visualization","data-visualization",{"name":5243,"slug":5244,"type":15},"Design","design","2026-06-30T19:00:57.102",{"slug":5247,"name":5247,"fn":5248,"description":5249,"org":5250,"tags":5251,"stars":28,"repoUrl":29,"updatedAt":5261},"agent-browser","automate browser interactions for agents","Browser automation CLI for AI agents. Use when the user needs to interact with websites, verify dev server output, test web apps, navigate pages, fill forms, click buttons, take screenshots, extract data, or automate any browser task. Also triggers when a dev server starts so you can verify it visually.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5252,5255,5258],{"name":5253,"slug":5254,"type":15},"Agents","agents",{"name":5256,"slug":5257,"type":15},"Browser Automation","browser-automation",{"name":5259,"slug":5260,"type":15},"Testing","testing","2026-04-06T18:41:03.44016",{"slug":5263,"name":5263,"fn":5264,"description":5265,"org":5266,"tags":5267,"stars":28,"repoUrl":29,"updatedAt":5273},"agent-browser-verify","verify dev server output with automated browser","Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass\u002Ffail before continuing.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5268,5269,5272],{"name":5256,"slug":5257,"type":15},{"name":5270,"slug":5271,"type":15},"Local Development","local-development",{"name":5259,"slug":5260,"type":15},"2026-04-06T18:41:17.526867",{"slug":5275,"name":5275,"fn":5276,"description":5277,"org":5278,"tags":5279,"stars":28,"repoUrl":29,"updatedAt":5293},"agents-sdk","build AI agents on Cloudflare Workers","Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5280,5281,5284,5287,5290],{"name":5253,"slug":5254,"type":15},{"name":5282,"slug":5283,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":5285,"slug":5286,"type":15},"SDK","sdk",{"name":5288,"slug":5289,"type":15},"Serverless","serverless",{"name":5291,"slug":5292,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":5295,"name":5295,"fn":5296,"description":5297,"org":5298,"tags":5299,"stars":28,"repoUrl":29,"updatedAt":5313},"ai-elements","build chat UIs with AI Elements","AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn\u002Fui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5300,5301,5304,5307,5310],{"name":26,"slug":27,"type":15},{"name":5302,"slug":5303,"type":15},"React","react",{"name":5305,"slug":5306,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":5308,"slug":5309,"type":15},"UI Components","ui-components",{"name":5311,"slug":5312,"type":15},"Vercel","vercel","2026-04-06T18:40:59.619419",{"slug":5315,"name":5315,"fn":5316,"description":5317,"org":5318,"tags":5319,"stars":28,"repoUrl":29,"updatedAt":5333},"ai-gateway","configure Vercel AI Gateway","Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified API.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5320,5323,5326,5329,5332],{"name":5321,"slug":5322,"type":15},"AI Infrastructure","ai-infrastructure",{"name":5324,"slug":5325,"type":15},"Cost Optimization","cost-optimization",{"name":5327,"slug":5328,"type":15},"LLM","llm",{"name":5330,"slug":5331,"type":15},"Performance","performance",{"name":5311,"slug":5312,"type":15},"2026-04-06T18:40:44.377464",{"slug":5335,"name":5335,"fn":5336,"description":5337,"org":5338,"tags":5339,"stars":28,"repoUrl":29,"updatedAt":5345},"ai-generation-persistence","implement persistence patterns for AI generations","AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5340,5341,5344],{"name":5324,"slug":5325,"type":15},{"name":5342,"slug":5343,"type":15},"Database","database",{"name":5327,"slug":5328,"type":15},"2026-04-06T18:41:08.513425",600,{"items":5348,"total":5541},[5349,5370,5393,5410,5426,5443,5462,5474,5488,5502,5514,5525],{"slug":5350,"name":5350,"fn":5351,"description":5352,"org":5353,"tags":5354,"stars":5367,"repoUrl":5368,"updatedAt":5369},"prior-auth-packet-builder","build healthcare prior authorization packets","Build a concise prior authorization packet from local case files and payer policy docs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5355,5358,5361,5364],{"name":5356,"slug":5357,"type":15},"Documents","documents",{"name":5359,"slug":5360,"type":15},"Healthcare","healthcare",{"name":5362,"slug":5363,"type":15},"Insurance","insurance",{"name":5365,"slug":5366,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":5371,"name":5371,"fn":5372,"description":5373,"org":5374,"tags":5375,"stars":5390,"repoUrl":5391,"updatedAt":5392},"aspnet-core","build ASP.NET Core web applications","Build, review, refactor, or architect ASP.NET Core web applications using current official guidance for .NET web development. Use when working on Blazor Web Apps, Razor Pages, MVC, Minimal APIs, controller-based Web APIs, SignalR, gRPC, middleware, dependency injection, configuration, authentication, authorization, testing, performance, deployment, or ASP.NET Core upgrades.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5376,5379,5381,5384,5387],{"name":5377,"slug":5378,"type":15},".NET","dotnet",{"name":5380,"slug":5371,"type":15},"ASP.NET Core",{"name":5382,"slug":5383,"type":15},"Blazor","blazor",{"name":5385,"slug":5386,"type":15},"C#","csharp",{"name":5388,"slug":5389,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":5394,"name":5394,"fn":5395,"description":5396,"org":5397,"tags":5398,"stars":5390,"repoUrl":5391,"updatedAt":5409},"chatgpt-apps","build ChatGPT Apps SDK applications","Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5399,5402,5405,5408],{"name":5400,"slug":5401,"type":15},"Apps SDK","apps-sdk",{"name":5403,"slug":5404,"type":15},"ChatGPT","chatgpt",{"name":5406,"slug":5407,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":5411,"name":5411,"fn":5412,"description":5413,"org":5414,"tags":5415,"stars":5390,"repoUrl":5391,"updatedAt":5425},"cli-creator","build CLIs from API docs","Build a composable CLI for Codex from API docs, an OpenAPI spec, existing curl examples, an SDK, a web app, an admin tool, or a local script. Use when the user wants Codex to create a command-line tool that can run from any repo, expose composable read\u002Fwrite commands, return stable JSON, manage auth, and pair with a companion skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5416,5419,5422],{"name":5417,"slug":5418,"type":15},"API Development","api-development",{"name":5420,"slug":5421,"type":15},"CLI","cli",{"name":5423,"slug":5424,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":5427,"name":5427,"fn":5428,"description":5429,"org":5430,"tags":5431,"stars":5390,"repoUrl":5391,"updatedAt":5442},"cloudflare-deploy","deploy projects to Cloudflare","Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5432,5435,5438,5439],{"name":5433,"slug":5434,"type":15},"Cloudflare","cloudflare",{"name":5436,"slug":5437,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":5282,"slug":5283,"type":15},{"name":5440,"slug":5441,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":5444,"name":5444,"fn":5445,"description":5446,"org":5447,"tags":5448,"stars":5390,"repoUrl":5391,"updatedAt":5461},"define-goal","define and set measurable project goals","Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5449,5452,5455,5458],{"name":5450,"slug":5451,"type":15},"Productivity","productivity",{"name":5453,"slug":5454,"type":15},"Project Management","project-management",{"name":5456,"slug":5457,"type":15},"Strategy","strategy",{"name":5459,"slug":5460,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":5463,"name":5463,"fn":5464,"description":5465,"org":5466,"tags":5467,"stars":5390,"repoUrl":5391,"updatedAt":5473},"figma","translate Figma designs into code","Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5468,5469,5471,5472],{"name":5243,"slug":5244,"type":15},{"name":5470,"slug":5463,"type":15},"Figma",{"name":26,"slug":27,"type":15},{"name":5406,"slug":5407,"type":15},"2026-04-12T05:06:47.939943",{"slug":5475,"name":5475,"fn":5476,"description":5477,"org":5478,"tags":5479,"stars":5390,"repoUrl":5391,"updatedAt":5487},"figma-code-connect-components","connect Figma designs to code components","Connects Figma design components to code components using Code Connect mapping tools. Use when user says \"code connect\", \"connect this component to code\", \"map this component\", \"link component to code\", \"create code connect mapping\", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5480,5481,5484,5485,5486],{"name":5243,"slug":5244,"type":15},{"name":5482,"slug":5483,"type":15},"Design System","design-system",{"name":5470,"slug":5463,"type":15},{"name":26,"slug":27,"type":15},{"name":5308,"slug":5309,"type":15},"2026-05-10T05:59:52.971881",{"slug":5489,"name":5489,"fn":5490,"description":5491,"org":5492,"tags":5493,"stars":5390,"repoUrl":5391,"updatedAt":5501},"figma-create-design-system-rules","generate design system rules from Figma","Generates custom design system rules for the user's codebase. Use when user says \"create design system rules\", \"generate rules for my project\", \"set up design rules\", \"customize design system guidelines\", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5494,5495,5496,5499,5500],{"name":5243,"slug":5244,"type":15},{"name":5482,"slug":5483,"type":15},{"name":5497,"slug":5498,"type":15},"Documentation","documentation",{"name":5470,"slug":5463,"type":15},{"name":26,"slug":27,"type":15},"2026-05-16T06:07:47.821474",{"slug":5503,"name":5503,"fn":5504,"description":5505,"org":5506,"tags":5507,"stars":5390,"repoUrl":5391,"updatedAt":5513},"figma-implement-design","translate Figma designs into application code","Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions \"implement design\", \"generate code\", \"implement component\", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5508,5509,5510,5511,5512],{"name":5243,"slug":5244,"type":15},{"name":5470,"slug":5463,"type":15},{"name":26,"slug":27,"type":15},{"name":5308,"slug":5309,"type":15},{"name":5388,"slug":5389,"type":15},"2026-05-16T06:07:40.583615",{"slug":5515,"name":5515,"fn":5516,"description":5517,"org":5518,"tags":5519,"stars":5390,"repoUrl":5391,"updatedAt":5524},"hatch-pet","create animated pets for Codex","Create, repair, validate, visually QA, and package Codex-compatible animated pets and pet spritesheets from character art, generated images, company or prospect brand cues, or visual references. Use when a user wants a lightweight-worker Codex pet workflow, a non-pixel custom pet style, a prospect or company mascot pet, or a full 8x9 animated pet atlas with transparent unused cells, QA contact sheets, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5520,5521,5522,5523],{"name":20,"slug":21,"type":15},{"name":5423,"slug":5424,"type":15},{"name":17,"slug":18,"type":15},{"name":5243,"slug":5244,"type":15},"2026-05-02T05:31:48.48485",{"slug":5526,"name":5526,"fn":5527,"description":5528,"org":5529,"tags":5530,"stars":5390,"repoUrl":5391,"updatedAt":5540},"imagegen","generate and edit raster images","Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output should be a bitmap asset rather than repo-native code or vector. Do not use when the task is better handled by editing existing SVG\u002Fvector\u002Fcode-native assets, extending an established icon or logo system, or building the visual directly in HTML\u002FCSS\u002Fcanvas.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5531,5532,5533,5536,5539],{"name":17,"slug":18,"type":15},{"name":5243,"slug":5244,"type":15},{"name":5534,"slug":5535,"type":15},"Image Generation","image-generation",{"name":5537,"slug":5538,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]