dsh-hyperframes 0.3.1 → 0.4.0

package/skills/music-to-video/SKILL.md

@@ -3,13 +3,15 @@ name: music-to-video
 description: "Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes."
 ---
 
+**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.
+
 > **First, keep this skill fresh — confirm with the user before running:** `npx hyperframes skills update music-to-video`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
 
 # music-to-video — one music-grounded, beat-synced video workflow
 
 Use this skill to turn a **music track** into a beat-synced HyperFrames video. You analyze the track once, lay out the frames, fill in a per-frame plan, and build each frame as a composition. The input is a music track plus optional user images or videos — there is **no narration and no website capture**. Typography and templates are the floor (a complete video needs zero assets); any media the user supplies is cut in on the same beat grid.
 
-You are the **orchestrator**. Work in `videos/<project>/`. Run the steps in order and pass each **Gate** before moving on. Two steps need the user: **Step 3** (plan approval) and **Step 6** (render approval) — both are checkpoint gates per `../hyperframes-core/references/brief-contract.md` (read it before Step 0): in autonomous mode, post the summary as a heads-up and proceed instead of waiting. Do every step yourself except **Step 4**, where you dispatch **one sub-agent per frame**. Keep design and motion rules out of this file — they live in `references/` and the `frame-worker` sub-agent.
+You are the **orchestrator**. Work in `videos/<project>/`. Run the steps in order and pass each **Gate** before moving on. Two steps need the user: **Step 3** (plan approval) and **Step 6** (render approval) — both are checkpoint gates per `../hyperframes/references/brief-contract.md` (read it before Step 0): in autonomous mode, post the summary as a heads-up and proceed instead of waiting. Do every step yourself except **Step 4**, where you dispatch **one sub-agent per frame**. Keep design and motion rules out of this file — they live in `references/` and the `frame-worker` sub-agent.
 
 `SKILL_DIR` = this skill directory. `PROJECT_DIR` = `videos/<project-name>/`.
 
@@ -91,14 +93,14 @@ Goal: Turn the skeleton into an approved, complete `STORYBOARD.md`.
 Read [`references/planning.md`](references/planning.md), [`storyboard-format.md`](references/storyboard-format.md), [`template-catalog.md`](references/template-catalog.md), [`motion-primitive-catalog.md`](references/motion-primitive-catalog.md), and [`montage.md`](references/montage.md) (only if the user supplied assets). Editing the same file in place, do two things:
 
 1. **Pick the brand.** Choose one preset from `../hyperframes-creative/frame-presets/` using the table in `../hyperframes-creative/references/design-spec.md` (match the track's mood; **only its fonts and colors matter** — templates own composition). Copy it into `frame.md` **unmodified** and fill the frontmatter `style` (font + a ≤4–6 swatch palette) from it.
-2. **Fill every frame.** Decide its groups and give each a treatment: a matched template from the catalog (with bound params and real audiomap anchors), a free-compose from the primitive catalog, or an asset treatment that **obeys `pacing`**. Write the copy. You own WHAT (template / primitives + content + anchors); the frame-worker owns HOW — **never write millisecond tweens into the storyboard**.
+2. **Fill every frame.** Decide its groups and give each a treatment: a matched template from the catalog (with bound params and real audiomap anchors), a free-compose from the primitive catalog, or an asset treatment that **obeys `pacing`**. **Before you free-compose a named look, search the live catalog for it**: for every look, effect, treatment or transition the user asked for — "CRT scanlines", "glitch", "film grain", "shimmer sweep" — run `npx hyperframes catalog --query "<the look, in plain English>" --json` and read the top results. `template-catalog.md` and `motion-primitive-catalog.md` list only this skill's own local materials; the search ranks the whole hosted registry (~400 blocks and components) and needs **nothing installed** — no project, no prior `add`, no account. Free-compose a look only after a search for it came back with nothing that fits. Write the copy. You own WHAT (template / primitives + content + anchors); the frame-worker owns HOW — **never write millisecond tweens into the storyboard**.
 
 ```bash
 node <SKILL_DIR>/scripts/validate-plan.mjs --storyboard "$PROJECT_DIR/STORYBOARD.md" \
   --audiomap "$PROJECT_DIR/audiomap.json" --templates <SKILL_DIR>/references/templates
 ```
 
-Fix every `✗` (hard errors: duration mismatch, frames not tiling the track, a missing `src`); warnings are best-effort. Then show the user a frame-by-frame summary and iterate until they approve. In autonomous mode this is a checkpoint gate: post the summary as a heads-up and proceed (the `validate-plan.mjs` pass is a quality gate and still blocks).
+Fix every `✗` (hard errors: duration mismatch, frames not tiling the track, a missing `src`); warnings are best-effort. Then present the frame-by-frame summary in chat as a proposal (`../hyperframes/references/review-loop.md` § 1) and iterate on the user's replies until they approve; for `storyboard: yes`, also write it as `storyboard.html` (`../hyperframes-creative/references/storyboard-recipe.md` § 3) for them to open. In autonomous mode this is a checkpoint gate: post the summary as a heads-up and proceed (the `validate-plan.mjs` pass is a quality gate and still blocks).
 
 **Gate:** `frame.md` is a verbatim preset copy; `validate-plan.mjs` exits 0; the user approved the plan (autonomous: the summary was posted as a heads-up).
 
@@ -108,7 +110,7 @@ Fix every `✗` (hard errors: duration mismatch, frames not tiling the track, a
 
 Goal: Build every frame as a self-contained composition file.
 
-Create `compositions/frames/`. Read [`sub-agents/frame-worker.md`](sub-agents/frame-worker.md) and `../hyperframes-core/references/subagent-dispatch.md`. Dispatch **one frame-worker per frame**, in parallel where possible (otherwise in waves). Each worker gets exactly one frame and this context:
+Create `compositions/frames/`. Read [`sub-agents/frame-worker.md`](sub-agents/frame-worker.md) and `../hyperframes/references/subagent-dispatch.md`. Dispatch **one frame-worker per frame**, in parallel where possible (otherwise in waves). Each worker gets exactly one frame and this context:
 
 ```text
 PROJECT_DIR: <abs path>
@@ -191,7 +193,7 @@ Inspect at `t=0`, each frame start, the strongest DROP / SURGE, every `hard_stop
 | [`references/motion-primitive-catalog.md`](references/motion-primitive-catalog.md)                             | Step 3/4: L0 recipes for free-compose                   |
 | [`references/montage.md`](references/montage.md)                                                               | Step 3/4: asset treatments (beat-cut / ken-burns)       |
 | [`sub-agents/frame-worker.md`](sub-agents/frame-worker.md)                                                     | Step 4: dispatch + build one frame                      |
-| `../hyperframes-core/references/subagent-dispatch.md`                                                          | Step 4: dispatch sub-agents safely                      |
+| `../hyperframes/references/subagent-dispatch.md`                                                               | Step 4: dispatch sub-agents safely                      |
 | `../hyperframes-creative/references/design-spec.md`                                                            | Step 3: pick the preset (the brand)                     |
 
 ## Directory layout
@@ -202,7 +204,7 @@ music-to-video/
   references/   frame-skeleton.md · planning.md · storyboard-format.md
                 template-catalog.md · motion-primitive-catalog.md · montage.md
                 templates/<id>/          { index.html (+ assets/ · program.json) }  ← L1 catalog impls
-                motion-primitives/<id>/  { index.html } (+ ../assets/gsap.min.js shared by recipes) ← L0 catalog impls
+                motion-primitives/<id>/  { index.html (mounts the scene), scene.html (the sub-composition) } (+ ../assets/gsap.min.js shared by recipes) ← L0 catalog impls
   scripts/      analyze-beatgrid.py · assemble-index.mjs · validate-plan.mjs · stage-assets.mjs · lib/storyboard.mjs
   sub-agents/   frame-worker.md   ← the one subagent (one per frame)
 ```

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

@@ -16,9 +16,7 @@ The asset-driven analogue of a per-onset typographic group: cut to a new clip on
 (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).
+crossfade the outgoing content to `opacity:0` ending **at** the next anchor.
 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)
@@ -52,7 +50,6 @@ bed. Use when the user wants their footage present but the message must stay rea
 ## 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 +
+`<audio>` mounted at the **root** by the assembler, with the BGM ducked under it (a
+`data-automation` volume lane on the BGM, see `creator-editing-recipes.md` in `hyperframes-core`). The frame-worker mounts no audio. Keep clips muted in v1; wire clip-audio +
 ducking only when the user asks.

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

@@ -13,11 +13,6 @@
         --hg-fg: #f5f5fa;
         --hg-dim: #6b6b78;
       }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
       html,
       body {
         margin: 0;
@@ -29,72 +24,6 @@
         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>
@@ -106,49 +35,19 @@
       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
+        id="scene"
+        class="clip"
+        data-composition-id="3d-card-flip"
+        data-composition-src="scene.html"
+        data-start="0"
+        data-duration="2"
+        data-track-index="1"
+      ></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;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

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

@@ -0,0 +1,119 @@
+<template id="3d-card-flip-template">
+  <div data-composition-id="3d-card-flip" data-width="1920" data-height="1080" data-duration="2">
+    <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;
+      }
+      .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>
+    <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>
+    <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["3d-card-flip"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/bg-flow-field/index.html

@@ -1,15 +1,5 @@
 <!doctype html>
-<html
-  lang="en"
-  data-composition-variables='[
-    {"id":"bgColor",    "type":"color",  "label":"Page background",       "default":"#050507"},
-    {"id":"colorLow",   "type":"color",  "label":"Flow — shadow tone",    "default":"#0a1430"},
-    {"id":"colorMid",   "type":"color",  "label":"Flow — mid tone",       "default":"#6a6f9e"},
-    {"id":"colorHigh",  "type":"color",  "label":"Flow — highlight tone", "default":"#e8f0ff"},
-    {"id":"accentColor","type":"color",  "label":"Core / glow accent",    "default":"#aee4ff"},
-    {"id":"flowSpeed",  "type":"number", "label":"Flow speed", "default":1, "min":0.1, "max":3, "step":0.1}
-  ]'
->
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
@@ -23,11 +13,6 @@
         --hg-fg: #f5f5fa;
         --hg-dim: #6b6b78;
       }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
       html,
       body {
         margin: 0;
@@ -39,31 +24,6 @@
         color: var(--hg-fg);
         -webkit-font-smoothing: antialiased;
       }
-      #scene {
-        position: absolute;
-        inset: 0;
-        width: 1920px;
-        height: 1080px;
-      }
-      .field {
-        position: absolute;
-        inset: 0;
-        width: 1920px;
-        height: 1080px;
-        display: block;
-      }
-      .label {
-        position: absolute;
-        left: 48px;
-        bottom: 40px;
-        font-size: 22px;
-        font-weight: 600;
-        letter-spacing: 0.18em;
-        text-transform: uppercase;
-        color: rgba(255, 255, 255, 0.7);
-        mix-blend-mode: screen;
-        pointer-events: none;
-      }
     </style>
   </head>
   <body>
@@ -75,252 +35,19 @@
       data-width="1920"
       data-height="1080"
     >
-      <div id="scene" class="clip" data-start="0" data-duration="4" data-track-index="1">
-        <canvas class="field" width="1920" height="1080"></canvas>
-        <div class="label">bg_flow_field</div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="bg-flow-field"
+        data-composition-src="scene.html"
+        data-start="0"
+        data-duration="4"
+        data-track-index="1"
+      ></div>
     </div>
     <script>
       window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-
-      // ── Variables (palette + speed); falls back to defaults standalone ──
-      const defaults = {
-        bgColor: "#050507",
-        colorLow: "#0a1430",
-        colorMid: "#6a6f9e",
-        colorHigh: "#e8f0ff",
-        accentColor: "#aee4ff",
-        flowSpeed: 1,
-      };
-      const vars = Object.assign(
-        {},
-        defaults,
-        window.__hyperframes && window.__hyperframes.getVariables
-          ? window.__hyperframes.getVariables()
-          : {},
-      );
-
-      // sRGB hex -> linear-light [r,g,b] (shader works in linear, gamma-encodes at end)
-      function hexLin(hex) {
-        let h = String(hex).replace("#", "").trim();
-        if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
-        const r = parseInt(h.substr(0, 2), 16) / 255;
-        const g = parseInt(h.substr(2, 2), 16) / 255;
-        const b = parseInt(h.substr(4, 2), 16) / 255;
-        const lin = (c) => Math.pow(c, 2.2);
-        return [lin(r), lin(g), lin(b)];
-      }
-
-      const canvas = document.querySelector(".field");
-      const gl = canvas.getContext("webgl", {
-        antialias: false,
-        alpha: false,
-        preserveDrawingBuffer: true,
-      });
-
-      const VERT = [
-        "attribute vec2 position;",
-        "varying vec2 vUv;",
-        "void main(){",
-        "  vUv = position * 0.5 + 0.5;",
-        "  gl_Position = vec4(position, 0.0, 1.0);",
-        "}",
-      ].join("\n");
-
-      // Curl-noise flow field — ported verbatim from the held-message-living-field
-      // template's "living field" background. All visible state comes from uniforms.
-      const FRAG = [
-        "precision highp float;",
-        "varying vec2 vUv;",
-        "uniform float uTime;",
-        "uniform float uPhase;",
-        "uniform float uReveal;",
-        "uniform float uChromAb;",
-        "uniform float uVignette;",
-        "uniform float uIntensity;",
-        "uniform float uSpeed;",
-        "uniform vec2  uResolution;",
-        "uniform vec3  uColLow;",
-        "uniform vec3  uColMid;",
-        "uniform vec3  uColHigh;",
-        "uniform vec3  uAccent;",
-        "float hash21(vec2 p){",
-        "  p = fract(p * vec2(123.34, 456.21));",
-        "  p += dot(p, p + 45.32);",
-        "  return fract(p.x * p.y);",
-        "}",
-        "float noise2(vec2 p){",
-        "  vec2 i = floor(p);",
-        "  vec2 f = fract(p);",
-        "  vec2 u = f * f * (3.0 - 2.0 * f);",
-        "  float a = hash21(i);",
-        "  float b = hash21(i + vec2(1.0, 0.0));",
-        "  float c = hash21(i + vec2(0.0, 1.0));",
-        "  float d = hash21(i + vec2(1.0, 1.0));",
-        "  return mix(mix(a,b,u.x), mix(c,d,u.x), u.y);",
-        "}",
-        "float fbm(vec2 p){",
-        "  float v = 0.0;",
-        "  float a = 0.5;",
-        "  for(int i=0;i<5;i++){",
-        "    v += a * noise2(p);",
-        "    p *= 2.02;",
-        "    a *= 0.5;",
-        "  }",
-        "  return v;",
-        "}",
-        "vec2 curl(vec2 p, float t){",
-        "  float e = 0.6;",
-        "  float n1 = fbm(p + vec2(0.0,  e) + t*0.18);",
-        "  float n2 = fbm(p + vec2(0.0, -e) + t*0.18);",
-        "  float n3 = fbm(p + vec2( e, 0.0) + t*0.18);",
-        "  float n4 = fbm(p + vec2(-e, 0.0) + t*0.18);",
-        "  return vec2(n1 - n2, -(n3 - n4));",
-        "}",
-        "vec3 palette(float t){",
-        "  t = clamp(t, 0.0, 1.0);",
-        "  vec3 lowMid = mix(uColLow, uColMid, smoothstep(0.0, 0.5, t));",
-        "  return mix(lowMid, uColHigh, smoothstep(0.5, 1.0, t));",
-        "}",
-        "vec3 sampleField(vec2 uv, float t, float energy){",
-        "  vec2 p = (uv - 0.5) * vec2(uResolution.x/uResolution.y, 1.0) * 2.4;",
-        "  vec2 c = curl(p * 0.9, t);",
-        "  vec2 q = p + c * (0.45 + 0.55 * energy);",
-        "  float flow = fbm(q * 1.6 + vec2(t * 0.11, -t * 0.07));",
-        "  float bands = sin(flow * 14.0 + t * 1.1);",
-        "  bands = smoothstep(0.0, 1.0, 0.5 + 0.5 * bands);",
-        "  float r = length(p);",
-        "  float core = smoothstep(1.5, 0.05, r) * (0.6 + 0.4 * energy);",
-        "  float glow = exp(-r * 1.6) * (0.55 + 0.45 * energy);",
-        "  float k = clamp(flow * 0.85 + 0.15 * bands + 0.25 * core + 0.6 * glow, 0.0, 1.4);",
-        "  vec3 col = palette(k * 0.9 + 0.1 * sin(t * 0.4));",
-        "  col *= 0.7 + 0.6 * energy;",
-        "  col += uAccent * core * 0.55;",
-        "  return col;",
-        "}",
-        "void main(){",
-        "  vec2 uv = vUv;",
-        "  float t = uTime * uSpeed;",
-        "  float e = uIntensity;",
-        "  vec2 dir = normalize(uv - 0.5 + 1e-6);",
-        "  float ca = uChromAb * (0.004 + 0.012 * length(uv - 0.5));",
-        "  vec3 cR = sampleField(uv + dir * ca, t, e);",
-        "  vec3 cG = sampleField(uv,            t, e);",
-        "  vec3 cB = sampleField(uv - dir * ca, t, e);",
-        "  vec3 col = vec3(cR.r, cG.g, cB.b);",
-        "  float lum = dot(col, vec3(0.299, 0.587, 0.114));",
-        "  col = mix(vec3(lum), col, 1.05);",
-        "  float rev = uReveal;",
-        "  float sweep = smoothstep(0.0, 0.6, rev) * (1.0 - smoothstep(0.6, 1.0, rev));",
-        "  col += uColHigh * sweep * 0.35;",
-        "  vec3 phaseTint = mix(vec3(0.85, 0.92, 1.05), vec3(1.05, 0.95, 0.85), uPhase);",
-        "  col *= phaseTint;",
-        "  float v = length(uv - 0.5);",
-        "  col *= 1.0 - smoothstep(0.45, 0.95, v) * uVignette;",
-        "  col = col / (col + 1.0);",
-        "  col = pow(col, vec3(1.0/2.2));",
-        "  gl_FragColor = vec4(col, 1.0);",
-        "}",
-      ].join("\n");
-
-      function compile(type, src) {
-        const s = gl.createShader(type);
-        gl.shaderSource(s, src);
-        gl.compileShader(s);
-        return s;
-      }
-      const prog = gl.createProgram();
-      gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));
-      gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));
-      gl.linkProgram(prog);
-      gl.useProgram(prog);
-
-      // full-screen triangle
-      const buf = gl.createBuffer();
-      gl.bindBuffer(gl.ARRAY_BUFFER, buf);
-      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
-      const posLoc = gl.getAttribLocation(prog, "position");
-      gl.enableVertexAttribArray(posLoc);
-      gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
-      gl.viewport(0, 0, 1920, 1080);
-
-      const L = (n) => gl.getUniformLocation(prog, n);
-      const uLoc = {
-        uTime: L("uTime"),
-        uPhase: L("uPhase"),
-        uReveal: L("uReveal"),
-        uChromAb: L("uChromAb"),
-        uVignette: L("uVignette"),
-        uIntensity: L("uIntensity"),
-        uSpeed: L("uSpeed"),
-        uResolution: L("uResolution"),
-        uColLow: L("uColLow"),
-        uColMid: L("uColMid"),
-        uColHigh: L("uColHigh"),
-        uAccent: L("uAccent"),
-      };
-
-      // animated uniform state (GSAP tweens these .value fields)
-      const u = {
-        uTime: { value: 0 },
-        uPhase: { value: 0.1 },
-        uReveal: { value: 0 },
-        uChromAb: { value: 0 },
-        uVignette: { value: 0 },
-        uIntensity: { value: 0.3 },
-      };
-      const speed = Number(vars.flowSpeed) || 1;
-      const cLow = hexLin(vars.colorLow);
-      const cMid = hexLin(vars.colorMid);
-      const cHigh = hexLin(vars.colorHigh);
-      const cAcc = hexLin(vars.accentColor);
-
-      function render() {
-        gl.uniform1f(uLoc.uTime, u.uTime.value);
-        gl.uniform1f(uLoc.uPhase, u.uPhase.value);
-        gl.uniform1f(uLoc.uReveal, u.uReveal.value);
-        gl.uniform1f(uLoc.uChromAb, u.uChromAb.value);
-        gl.uniform1f(uLoc.uVignette, u.uVignette.value);
-        gl.uniform1f(uLoc.uIntensity, u.uIntensity.value);
-        gl.uniform1f(uLoc.uSpeed, speed);
-        gl.uniform2f(uLoc.uResolution, 1920, 1080);
-        gl.uniform3fv(uLoc.uColLow, cLow);
-        gl.uniform3fv(uLoc.uColMid, cMid);
-        gl.uniform3fv(uLoc.uColHigh, cHigh);
-        gl.uniform3fv(uLoc.uAccent, cAcc);
-        gl.drawArrays(gl.TRIANGLES, 0, 3);
-      }
-      render(); // initial frame so a seek to 0 / first paint is correct
-
-      // ── Energy-envelope drive (the "living field" breath): all repaint is via
-      // onUpdate, so the field is fully determined by the timeline position — no
-      // requestAnimationFrame, seek-safe. ──
-      tl.eventCallback("onUpdate", render);
-
-      tl.to(u.uTime, { value: 4, duration: 4, ease: "none" }, 0);
-
-      // energy: settle-in → breathe → SURGE → settle dark for the hold
-      tl.to(u.uIntensity, { value: 0.6, duration: 1.2, ease: "sine.inOut" }, 0);
-      tl.to(u.uIntensity, { value: 1.0, duration: 0.7, ease: "power2.in" }, 1.3);
-      tl.to(u.uIntensity, { value: 0.35, duration: 2.0, ease: "power2.out" }, 2.0);
-
-      // chromatic light-leak: light at entry, spikes on the surge, then settles
-      tl.fromTo(u.uChromAb, { value: 0 }, { value: 0.4, duration: 1.2, ease: "sine.in" }, 0);
-      tl.to(u.uChromAb, { value: 1.4, duration: 0.5, ease: "power3.in" }, 1.4);
-      tl.to(u.uChromAb, { value: 0.2, duration: 1.6, ease: "power2.out" }, 1.9);
-
-      // a brief highlight sweep across the surge
-      tl.fromTo(u.uReveal, { value: 0 }, { value: 1, duration: 0.7, ease: "none" }, 1.3);
-      tl.set(u.uReveal, { value: 0 }, 2.0);
-
-      // colour-temperature drift
-      tl.to(u.uPhase, { value: 0.6, duration: 2.2, ease: "sine.inOut" }, 0.6);
-
-      // black mask settles the field to near-black + central glow for the hold
-      tl.to(u.uVignette, { value: 0.85, duration: 1.6, ease: "power2.out" }, 1.9);
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>