takomi 2.5.1 → 2.5.4

package/assets/.agent/skills/music-to-video/references/montage.md

@@ -1,58 +1,58 @@
-# Asset treatments — weaving user media onto the beat spine
-
-When the user supplies images/videos, a group can be an **asset treatment** instead of a
-typographic template/free-compose. Assets are an **additive ingredient on the same beat
-spine** — never a separate pipeline. Typography/templates stay the floor: if no asset fits a
-group, fall back to a template/free group (a complete video needs zero assets).
-
-The planner (Step 3) picks the treatment and the clips + anchors (WHAT); the frame-worker
-realizes it inside the frame file (HOW). **Obey the frame's `pacing`.**
-
-## The three treatments
-
-### `beat_cut` — one clip per anchor (only on a `beat_cut` frame)
-
-The asset-driven analogue of a per-onset typographic group: cut to a new clip on each anchor
-(the frame's beats/onsets from the audiomap). Each clip is a `class="clip"` element
-(`<img>` for a photo, **muted** `<video>` for a motion clip) placed at its anchor with
-`data-start`/`data-duration`/`data-track-index` per the core clip contract. Between clips,
-crossfade the outgoing content to `opacity:0` ending **at** the next anchor, then immediately
-**hard-kill** with a `tl.set(..., {opacity:0}, anchor)` — this pair is required (the
-`gsap_exit_missing_hard_kill` lint rule; non-linear seeking otherwise bleeds stale frames).
-Cut on the **strong** anchors; land a hero clip on a `key_moment`/downbeat.
-
-### `ken_burns` — slow push on one clip (fits a `phrase_flow` frame)
-
-For calm frames: one clip held over the span with a slow scale/translate push (e.g. scale
-1.0→1.08 + a small drift) eased across the whole `span_sec` — paced by the frame, not by
-beats. No hard cuts. Crossfade in/out at the frame edges. This is the right asset treatment
-when the beat grid is unreliable (calm music).
-
-### `bg_under_text` — clip dimmed behind a template/free group
-
-A full-bleed clip dimmed ~30–50% as the background of a group whose foreground is a template
-or free-compose typographic treatment. The text rides on the same anchors; the clip is the
-bed. Use when the user wants their footage present but the message must stay readable.
-
-## Rules
-
-- **`pacing` decides the treatment**: `beat_cut` only on a `beat_cut` frame; on a
-  `phrase_flow` frame use `ken_burns` or a slow crossfade — **never** per-onset hard cuts on
-  the (unreliable) calm grid.
-- **Clips are muted; the root owns audio.** Mount each `<video class="clip">` **muted**, as a
-  direct child of the frame root (never nested in another timed element, or the renderer
-  freezes it). The BGM is the only audio in v1.
-- **Crossfades animate `opacity`/`autoAlpha`**, never `visibility`/`display` on a `.clip`
-  (the framework owns clip visibility — that trips `gsap_animates_clip_element`).
-- **Backgrounds dim ~30–50%** so any foreground text stays legible.
-- Anchors are **track seconds from `audiomap.json`**; the worker subtracts the frame start
-  to get frame-local time.
-- Local staged assets only (`assets/` via `stage-assets.mjs`); never remote URLs.
-
-## Deferred hook (not v1)
-
-A clip that should play **its own sound** (interview cut, lyric clip) needs a sibling
-`<audio>` mounted at the **root** by the assembler, with the BGM ducked under it (timeline
-volume automation: `tl.to("#el-bgm",{volume:0.15,…},clipStart)` … `tl.to(…,{volume:0.9,…},
-clipEnd)`). The frame-worker mounts no audio. Keep clips muted in v1; wire clip-audio +
-ducking only when the user asks.
+# Asset treatments — weaving user media onto the beat spine
+
+When the user supplies images/videos, a group can be an **asset treatment** instead of a
+typographic template/free-compose. Assets are an **additive ingredient on the same beat
+spine** — never a separate pipeline. Typography/templates stay the floor: if no asset fits a
+group, fall back to a template/free group (a complete video needs zero assets).
+
+The planner (Step 3) picks the treatment and the clips + anchors (WHAT); the frame-worker
+realizes it inside the frame file (HOW). **Obey the frame's `pacing`.**
+
+## The three treatments
+
+### `beat_cut` — one clip per anchor (only on a `beat_cut` frame)
+
+The asset-driven analogue of a per-onset typographic group: cut to a new clip on each anchor
+(the frame's beats/onsets from the audiomap). Each clip is a `class="clip"` element
+(`<img>` for a photo, **muted** `<video>` for a motion clip) placed at its anchor with
+`data-start`/`data-duration`/`data-track-index` per the core clip contract. Between clips,
+crossfade the outgoing content to `opacity:0` ending **at** the next anchor, then immediately
+**hard-kill** with a `tl.set(..., {opacity:0}, anchor)` — this pair is required (the
+`gsap_exit_missing_hard_kill` lint rule; non-linear seeking otherwise bleeds stale frames).
+Cut on the **strong** anchors; land a hero clip on a `key_moment`/downbeat.
+
+### `ken_burns` — slow push on one clip (fits a `phrase_flow` frame)
+
+For calm frames: one clip held over the span with a slow scale/translate push (e.g. scale
+1.0→1.08 + a small drift) eased across the whole `span_sec` — paced by the frame, not by
+beats. No hard cuts. Crossfade in/out at the frame edges. This is the right asset treatment
+when the beat grid is unreliable (calm music).
+
+### `bg_under_text` — clip dimmed behind a template/free group
+
+A full-bleed clip dimmed ~30–50% as the background of a group whose foreground is a template
+or free-compose typographic treatment. The text rides on the same anchors; the clip is the
+bed. Use when the user wants their footage present but the message must stay readable.
+
+## Rules
+
+- **`pacing` decides the treatment**: `beat_cut` only on a `beat_cut` frame; on a
+  `phrase_flow` frame use `ken_burns` or a slow crossfade — **never** per-onset hard cuts on
+  the (unreliable) calm grid.
+- **Clips are muted; the root owns audio.** Mount each `<video class="clip">` **muted**, as a
+  direct child of the frame root (never nested in another timed element, or the renderer
+  freezes it). The BGM is the only audio in v1.
+- **Crossfades animate `opacity`/`autoAlpha`**, never `visibility`/`display` on a `.clip`
+  (the framework owns clip visibility — that trips `gsap_animates_clip_element`).
+- **Backgrounds dim ~30–50%** so any foreground text stays legible.
+- Anchors are **track seconds from `audiomap.json`**; the worker subtracts the frame start
+  to get frame-local time.
+- Local staged assets only (`assets/` via `stage-assets.mjs`); never remote URLs.
+
+## Deferred hook (not v1)
+
+A clip that should play **its own sound** (interview cut, lyric clip) needs a sibling
+`<audio>` mounted at the **root** by the assembler, with the BGM ducked under it (timeline
+volume automation: `tl.to("#el-bgm",{volume:0.15,…},clipStart)` … `tl.to(…,{volume:0.9,…},
+clipEnd)`). The frame-worker mounts no audio. Keep clips muted in v1; wire clip-audio +
+ducking only when the user asks.

package/assets/.agent/skills/music-to-video/references/motion-primitive-catalog.md

@@ -1,75 +1,75 @@
-# Motion-primitive catalog — the free-compose menu
-
-The atomic layer: one anchor → one micro-move. When no template fits a group, free-compose by
-naming primitives from here. Scan **anchor** + **best span** + **what it does**, then pick the
-smallest set that carries the group.
-
-## Timing & latency (applies to every primitive)
-
-- **Hard hits are 0ms.** Cuts, palette flips, content swaps, freezes are `tl.set(...)` with no duration — the percussion _is_ the motion. Easing a hit kills it.
-- **Lead the anchor.** A move that must _land_ on a beat (a wipe covering the frame, a count-up locking, two blocks colliding) starts **~40–190ms early** so it completes ON the anchor. Reactive entrances (something appearing _because_ of the hit) fire 0–45ms after.
-- **Eased entrances: 300–500ms** (scale punch, slides, camera pushes). **Macro builds: 800–2000ms** spanning a whole roll / silence.
-- **Per-bar caps:** one accumulating element per hit (not a burst); a camera move at most once per phrase, never per beat; a dense flip/strobe system runs ≤2–3s.
-- **Tension-builds lock.** A count-up / sequential build / morph must _resolve on_ a downbeat or hard_stop, never trail off mid-bar.
-- **Best span means active motion.** The catalog's span guidance is not a license to stretch one primitive over a whole frame. If a free-composed group runs longer than the listed span, add a hold / bed / next primitive, or split the frame into another group at the next musical anchor.
-
-## Catalog
-
-| id                    | anchor                           | best span         | what it does                                                              |
-| --------------------- | -------------------------------- | ----------------- | ------------------------------------------------------------------------- |
-| `hypercut-whip`       | beat / hard_stop                 | 0.18-0.45s        | fast whip-pan hard cut between frames                                     |
-| `kinetic-letter-in`   | downbeat / phrase                | 0.4-1.2s          | per-letter kinetic entrance                                               |
-| `braam-punch`         | drop / surge                     | 0.2-0.9s active   | big impact: scale + weight slam                                           |
-| `chromatic-split`     | snare / glitch / surge           | 0.1-0.6s          | RGB channel split / glitch on a word                                      |
-| `mask-reveal`         | section_start / downbeat         | 0.5-1.2s          | clip-path mask wipe reveal                                                |
-| `screen-shake`        | drop / crash / kick              | 0.1-0.5s          | camera / screen shake jitter                                              |
-| `binary-decrypt`      | roll / build                     | 0.8-2.5s          | scramble→decode text (binary → word)                                      |
-| `dolly-zoom`          | phrase / build                   | 1.2-2.5s          | vertigo dolly-zoom (scale vs perspective)                                 |
-| `iris-open`           | section_start / reveal           | 0.6-1.2s          | circular iris-open reveal                                                 |
-| `electric-arc`        | accent / glitch                  | 0.1-0.6s          | electric arc / lightning accent                                           |
-| `neon-flicker`        | hold / texture                   | 0.5-2.5s          | neon-sign flicker                                                         |
-| `chrome-sweep`        | downbeat / reveal                | 0.6-1.4s          | metallic specular sweep across text                                       |
-| `slot-machine-reveal` | roll → downbeat                  | 0.8-2.0s          | slot-machine spin-to-land character reveal                                |
-| `liquid-morph`        | phrase / transition              | 1.0-2.5s          | liquid / blob morph                                                       |
-| `gooey-metaball`      | build / drop                     | 1.5-3.0s          | gooey metaball merge field                                                |
-| `3d-card-flip`        | downbeat / swap                  | 0.8-1.6s          | 3D card flip (rotateY)                                                    |
-| `crash-zoom-in`       | drop / surge                     | 0.2-0.8s          | violent crash zoom-in                                                     |
-| `spotlight-sweep`     | reveal / hold                    | 0.8-2.0s          | spotlight / gradient sweep over text                                      |
-| `outline-to-fill`     | downbeat / reveal                | 0.8-1.8s          | stroke outline → solid fill                                               |
-| `counting-punch`      | roll → downbeat                  | 1.0-2.5s          | number count-up that punches & locks                                      |
-| `particle-burst`      | drop / crash                     | 0.2-1.2s          | particle explosion burst                                                  |
-| `radial-burst-lines`  | drop / surge                     | 0.2-0.8s          | radial speed-lines burst                                                  |
-| `pixel-dissolve`      | transition / hard_stop           | 0.5-1.5s          | pixelated dissolve                                                        |
-| `datamosh-smear`      | glitch / transition              | 0.4-1.2s          | datamosh / motion smear                                                   |
-| `text-wave-distort`   | hold / texture                   | 1.0-2.5s          | wavy text distortion                                                      |
-| `bg-flow-field`       | energy / whole span (bed)        | 4-12s bed         | generative curl-noise background bed; compose any foreground move over it |
-| `blur-resolve`        | stop / final hold                | 0.7-2.0s          | blur-in to crisp focus, then blur-out on the cut                          |
-| `chromatic-pressure`  | snare / glitch                   | 0.1-0.5s          | RGB split / digital tension on a transient                                |
-| `color-grid-shuffle`  | onset                            | 0ms hits; ≤2s run | grid of cells recolored by a deterministic index per onset                |
-| `content-swap`        | beat                             | 0ms hits; ≤3s run | 0ms swap of stacked nodes: the workhorse percussive move                  |
-| `directional-fill`    | beat / reveal                    | 0.3-1.0s each     | directional wipe-fill (scaleX) sweeping across bars                       |
-| `flash-cut`           | drop / crash                     | 0-0.6s            | full-frame flash masking a word / color state change                      |
-| `freeze-hold`         | hard_stop                        | 0ms in; 0.5-2s    | freeze the moving system and hold it                                      |
-| `hard-cut`            | beat / hard_stop                 | 0ms in; 0.3-2s    | sample-accurate color-block + word cut                                    |
-| `mosaic-pack`         | beat / build                     | 1.5-3.5s          | scattered tiles fly in and pack into a grid                               |
-| `negative-space-hold` | silence / hard_stop / final hold | 1-6s hold         | kill busy layers, hold one readable mark in empty space                   |
-| `overlay-pop`         | accent                           | 0.2-0.6s in       | badge / lower-third overlay pops in over a base                           |
-| `palette-flip`        | section change                   | 0ms flip; 0.5-4s  | same layout re-skins via 0ms palette-variable flips                       |
-| `staggered-exit`      | phrase / transition              | 0.4-1.2s          | ordered cascade-out clearing the frame                                    |
-| `staggered-reveal`    | build                            | 0.8-2.5s          | ordered cascade-in of a stack / list                                      |
-| `system-replace`      | drop / regime change             | 0ms cut           | hard-cut the entire visual system, then boot the new one                  |
-| `text-spectral-rays`  | phrase / sweep (hero text)       | 2.5-5s            | volumetric light-rays cast by a wordmark toward a sweeping light cursor   |
-| `tile-mosaic`         | build / reveal                   | 1.5-3.5s          | grid of tiles revealed in a diagonal sweep, assembling a poster           |
-| `typewriter-reveal`   | roll / build                     | 1.0-3.0s          | character / word type-on with caret                                       |
-| `value-counter`       | roll → downbeat                  | 1.0-2.5s          | count-up that locks on a downbeat / hard_stop                             |
-| `word-grid-burst`     | onsets → downbeat                | 1.8-3.2s          | grid of words revealed per onset, refocus one on a downbeat               |
-
-## How to combine
-
-- One dominant system per group; layer at most one texture primitive over one structural primitive.
-- Structure on strong beats (cuts, camera, `system-replace` → downbeat / phrase / section_start); texture on weak / syncopated hits (`content-swap`, typewriter letters, chromatic accents).
-- A roll is an accumulation container — build during it, hard-cut to a clean layout on the downbeat that ends it.
-- `drop` ≠ `downbeat`: a downbeat is a cut within the regime; a drop is a regime change (`system-replace`, total clear, element-count jump).
-- Let silence remove density (`negative-space-hold`).
-- Background beds are a layer, not a move: one bed at a time, under foreground primitives.
-- `text-spectral-rays` is the hero wordmark treatment; do not stack another visible copy of the same word on top.
+# Motion-primitive catalog — the free-compose menu
+
+The atomic layer: one anchor → one micro-move. When no template fits a group, free-compose by
+naming primitives from here. Scan **anchor** + **best span** + **what it does**, then pick the
+smallest set that carries the group.
+
+## Timing & latency (applies to every primitive)
+
+- **Hard hits are 0ms.** Cuts, palette flips, content swaps, freezes are `tl.set(...)` with no duration — the percussion _is_ the motion. Easing a hit kills it.
+- **Lead the anchor.** A move that must _land_ on a beat (a wipe covering the frame, a count-up locking, two blocks colliding) starts **~40–190ms early** so it completes ON the anchor. Reactive entrances (something appearing _because_ of the hit) fire 0–45ms after.
+- **Eased entrances: 300–500ms** (scale punch, slides, camera pushes). **Macro builds: 800–2000ms** spanning a whole roll / silence.
+- **Per-bar caps:** one accumulating element per hit (not a burst); a camera move at most once per phrase, never per beat; a dense flip/strobe system runs ≤2–3s.
+- **Tension-builds lock.** A count-up / sequential build / morph must _resolve on_ a downbeat or hard_stop, never trail off mid-bar.
+- **Best span means active motion.** The catalog's span guidance is not a license to stretch one primitive over a whole frame. If a free-composed group runs longer than the listed span, add a hold / bed / next primitive, or split the frame into another group at the next musical anchor.
+
+## Catalog
+
+| id                    | anchor                           | best span         | what it does                                                              |
+| --------------------- | -------------------------------- | ----------------- | ------------------------------------------------------------------------- |
+| `hypercut-whip`       | beat / hard_stop                 | 0.18-0.45s        | fast whip-pan hard cut between frames                                     |
+| `kinetic-letter-in`   | downbeat / phrase                | 0.4-1.2s          | per-letter kinetic entrance                                               |
+| `braam-punch`         | drop / surge                     | 0.2-0.9s active   | big impact: scale + weight slam                                           |
+| `chromatic-split`     | snare / glitch / surge           | 0.1-0.6s          | RGB channel split / glitch on a word                                      |
+| `mask-reveal`         | section_start / downbeat         | 0.5-1.2s          | clip-path mask wipe reveal                                                |
+| `screen-shake`        | drop / crash / kick              | 0.1-0.5s          | camera / screen shake jitter                                              |
+| `binary-decrypt`      | roll / build                     | 0.8-2.5s          | scramble→decode text (binary → word)                                      |
+| `dolly-zoom`          | phrase / build                   | 1.2-2.5s          | vertigo dolly-zoom (scale vs perspective)                                 |
+| `iris-open`           | section_start / reveal           | 0.6-1.2s          | circular iris-open reveal                                                 |
+| `electric-arc`        | accent / glitch                  | 0.1-0.6s          | electric arc / lightning accent                                           |
+| `neon-flicker`        | hold / texture                   | 0.5-2.5s          | neon-sign flicker                                                         |
+| `chrome-sweep`        | downbeat / reveal                | 0.6-1.4s          | metallic specular sweep across text                                       |
+| `slot-machine-reveal` | roll → downbeat                  | 0.8-2.0s          | slot-machine spin-to-land character reveal                                |
+| `liquid-morph`        | phrase / transition              | 1.0-2.5s          | liquid / blob morph                                                       |
+| `gooey-metaball`      | build / drop                     | 1.5-3.0s          | gooey metaball merge field                                                |
+| `3d-card-flip`        | downbeat / swap                  | 0.8-1.6s          | 3D card flip (rotateY)                                                    |
+| `crash-zoom-in`       | drop / surge                     | 0.2-0.8s          | violent crash zoom-in                                                     |
+| `spotlight-sweep`     | reveal / hold                    | 0.8-2.0s          | spotlight / gradient sweep over text                                      |
+| `outline-to-fill`     | downbeat / reveal                | 0.8-1.8s          | stroke outline → solid fill                                               |
+| `counting-punch`      | roll → downbeat                  | 1.0-2.5s          | number count-up that punches & locks                                      |
+| `particle-burst`      | drop / crash                     | 0.2-1.2s          | particle explosion burst                                                  |
+| `radial-burst-lines`  | drop / surge                     | 0.2-0.8s          | radial speed-lines burst                                                  |
+| `pixel-dissolve`      | transition / hard_stop           | 0.5-1.5s          | pixelated dissolve                                                        |
+| `datamosh-smear`      | glitch / transition              | 0.4-1.2s          | datamosh / motion smear                                                   |
+| `text-wave-distort`   | hold / texture                   | 1.0-2.5s          | wavy text distortion                                                      |
+| `bg-flow-field`       | energy / whole span (bed)        | 4-12s bed         | generative curl-noise background bed; compose any foreground move over it |
+| `blur-resolve`        | stop / final hold                | 0.7-2.0s          | blur-in to crisp focus, then blur-out on the cut                          |
+| `chromatic-pressure`  | snare / glitch                   | 0.1-0.5s          | RGB split / digital tension on a transient                                |
+| `color-grid-shuffle`  | onset                            | 0ms hits; ≤2s run | grid of cells recolored by a deterministic index per onset                |
+| `content-swap`        | beat                             | 0ms hits; ≤3s run | 0ms swap of stacked nodes: the workhorse percussive move                  |
+| `directional-fill`    | beat / reveal                    | 0.3-1.0s each     | directional wipe-fill (scaleX) sweeping across bars                       |
+| `flash-cut`           | drop / crash                     | 0-0.6s            | full-frame flash masking a word / color state change                      |
+| `freeze-hold`         | hard_stop                        | 0ms in; 0.5-2s    | freeze the moving system and hold it                                      |
+| `hard-cut`            | beat / hard_stop                 | 0ms in; 0.3-2s    | sample-accurate color-block + word cut                                    |
+| `mosaic-pack`         | beat / build                     | 1.5-3.5s          | scattered tiles fly in and pack into a grid                               |
+| `negative-space-hold` | silence / hard_stop / final hold | 1-6s hold         | kill busy layers, hold one readable mark in empty space                   |
+| `overlay-pop`         | accent                           | 0.2-0.6s in       | badge / lower-third overlay pops in over a base                           |
+| `palette-flip`        | section change                   | 0ms flip; 0.5-4s  | same layout re-skins via 0ms palette-variable flips                       |
+| `staggered-exit`      | phrase / transition              | 0.4-1.2s          | ordered cascade-out clearing the frame                                    |
+| `staggered-reveal`    | build                            | 0.8-2.5s          | ordered cascade-in of a stack / list                                      |
+| `system-replace`      | drop / regime change             | 0ms cut           | hard-cut the entire visual system, then boot the new one                  |
+| `text-spectral-rays`  | phrase / sweep (hero text)       | 2.5-5s            | volumetric light-rays cast by a wordmark toward a sweeping light cursor   |
+| `tile-mosaic`         | build / reveal                   | 1.5-3.5s          | grid of tiles revealed in a diagonal sweep, assembling a poster           |
+| `typewriter-reveal`   | roll / build                     | 1.0-3.0s          | character / word type-on with caret                                       |
+| `value-counter`       | roll → downbeat                  | 1.0-2.5s          | count-up that locks on a downbeat / hard_stop                             |
+| `word-grid-burst`     | onsets → downbeat                | 1.8-3.2s          | grid of words revealed per onset, refocus one on a downbeat               |
+
+## How to combine
+
+- One dominant system per group; layer at most one texture primitive over one structural primitive.
+- Structure on strong beats (cuts, camera, `system-replace` → downbeat / phrase / section_start); texture on weak / syncopated hits (`content-swap`, typewriter letters, chromatic accents).
+- A roll is an accumulation container — build during it, hard-cut to a clean layout on the downbeat that ends it.
+- `drop` ≠ `downbeat`: a downbeat is a cut within the regime; a drop is a regime change (`system-replace`, total clear, element-count jump).
+- Let silence remove density (`negative-space-hold`).
+- Background beds are a layer, not a move: one bed at a time, under foreground primitives.
+- `text-spectral-rays` is the hero wordmark treatment; do not stack another visible copy of the same word on top.

package/assets/.agent/skills/music-to-video/references/motion-primitives/3d-card-flip/index.html

@@ -1,154 +1,154 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>18 · 3d_card_flip</title>
-    <script src="../assets/gsap.min.js"></script>
-    <style>
-      :root {
-        --hg-violet: #7c3aed;
-        --hg-violet-2: #a855f7;
-        --hg-bg: #0a0a0f;
-        --hg-fg: #f5f5fa;
-        --hg-dim: #6b6b78;
-      }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        margin: 0;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: var(--hg-bg);
-        font-family: "Inter", system-ui, sans-serif;
-        color: var(--hg-fg);
-        -webkit-font-smoothing: antialiased;
-      }
-      #scene {
-        position: absolute;
-        inset: 0;
-        width: 1920px;
-        height: 1080px;
-      }
-      .card-stage {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        perspective: 2400px;
-      }
-      .card {
-        position: relative;
-        width: 1000px;
-        height: 580px;
-        transform-style: preserve-3d;
-        will-change: transform;
-      }
-      .face {
-        position: absolute;
-        inset: 0;
-        backface-visibility: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: 900;
-        font-size: 200px;
-        letter-spacing: -0.04em;
-        border-radius: 24px;
-        box-shadow:
-          0 40px 80px rgba(0, 0, 0, 0.5),
-          0 0 0 1px rgba(255, 255, 255, 0.08) inset;
-      }
-      .face.front {
-        background: linear-gradient(135deg, #1e1b3a 0%, #0a0a0f 100%);
-        color: var(--hg-fg);
-      }
-      .face.back {
-        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 60%, #d946ef 100%);
-        color: var(--hg-fg);
-        transform: rotateY(180deg);
-      }
-      .face .meta {
-        position: absolute;
-        top: 36px;
-        left: 40px;
-        font-family: "JetBrains Mono", monospace;
-        font-weight: 600;
-        font-size: 18px;
-        letter-spacing: 0.16em;
-        opacity: 0.6;
-      }
-      .card-shadow {
-        position: absolute;
-        left: 50%;
-        bottom: 22%;
-        width: 1000px;
-        height: 80px;
-        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, transparent 70%);
-        transform: translateX(-50%);
-        filter: blur(12px);
-        will-change: opacity, transform;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="root"
-      data-composition-id="main"
-      data-start="0"
-      data-duration="2"
-      data-width="1920"
-      data-height="1080"
-    >
-      <div id="scene" class="clip" data-start="0" data-duration="2" data-track-index="1">
-        <div class="card-shadow"></div>
-        <div class="card-stage">
-          <div class="card" id="card">
-            <div class="face front">
-              <div class="meta">v4 · CURRENT</div>
-              PRODUCT
-            </div>
-            <div class="face back">
-              <div class="meta">v5 · LAUNCH</div>
-              v5.0
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <script>
-      window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-
-      tl.fromTo(
-        "#card",
-        { rotateY: 0, scale: 0.92, opacity: 0 },
-        { rotateY: 0, scale: 1, opacity: 1, duration: 0.45, ease: "power3.out" },
-        0.15,
-      );
-
-      // Hold then flip
-      tl.to("#card", { rotateY: 180, duration: 1.0, ease: "power3.inOut" }, 0.7);
-
-      // Shadow squishes mid-flip
-      tl.to(
-        ".card-shadow",
-        { scaleX: 0.6, opacity: 0.4, duration: 0.5, ease: "power2.inOut" },
-        0.7,
-      );
-      tl.to(".card-shadow", { scaleX: 1, opacity: 0.7, duration: 0.5, ease: "power2.inOut" }, 1.2);
-
-      // Tiny landing settle
-      tl.to("#card", { scale: 1.02, duration: 0.12, ease: "power2.out" }, 1.68);
-      tl.to("#card", { scale: 1, duration: 0.3, ease: "elastic.out(1, 0.5)" }, 1.8);
-
-      window.__timelines["main"] = tl;
-    </script>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>18 · 3d_card_flip</title>
+    <script src="../assets/gsap.min.js"></script>
+    <style>
+      :root {
+        --hg-violet: #7c3aed;
+        --hg-violet-2: #a855f7;
+        --hg-bg: #0a0a0f;
+        --hg-fg: #f5f5fa;
+        --hg-dim: #6b6b78;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--hg-bg);
+        font-family: "Inter", system-ui, sans-serif;
+        color: var(--hg-fg);
+        -webkit-font-smoothing: antialiased;
+      }
+      #scene {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+      .card-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        perspective: 2400px;
+      }
+      .card {
+        position: relative;
+        width: 1000px;
+        height: 580px;
+        transform-style: preserve-3d;
+        will-change: transform;
+      }
+      .face {
+        position: absolute;
+        inset: 0;
+        backface-visibility: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 900;
+        font-size: 200px;
+        letter-spacing: -0.04em;
+        border-radius: 24px;
+        box-shadow:
+          0 40px 80px rgba(0, 0, 0, 0.5),
+          0 0 0 1px rgba(255, 255, 255, 0.08) inset;
+      }
+      .face.front {
+        background: linear-gradient(135deg, #1e1b3a 0%, #0a0a0f 100%);
+        color: var(--hg-fg);
+      }
+      .face.back {
+        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 60%, #d946ef 100%);
+        color: var(--hg-fg);
+        transform: rotateY(180deg);
+      }
+      .face .meta {
+        position: absolute;
+        top: 36px;
+        left: 40px;
+        font-family: "JetBrains Mono", monospace;
+        font-weight: 600;
+        font-size: 18px;
+        letter-spacing: 0.16em;
+        opacity: 0.6;
+      }
+      .card-shadow {
+        position: absolute;
+        left: 50%;
+        bottom: 22%;
+        width: 1000px;
+        height: 80px;
+        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, transparent 70%);
+        transform: translateX(-50%);
+        filter: blur(12px);
+        will-change: opacity, transform;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="2"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="scene" class="clip" data-start="0" data-duration="2" data-track-index="1">
+        <div class="card-shadow"></div>
+        <div class="card-stage">
+          <div class="card" id="card">
+            <div class="face front">
+              <div class="meta">v4 · CURRENT</div>
+              PRODUCT
+            </div>
+            <div class="face back">
+              <div class="meta">v5 · LAUNCH</div>
+              v5.0
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      tl.fromTo(
+        "#card",
+        { rotateY: 0, scale: 0.92, opacity: 0 },
+        { rotateY: 0, scale: 1, opacity: 1, duration: 0.45, ease: "power3.out" },
+        0.15,
+      );
+
+      // Hold then flip
+      tl.to("#card", { rotateY: 180, duration: 1.0, ease: "power3.inOut" }, 0.7);
+
+      // Shadow squishes mid-flip
+      tl.to(
+        ".card-shadow",
+        { scaleX: 0.6, opacity: 0.4, duration: 0.5, ease: "power2.inOut" },
+        0.7,
+      );
+      tl.to(".card-shadow", { scaleX: 1, opacity: 0.7, duration: 0.5, ease: "power2.inOut" }, 1.2);
+
+      // Tiny landing settle
+      tl.to("#card", { scale: 1.02, duration: 0.12, ease: "power2.out" }, 1.68);
+      tl.to("#card", { scale: 1, duration: 0.3, ease: "elastic.out(1, 0.5)" }, 1.8);
+
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>