dsh-hyperframes 0.9.1 → 0.9.3

package/skills/motion-graphics/categories/webpage/module.md

@@ -1,30 +0,0 @@
-# webpage — category module (search-driven)
-
-**Animate a webpage / link** (the "website animation" use case). Search-driven: the user gives or names a URL → fetch/capture it → animate it (scroll-through, UI reveal, cursor demo, region callouts). Distinct from captioning an existing _video file_ (that's `/embedded-captions`) and from a narrated video _of_ a site (that's a `/product-launch-video` site-tour ask); here the source is a _web page_ and the output is a short, unnarrated highlight shot.
-
-## Source (Step 2)
-
-Fetch the page via `hyperframes capture --json` (DOM + screenshots) or a provided screenshot → frozen project-local image(s)/DOM. `asset_needs`: `{ kind: web, source: <url>, treatment: none }`.
-
-Inspect the capture result before building. If `BLOCKED.md` exists, JSON reports `ok: false`, or the
-command exits non-zero, stop the URL-capture path and report the reason. Continue with a provided
-screenshot only when it was an explicit source from the user (or the user explicitly chooses it
-after the failure). Do not animate a blocked partial capture, invent missing DOM, or eyeball element
-coordinates from protection/challenge pages.
-
-This web need cannot use the generic asset-free fallback: it requires a usable captured screenshot
-or DOM, or a provided screenshot explicitly selected by the user. If none is available, stop.
-
-## Vocabulary / leans on
-
-- Rules: `hyperframes-animation/rules/{3d-page-scroll, demo-page-scroll-spotlight, cursor-click-ripple, coordinate-target-zoom, viewport-change}`.
-- Primitives: scroll pan · spotlight/dim · cursor move + click-ripple · zoom-to-region · callout pin + label.
-
-## Build (reuse-first)
-
-Place the captured page as the base layer; animate a **scroll-through** (translateY over the page height), **spotlight** key regions (dim + highlight), a **cursor** that moves and clicks (ripple), **zoom** to a coordinate, and **callout** pins/labels anchored to page regions. Honor `builder-contract.md`.
-
-**Two rules that match the news article-highlight (see `../news/module.md`):**
-
-- **Highlights are swept/animated ON, never pre-applied** — a spotlight box wipes in (`scaleX 0→1`), a marker sweeps a region, a callout pops _after_ the zoom lands; the page never starts pre-annotated.
-- **Anchor to REAL element positions** — `hyperframes capture` gives the page HTML/DOM, so measure the target element (`getBoundingClientRect` → stage-local) and zoom/highlight it exactly, step-by-step (the "highlight a real element" technique). Don't eyeball coords.

package/skills/motion-graphics/grounding/PROTOCOL.md

@@ -1,64 +0,0 @@
-# locate — find "X" in an image (no detector API assumed)
-
-The single contract every consumer (asset-fusion ring, webpage highlight, future
-explainer/recut overlays) uses:
-
-```
-locate(image, target-description) → { box: [x0,y0,x1,y1], center: [cx,cy] }   # normalized 0..1
-```
-
-## Why this exists
-
-Author models are unreliable at **regressing pixel coordinates** on a cluttered
-full image (measured: weak vision models ~16–24% center error → rings land off-target)
-but reliable at **picking a numbered strip** (~3–4% with the loop below). So:
-never eyeball coordinates; localize by discrete choice. (RSVP, ACL 2025.)
-
-## Routing — pick the cheapest path that's actually available
-
-1. **A strong detector is available** (e.g. `GEMINI_API_KEY` in env) →
-   `node grounding/locate.mjs auto <img> "<target>"` — one call, done.
-   **Never assume the key exists.** No key → path 2.
-2. **No detector (the normal case)** → YOU are the localizer; run the grid loop.
-
-## The grid loop (you read images between steps)
-
-```
-node grounding/locate.mjs overlay <img> --out /tmp/g
-  → READ /tmp/g/gv.png (vertical strips 1-9) and gh.png (horizontal 1-9);
-    decide which strip numbers the target spans (list EVERY strip it touches).
-node grounding/locate.mjs region <img> --vids 4,5 --hids 6,7 --out /tmp/g
-  → READ /tmp/g/gc.png (the region cropped + upscaled, finer 6×6 grid);
-    pick the finer strips. (Pick strips again — do NOT switch to estimating
-    coordinates; discrete choice is the whole point, at BOTH stages.)
-node grounding/locate.mjs final <img> --region <from step 2> --vids 3,4 --hids 3,4
-  → the final {box, center}.
-node grounding/locate.mjs mark <img> --box <final box> --out /tmp/g/check.png
-  → VERIFY: READ check.png. Red box ON the target → done. Off → redo
-    region/final with corrected strips (you now know which direction). Never
-    skip this step; it converts silent misses into one cheap retry.
-```
-
-## Ambiguity — resolve BEFORE localizing
-
-If the target description can match several instances ("a drum" when the scene
-has five), no geometry will save you. First make the reference unique
-("the right-most drum", "the drum on the front boat"), asking the user if
-needed — then run the loop.
-
-## Degradation path (if locate.mjs itself is unavailable)
-
-The idea is 5 lines — reproduce it with any image tool:
-draw a numbered 9×9 grid → pick the strips the target spans → crop that region
-(+pad ~0.4 strip) and upscale → draw a finer 6×6 grid → pick again → map back
-(`global = region_origin + local × region_size`) → draw the box and LOOK at it.
-
-## Notes
-
-- Geometry is frozen in `locate.mjs` (node + ffmpeg, zero npm deps — both
-  already required by hyperframes). Don't re-implement it ad hoc; the measured
-  accuracy holds for THIS implementation.
-- Consumers: `samples/asset-fusion/_ref-circle-highlight.html` takes `CFG.box`
-  directly from `final`/`auto` output.
-- Measured end-to-end (same agent, same template, only the localization step
-  differs): eyeballing 6.5% avg center error → this protocol 2.3%, no case worse.

package/skills/motion-graphics/phases/source/guide.md

@@ -1,21 +0,0 @@
-# source phase — asset sourcing (asset-first)
-
-Runs **only when `shot-plan.json.asset_needs` is non-empty** (the form categories never reach here). Sources each needed asset → a **frozen project-local path** + a ledger (`assets/index.md`). Uses `/media-use` (capture / asset prep) plus, **when an external asset-search skill such as media-use is installed**, its `resolve` step. If no such search capability is available, it **degrades to asset-free** (see below).
-
-## Per asset_need
-
-- `image / icon / logo / svg` → media-use `resolve`: **search** (asset_scout: Google Images / SerpAPI + Noun Project), **generate** (image model), or **user-supplied** (logo). Optional `treatment`: cutout (remove-bg) / recolor / vectorize.
-- `news / web / tweet` → **RWA-style search** (media-use's documented lineage — `media-use/references/search-strategy.md` traces `resolve` to the RWA subagent). Two-pole queries: **atomic** (1–3 words, composable) or **specific** (5–15 words: a news event / tweet); never the middle. A failed specific query is dropped, not broadened.
-
-## Steps
-
-1. Read `asset_needs` from `shot-plan.json`.
-2. For each: **analyze → search → review (use/maybe/reject — selection is the hard part; do NOT take the first/generated result) → freeze** the kept asset into `assets/` (rehost remote URLs).
-3. Write `assets/index.md` — agent-readable ledger: `role → frozen path + provenance`.
-4. For `asset-fusion`: also capture the asset's measurable geometry (so Director Part 2 can set `element_positions`) + an eyedropper palette.
-
-## Degrade gracefully
-
-If a provider / search is unavailable, mark the need unmet in `context.log`; the category falls back to asset-free where possible (e.g. `news` → typographic headline without the sourced image).
-
-> Illustrative: `(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)` — or drive media-use's `resolve` procedure directly.

package/skills/motion-graphics/references/builder-contract.md

@@ -1,38 +0,0 @@
-# Builder contract — composition rules (detail behind agents/builder.md)
-
-## Root must be sized
-
-Root `#stage` (`data-composition-id`) needs `position: relative; width: <W>px; height: <H>px`. Without a resolved height, flex children collapse to ~0 and content piles into the top-left. Automated gates may miss it, so inspect proof snapshots.
-
-## Layout before animation
-
-1. Identify the **hero frame** (the moment most elements are visible) → build THAT in static CSS first, no GSAP.
-2. `.scene-content` fills the scene with padding, not offsets:
-   ```css
-   display: flex;
-   flex-direction: column;
-   justify-content: center;
-   width: 100%;
-   height: 100%;
-   padding: 120px 160px;
-   gap: 24px;
-   box-sizing: border-box;
-   ```
-   Never `position:absolute; top:Npx` on a content container (it overflows). Reserve absolute for decoratives. Keep ≥80px padding (title-safe margin).
-3. **Entrances**: use `gsap.from()` only for a non-clip element active from `t=0`. Inside `.clip`, in sub-compositions, and for later entrances, use explicit `fromTo()`. The CSS position is ground truth; the tween is the journey to it.
-4. **Exits**: only the final scene animates elements out; between scenes the transition IS the exit.
-
-## Timeline / clip contract
-
-- ONE `gsap.timeline({paused:true})` on `window.__timelines["<id>"]`; `tl.seek(0)`; never `tl.play()`.
-- Timed elements: `class="clip"` + `data-start`/`data-duration`/`data-track-index` + a stable `id`. Timeline-driven groups inside one full-duration clip don't each need timing attrs.
-- Deterministic only — no `Date.now()` / `Math.random()` / network. Count-ups tween a proxy object via `onUpdate` (seek-safe), never a wall-clock counter.
-
-## Correctness
-
-- **Seek-safe reveal of delayed elements**: on a non-clip element or wrapper inside a clip, use one registered timeline `fromTo()` with an explicit `{ autoAlpha: 0 }` start and `{ autoAlpha: 1, ... }` end. Do not page-load `gsap.set()` a later `.clip`, and never target `.clip` visibility; the framework owns its lifecycle. _(Eval finding.)_
-- **Count-ups** tween a proxy via `onUpdate`; they only render when the host advances the timeline **with events enabled** (`tl.time()` / non-suppressed seek). A bare `seek(t, true)` freezes them at 0 — the HF render host must seek with events on. _(Eval finding.)_
-- Clamp at tween bounds; don't let a spring overshoot past a held value.
-- Allowed eases: `power1–4`, `back`, `bounce`, `circ`, `elastic`, `expo`, `sine` (`.in/.out/.inOut`).
-- One motif per scene. Run `hyperframes check`; mark intentional overflow `data-layout-allow-overflow="true"`.
-- **Palette discipline**: define all colors in one `palette` object / CSS custom properties — no inline hex scattered through the markup (for `asset-fusion`, eyedropper the palette from the asset).

package/skills/motion-graphics/references/motion-vocabulary.md

@@ -1,47 +0,0 @@
-# text module · motion vocabulary (primitive → GSAP)
-
-<!-- registry-items: allow= -->
-
-**The live search is the source of truth for what the registry has.** The table(s) below are a hand-maintained sample and under-cover by design: run `npx hyperframes catalog --query "<what you want>" --json` — it needs nothing installed — before concluding the registry lacks something. Item names here are checked against `registry/registry.json` by `bun run lint:skills`.
-
-Named primitives the Director references in `motion` strings and the Builder implements. `code_hint`s are framework-neutral physics; the GSAP recipe is the HF implementation. Prefer an HF **registry component** (bottom) when one fits — don't reinvent.
-
-## Entry
-
-| primitive                     | GSAP recipe (into CSS end-state)                               | suits                     |
-| ----------------------------- | -------------------------------------------------------------- | ------------------------- |
-| `slide_bottom/top/left/right` | `from({ y:±150 / x:±200, opacity:0, ease:"power4.out" })`      | calm, build, professional |
-| `scale_grow`                  | `from({ scale:0, opacity:0, duration:.6, ease:"power2.out" })` | calm, gentle              |
-| `scale_punch`                 | `from({ scale:.6, opacity:0, ease:"back.out(2.2)" })`          | impact, energetic         |
-| `fade_in`                     | `from({ opacity:0, duration:.4 })`                             | subtle                    |
-| `fade_blur`                   | `from({ opacity:0, filter:"blur(14px)" })`                     | cinematic, dreamy         |
-| `typewriter`                  | reveal via clip/`SplitText` width step                         | technical, narrative      |
-| `word_reveal`                 | per-word `from({opacity:0,y:..}, stagger:.1)`                  | storytelling              |
-| `wave`                        | per-letter `from({y:..}, stagger:{each:.04})`                  | flowing, musical          |
-| `bounce_in`                   | `from({y:-120}, ease:"bounce.out")`                            | playful                   |
-| `slam`                        | `from({ y:-300, ease:"power4.out" })` + shake on land          | impact, heavy             |
-
-## Emphasis (in place, often on a beat)
-
-| primitive     | GSAP recipe                                                          | suits              |
-| ------------- | -------------------------------------------------------------------- | ------------------ |
-| `scale_pulse` | `to({ scale:1.12, yoyo:true, repeat:1, ease:"sine.inOut" })` at beat | rhythmic, peak     |
-| `shake`       | `to({ keyframes:[{x:-9},{x:9},{x:0}], ease:"none" })`                | urgent, intense    |
-| `glow`        | `to({ textShadow:"0 0 46px <ink/accent>", yoyo:true, repeat:1 })`    | important, magical |
-| `color_shift` | `to({ color:"<accent>" })` (or accent on the word in CSS)            | dynamic            |
-
-## Exit
-
-| primitive   | GSAP recipe                                        | suits      |
-| ----------- | -------------------------------------------------- | ---------- |
-| `fade_out`  | `to({ opacity:0, duration:.4, ease:"power2.in" })` | ending     |
-| `slide_out` | `to({ y/x: off, opacity:0, ease:"power2.in" })`    | transition |
-| `scale_out` | `to({ scale:1.06, opacity:0, ease:"power2.in" })`  | transition |
-
-## Accent graphics (not text)
-
-`underline_sweep` `fromTo({scaleX:0},{scaleX:1}, transformOrigin:"left center")` · `bar_wipe` · `hold_breath` `to({scale:1.015, ease:"sine.inOut"})`.
-
-## Prefer HF registry components when they fit
-
-`caption-kinetic-slam` · `caption-editorial-emphasis` · `caption-neon-glow` · `caption-glitch-rgb` · `caption-particle-burst` · `caption-weight-shift` · `caption-matrix-decode` · `caption-pill-karaoke` · `shimmer-sweep`. These are pre-built, in-ecosystem, and already render-tested — the Builder should reach for them before hand-rolling an equivalent.

package/skills/motion-graphics/references/shot-plan-ir.md

@@ -1,54 +0,0 @@
-# shot-plan IR
-
-The single contract between Director and Builder. One file: `PROJECT_DIR/shot-plan.json`.
-
-```jsonc
-{
-  // ── envelope (every category) ──
-  "category": "kinetic-type | stat | charts | logo-reveal | lower-thirds | webpage | news | tweet | asset-fusion",
-  "duration_s": 6,
-  "fps": 30,
-  "canvas": { "w": 1080, "h": 1920, "aspect": "9:16" },
-  "style": "free-form visual direction (mood / energy / reference)",
-  "palette": ["#…"], // or "derive-from-asset"
-  "font": "<HF embed-list font>",
-  "beats": [12, 37], // optional accent frames/seconds
-  "export": "mp4", // or "alpha-overlay" (transparent webm/mov)
-
-  // ── sourcing seam (Director Part 1) — [] means skip the source phase ──
-  "asset_needs": [
-    {
-      "role": "hero",
-      "kind": "image|icon|logo|svg|news|web|tweet",
-      "query": "…",
-      "source": "…",
-      "treatment": "cutout|recolor|vectorize|none",
-    },
-  ],
-
-  // ── build directive (Director Part 2, reuse-first) ──
-  "block": "<catalog block id, e.g. data-chart | caption-kinetic-slam>", // optional
-  "customize": {
-    /* what to change on the block: data, text, palette, positions */
-  },
-
-  // ── category-specific content ──
-  "content": {
-    /* shape varies by category, below */
-  },
-}
-```
-
-**Per-category `content` shapes:**
-
-- `kinetic-type` → `scenes[]` `{ id, start, end, text, emphasis_words[], emotion, motion, beats[] }`
-- `stat` → `{ value, prefix, suffix, label, ring: bool }`
-- `charts` → `{ type: bar|line|pie|race|pct, data[], labels[], headline, axes: bool }`
-- `logo-reveal` → `{ logo: <asset path>, tagline, url }`
-- `lower-thirds` → `{ name, role, position, brand_colors[] }`
-- `webpage` → `{ url, capture, highlights: [ { selector|region, label } ] }` (step-highlight a real captured page)
-- `news` → `{ outlet, headline, body, keyword, layout: A|B, logo?, date?, subject? }` (article-highlight: lay text out readable — **no zoom** — then sweep a marker band over the keyword in place. Layout **A** = centered-emphasis 9:16 text-only; **B** = full article 16:9 with `logo` + `date` + `subject` (a person photo → `remove-background` cutout))
-- `tweet` → `{ author, handle, avatar, text, metrics }`
-- `asset-fusion` → `{ data_type, asset: <path>, affordance, element_positions: {center, extent, safe[], avoid[]}, derived_palette[], connectors[] }`
-
-**Invariants:** `scenes` (if present) partition `[0, duration_s]` with no gaps/overlaps · empty `asset_needs` ⇒ Step 2 (source) is skipped · a named `block` ⇒ the Builder reuses + customizes it rather than hand-authoring.

package/skills/motion-graphics/samples/asset-fusion/_ref-circle-highlight.html

@@ -1,306 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>asset-fusion · circle-highlight TEMPLATE (drop-in)</title>
-    <!-- ============================================================
-         DROP-IN circle-highlight (editorial amber annotation style). To reuse:
-           1) set CFG below (asset path, EVEN stage dims, BOX from the locate protocol, LABEL)
-           2) render with even width/height (ODD width => ffmpeg encode fails!)
-         BOX comes from grounding/PROTOCOL.md (locate.mjs loop) — NEVER eyeball coords.
-         Everything (wash pool, double ring, connector, callout, brackets) is
-         computed from BOX. Set MODE='full' (ring+label+brackets) or 'circle'
-         (ring only). Gotchas are flagged inline.
-         ============================================================ -->
-    <style>
-      :root {
-        --ink: #0a0c10;
-        --amber: #f2c078;
-        --paper: #f5efe6;
-      }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        overflow: hidden;
-        background: var(--ink);
-      }
-      #stage {
-        position: relative;
-        overflow: hidden;
-        background: #fff;
-        font-family:
-          "Inter",
-          -apple-system,
-          system-ui,
-          sans-serif;
-      }
-      .scene {
-        position: absolute;
-        inset: 0;
-      }
-      #shot {
-        position: absolute;
-        inset: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        display: block;
-        z-index: 0;
-      }
-      #wash {
-        position: absolute;
-        inset: 0;
-        z-index: 1;
-      }
-      #ann {
-        position: absolute;
-        inset: 0;
-        z-index: 3;
-        pointer-events: none;
-        overflow: visible;
-      }
-      #ring-a,
-      #ring-b,
-      #conn {
-        stroke: var(--amber);
-        fill: none;
-        stroke-linecap: round;
-      }
-      #ring-a {
-        stroke-width: 8;
-        filter: drop-shadow(0 0 12px rgba(242, 192, 120, 0.5));
-      }
-      #ring-b {
-        stroke-width: 5;
-        opacity: 0.85;
-      }
-      #conn {
-        stroke-width: 5;
-      }
-      #callout {
-        position: absolute;
-        z-index: 4;
-        display: inline-flex;
-        align-items: center;
-        gap: 14px;
-        padding: 15px 28px;
-        background: var(--ink);
-        border: 2px solid var(--amber);
-        border-radius: 999px;
-        box-shadow: 0 14px 40px rgba(8, 9, 12, 0.6);
-        transform-origin: left center;
-      }
-      #callout .dot {
-        width: 12px;
-        height: 12px;
-        border-radius: 50%;
-        background: var(--amber);
-      }
-      #callout .label {
-        font-size: 33px;
-        font-weight: 700;
-        letter-spacing: 0.14em;
-        color: var(--paper);
-        text-transform: uppercase;
-        white-space: nowrap;
-      }
-      .tick {
-        position: absolute;
-        z-index: 5;
-        width: 56px;
-        height: 56px;
-        border: 3px solid var(--paper);
-        opacity: 0.55;
-      }
-      .tick.tl {
-        top: 44px;
-        left: 44px;
-        border-right: none;
-        border-bottom: none;
-      }
-      .tick.tr {
-        top: 44px;
-        right: 44px;
-        border-left: none;
-        border-bottom: none;
-      }
-      .tick.bl {
-        bottom: 44px;
-        left: 44px;
-        border-right: none;
-        border-top: none;
-      }
-      .tick.br {
-        bottom: 44px;
-        right: 44px;
-        border-left: none;
-        border-top: none;
-      }
-      #scan {
-        position: absolute;
-        inset: 0;
-        z-index: 5;
-        pointer-events: none;
-        mix-blend-mode: overlay;
-        background: repeating-linear-gradient(
-          to bottom,
-          rgba(245, 239, 230, 0.05) 0 1px,
-          transparent 1px 4px
-        );
-      }
-    </style>
-  </head>
-  <body>
-    <!-- ⚠ data-width/height + the #stage width/height MUST be set STATICALLY here
-         (the renderer's StaticGuard reads them at compile time, BEFORE JS runs — JS
-         setAttribute is too late and the render falls back to portrait 1080×1920).
-         Keep these EQUAL to CFG.W/CFG.H below, and EVEN. -->
-    <div
-      id="stage"
-      style="width: 1998px; height: 1368px"
-      data-composition-id="circle-highlight"
-      data-start="0"
-      data-duration="6"
-      data-fps="30"
-      data-width="1998"
-      data-height="1368"
-    >
-      <div class="scene clip" data-start="0" data-duration="6" data-track-index="0">
-        <img id="shot" alt="asset" />
-        <div id="wash"></div>
-        <svg id="ann">
-          <ellipse id="ring-a" />
-          <ellipse id="ring-b" />
-          <path id="conn" />
-        </svg>
-        <div id="callout"><span class="dot"></span><span class="label"></span></div>
-        <div id="scan"></div>
-        <span class="tick tl"></span><span class="tick tr"></span><span class="tick bl"></span
-        ><span class="tick br"></span>
-      </div>
-    </div>
-
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <script>
-      // ====== CONFIG — set these (BOX from the locate protocol) ======
-      const CFG = {
-        asset: "assets/shot.png",
-        W: 1998,
-        H: 1368, // EVEN dims (odd width => encode fails)
-        box: [0.244, 0.277, 0.607, 0.425], // [x0,y0,x1,y1] normalized, from locate.mjs
-        label: "HyperFrames",
-        mode: "full", // 'full' = ring+connector+label+brackets+scan ; 'circle' = ring only
-      };
-      // =====================================================
-      const S = document.getElementById("stage"); // dims are STATIC in the HTML above (must equal CFG.W/H)
-      document.getElementById("shot").src = CFG.asset;
-      const ann = document.getElementById("ann");
-      ann.setAttribute("viewBox", `0 0 ${CFG.W} ${CFG.H}`);
-      ann.setAttribute("width", CFG.W);
-      ann.setAttribute("height", CFG.H);
-
-      // geometry from BOX
-      const [x0, y0, x1, y1] = CFG.box;
-      const cx = ((x0 + x1) / 2) * CFG.W,
-        cy = ((y0 + y1) / 2) * CFG.H;
-      const bw = (x1 - x0) * CFG.W,
-        bh = (y1 - y0) * CFG.H;
-      const rxA = bw / 2 + 40,
-        ryA = bh / 2 + 42;
-      // wash: a lit radial pool centered on the box, dark elsewhere
-      const px = (((x0 + x1) / 2) * 100).toFixed(1),
-        py = (((y0 + y1) / 2) * 100).toFixed(1);
-      const ex = (((x1 - x0) / 2) * 1.15 * 100).toFixed(1),
-        ey = (((y1 - y0) / 2) * 1.4 * 100).toFixed(1);
-      document.getElementById("wash").style.background =
-        `radial-gradient(ellipse ${ex}% ${ey}% at ${px}% ${py}%, rgba(8,9,12,0) 0%, rgba(8,9,12,.1) 42%, rgba(8,9,12,.66) 70%, rgba(8,9,12,.9) 100%)`;
-      const ra = document.getElementById("ring-a"),
-        rb = document.getElementById("ring-b");
-      ra.setAttribute("cx", cx);
-      ra.setAttribute("cy", cy);
-      ra.setAttribute("rx", rxA);
-      ra.setAttribute("ry", ryA);
-      ra.setAttribute("transform", `rotate(-4 ${cx} ${cy})`);
-      rb.setAttribute("cx", cx);
-      rb.setAttribute("cy", cy);
-      rb.setAttribute("rx", rxA - 20);
-      rb.setAttribute("ry", ryA - 16);
-      rb.setAttribute("transform", `rotate(3 ${cx} ${cy})`);
-      // callout: above-right of the box (flip left if box is on the right edge)
-      const right = cx < CFG.W * 0.62;
-      const co = document.getElementById("callout");
-      co.querySelector(".label").textContent = CFG.label;
-      const coX = right ? Math.min(cx + rxA + 10, CFG.W - 360) : Math.max(cx - rxA - 360, 30);
-      const coY = Math.max(cy - ryA - 60, 40);
-      co.style.left = coX + "px";
-      co.style.top = coY + "px";
-      const conn = document.getElementById("conn");
-      const ex0 = cx + (right ? rxA * 0.75 : -rxA * 0.75),
-        ey0 = cy - ryA * 0.7;
-      conn.setAttribute(
-        "d",
-        `M ${ex0} ${ey0} C ${(ex0 + coX) / 2} ${ey0 - 50}, ${coX - 20} ${coY + 70}, ${coX + 2} ${coY + 26}`,
-      );
-
-      // ====== seek-safe timeline ======
-      window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-      // GOTCHA: getTotalLength can read 0 before layout -> dash fails -> a solid
-      // line shows at t=0. Fall back to a constant AND gate with autoAlpha:0.
-      const lenA = ra.getTotalLength() || 1900,
-        lenB = rb.getTotalLength() || 1750,
-        lenC = conn.getTotalLength() || 220;
-      const full = CFG.mode === "full";
-      gsap.set("#wash", { autoAlpha: 0 });
-      gsap.set(ra, { strokeDasharray: lenA, strokeDashoffset: lenA, autoAlpha: 0 });
-      gsap.set(rb, { strokeDasharray: lenB, strokeDashoffset: lenB, autoAlpha: 0 });
-      gsap.set(conn, { strokeDasharray: lenC, strokeDashoffset: lenC, autoAlpha: 0 });
-      gsap.set("#callout", { autoAlpha: 0, scale: 0.6 });
-      gsap.set("#scan", { autoAlpha: 0 });
-      gsap.set(".tick", { autoAlpha: 0 });
-      if (!full) {
-        document.getElementById("conn").remove();
-        document.getElementById("callout").remove();
-        document.getElementById("scan").remove();
-        document.querySelectorAll(".tick").forEach((t) => t.remove());
-      }
-
-      tl.to("#wash", { autoAlpha: 1, duration: 0.9, ease: "power2.out" }, 0.6);
-      if (full) {
-        tl.to("#scan", { autoAlpha: 1, duration: 0.8 }, 0.7);
-        tl.to(".tick", { autoAlpha: 0.55, duration: 0.5, stagger: 0.06 }, 0.8);
-      }
-      tl.to(ra, { autoAlpha: 1, duration: 0.08 }, 1.3);
-      tl.to(ra, { strokeDashoffset: 0, duration: 0.6, ease: "power2.inOut" }, 1.3);
-      tl.to(rb, { autoAlpha: 1, duration: 0.08 }, 1.68);
-      tl.to(rb, { strokeDashoffset: 0, duration: 0.5, ease: "power2.inOut" }, 1.68);
-      if (full) {
-        tl.to(conn, { autoAlpha: 1, duration: 0.05 }, 2.55);
-        tl.to(conn, { strokeDashoffset: 0, duration: 0.35, ease: "power3.out" }, 2.6);
-        tl.to("#callout", { autoAlpha: 1, scale: 1, duration: 0.45, ease: "back.out(2.4)" }, 2.95);
-      }
-      window.__timelines["circle-highlight"] = tl;
-      tl.seek(0);
-      if (!window.__HYPERFRAMES_HOST__) {
-        const fit = () => {
-          const s = Math.min(innerWidth / CFG.W, innerHeight / CFG.H) * 0.96;
-          S.style.transform = `scale(${s})`;
-          S.style.transformOrigin = "center center";
-          S.style.position = "absolute";
-          S.style.left = "50%";
-          S.style.top = "50%";
-          S.style.marginLeft = -(CFG.W / 2) + "px";
-          S.style.marginTop = -(CFG.H / 2) + "px";
-        };
-        addEventListener("resize", fit);
-        fit();
-        tl.eventCallback("onComplete", () => setTimeout(() => tl.restart(), 1000));
-        tl.play();
-      }
-    </script>
-  </body>
-</html>