freecodego 0.1.7-alpha.2.2 → 0.1.7-rc.2.2

package/dist/assets/design/skills/hyperframes-animation/rules/ai-tracking-box.md

@@ -0,0 +1,139 @@
+---
+name: ai-tracking-box
+description: Animated bounding box with L-shaped corner markers following an oscillating path — simulates AI object detection / tracking.
+metadata:
+  tags: ai, tracking, bounding-box, detection, corner, yellow, ml
+---
+
+# AI Tracking Box
+
+A bounding box of four L-bracket corners + a confidence label that follows a moving target, simulating real-time AI detection. Rendered in detection yellow (`#facc15` family) on a dark background — the industry convention (AV HUDs, security CV, ML demos); red reads "warning", green "success", blue "info" — none read "detection."
+
+## How It Works
+
+ONE `ease: "none"` driver tween advances a phase `p`; its `onUpdate` computes the TARGET's position from trig, then derives the box's position/size FROM the target — every frame, in that order. The box never gets its own position tween: if it trails the target it reads as a broken tracker, not a smart AI. Size jitters a few percent off-tempo (non-integer frequency multiple) to mimic continuous re-fitting, and the confidence label flickers inside [95, 99].
+
+## Recipe
+
+```html
+<!-- inside a standard scene clip (hyperframes-core) -->
+<div class="bg-mascot" id="mascot">{targetGlyph}</div>
+<div class="track-box" id="track-box">
+  <div class="corner tl"></div>
+  <div class="corner tr"></div>
+  <div class="corner bl"></div>
+  <div class="corner br"></div>
+  <div class="label" id="label">{LABEL} · {confidence}%</div>
+</div>
+```
+
+```css
+.track-box {
+  position: absolute; /* position + size written by the driver's onUpdate */
+  pointer-events: none;
+  will-change: transform, width, height;
+}
+.corner {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+}
+/* Each corner draws only its two outer borders — .tr/.bl/.br mirror this: */
+.corner.tl {
+  top: -8px;
+  left: -8px;
+  border-top: 6px solid {detectionYellow};
+  border-left: 6px solid {detectionYellow};
+}
+.label {
+  position: absolute;
+  top: -56px;
+  left: -8px;
+  background: {detectionYellow};
+  color: {labelTextColor}; /* near-black on yellow */
+  font-family: {monoFont}; /* mono = machine readout */
+  white-space: nowrap;
+}
+```
+
+```js
+const box = document.getElementById("track-box");
+const mascot = document.getElementById("mascot");
+const label = document.getElementById("label");
+const C = { x: COMP_WIDTH / 2, y: COMP_HEIGHT / 2 };
+
+// Entry — the AI "locks on"
+gsap.set(box, { opacity: 0, scale: ENTRY_SCALE });
+tl.to(
+  box,
+  { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: `back.out(${ENTRY_BOUNCE})` },
+  ENTRY_START,
+);
+
+// Tracking — target first, box derived from it, every frame
+const tracking = { p: 0 };
+tl.to(
+  tracking,
+  {
+    p: Math.PI * 2 * CYCLES,
+    duration: TRACK_DUR,
+    ease: "none",
+    onUpdate: () => {
+      const mx = C.x + Math.cos(tracking.p) * DRIFT_X;
+      const my = C.y + Math.sin(tracking.p) * DRIFT_Y;
+      mascot.style.left = `${mx - MASCOT_SIZE / 2}px`;
+      mascot.style.top = `${my - MASCOT_SIZE / 2}px`;
+
+      const w = SIZE_BASE + Math.sin(tracking.p * SIZE_FREQ_MULT) * SIZE_VAR;
+      const h = SIZE_BASE + Math.sin(tracking.p * SIZE_FREQ_MULT + Math.PI / 2) * SIZE_VAR;
+      box.style.width = `${w}px`;
+      box.style.height = `${h}px`;
+      box.style.left = `${mx - w / 2}px`;
+      box.style.top = `${my - h / 2}px`;
+
+      const conf = Math.round(
+        CONFIDENCE_MEAN + Math.sin(tracking.p * CONFIDENCE_FREQ_MULT) * CONFIDENCE_VAR,
+      );
+      label.textContent = `${LABEL_TEXT} · ${conf}%`;
+    },
+  },
+  TRACK_START,
+);
+```
+
+## Variations
+
+- **Multi-object**: one driver per box/target pair, phases offset by `π / N` so they don't tick synchronously.
+- **Lost-then-reacquired**: fade the box to ~0.2–0.4 opacity, then re-snap with a harder `back.out(1.8–2.5)` and flash a "REACQUIRED · 99%" label via `tl.set`.
+- **Tracking-then-zoom**: hand off to [viewport-change.md](viewport-change.md) — "the AI found something, now show it."
+
+## Values
+
+| token                | range              | notes                                                                    |
+| -------------------- | ------------------ | ------------------------------------------------------------------------ |
+| ENTRY_SCALE          | 0.5–0.9            | < 1 — the box snaps UP into focus                                        |
+| ENTRY_DUR / \_BOUNCE | 0.3–0.8s / 1.2–2.5 | `back.out` only — elastic reads cartoonish, power reads flat             |
+| TRACK_START          | ≥ entry end        | a gap = pause for emphasis; none = seamless lock + follow                |
+| TRACK_DUR            | 2–8s               | ≥ one full cycle or the drift never reads as oscillation                 |
+| CYCLES               | 0.5–3              | keep effective rate < ~0.6 Hz or the motion blurs                        |
+| DRIFT_X / DRIFT_Y    | 40–200px           | center ± drift must keep the target fully on screen                      |
+| SIZE_BASE            | 200–500px          | must visibly enclose the target at all jitter sizes                      |
+| SIZE_VAR             | 5–10% of SIZE_BASE | more reads broken, none reads like a screenshot; keep < 0.15×            |
+| SIZE_FREQ_MULT       | 1.5–3, non-integer | integer ratios pulse in lock-step with drift = mechanical                |
+| CONFIDENCE_MEAN/VAR  | 95–99 / 1–3        | mean ± var ⊂ [95, 99]; < 95 "uncertain", 100 "fake-precise"; 97 is sweet |
+| CONFIDENCE_FREQ_MULT | 3–6                | > SIZE_FREQ_MULT — label flickers faster than the box breathes           |
+| MASCOT_SIZE          | = rendered size    | mismatch drifts the target out of the box                                |
+
+Tokens: `{detectionYellow}` `#facc15` family; `{bgInner}/{bgOuter}` dark low-chroma radial so the yellow pops; `{labelTextColor}` near-black; `{monoFont}` for the label.
+
+## Critical Constraints
+
+- ** Box recomputed per-frame FROM the target** — one driver computes the target position, then the box derives from it in the same `onUpdate`. Never tween the box's position separately.
+- **Corner L-brackets, not a full border** — the genre signature; a full border reads as a generic UI box.
+- **Yellow-on-dark** — substituting another hue loses genre legibility.
+- **Confidence flickers in a tight band inside [95, 99]**, in a mono font.
+- **`pointer-events: none`** on the box — it's a decorative overlay.
+
+## See also
+
+`viewport-change` (zoom into the detection) · `multi-phase-camera` (wide during tracking, push-in on lock) · `sine-wave-loop` (the target idle-breathes inside the box).

package/dist/assets/design/skills/hyperframes-animation/rules/ambient-glow-bloom.md

@@ -0,0 +1,133 @@
+---
+name: ambient-glow-bloom
+description: Un-triggered soft radial glow that blooms in behind a hero element and holds with a bounded idle breathe, or a single-pass traveling sweep across a surface. No click, no word-sync — it just blooms. Finite, deterministic, seek-safe.
+metadata:
+  tags: glow, bloom, ambient, radial, sweep, hero, presence, finite, un-triggered
+---
+
+# Ambient Glow Bloom
+
+A soft radial glow that **blooms in behind a hero element** (card, logo, metric) and holds, giving it presence. Unlike `press-release-spring`'s click-triggered burst or `asr-keyword-glow`'s word-timed envelope, this glow is **un-triggered** — it blooms on the hero's settle and stays lit. Two forms: a **hero bloom** that swells behind a settling element then breathes, and a **traveling sweep** that translates a soft highlight across a surface exactly once.
+
+## How It Works
+
+A radial-gradient layer sits **behind** the hero (glow `z-index: 1`, hero `z-index: 2` — a glow in front occludes it), starting at `opacity: 0`. Over the bloom-in window it ramps `opacity: 0 → peak` with a gentle `scale` swell, timed so `BLOOM_START + BLOOM_DUR` lands on the hero's settle — glow and hero resolve as ONE beat ("powering on"), never glow-then-card. After bloom-in:
+
+1. **Hero bloom** — a **bounded idle breathe** during the hold: a finite `ease: "none"` tween advances a `phase` proxy and `onUpdate` nudges opacity + scale a hair around peak (never a `yoyo` loop). `sin(0) = 0` → the breathe starts exactly at the bloom's resting state.
+2. **Traveling sweep** — a narrow highlight band at one edge translates **once** across to the other (`x` off-surface to off-surface), clipped to the surface (`overflow: hidden`). One pass, no return — a repeating sweep reads as a loading shimmer, not a reveal accent (the shimmer-sweep variation below is the sanctioned exception).
+
+Peak opacity stays restrained (**≤ 0.45 hard ceiling**) so the glow gives presence without washing the frame; the glow color is **darker + more saturated** than the element it backs (a same-hue, same-lightness glow disappears into the surface).
+
+## Recipe
+
+```html
+<!-- inside a standard scene clip -->
+<div class="bloom-stage">
+  <div class="bloom-glow" id="bloom-glow"></div>
+  <!-- z-index: 1; inset: GLOW_INSET (negative); background: {glowGradient} -->
+  <div class="hero-card" id="hero-card">{HeroLabel}</div>
+  <!-- z-index: 2 -->
+</div>
+<!-- sweep form: <div class="sweep" id="sweep"> inside the overflow:hidden surface -->
+```
+
+```js
+// ── Form A: HERO BLOOM ── bloom in soft, landing on the hero's settle.
+tl.fromTo(
+  "#bloom-glow",
+  { opacity: 0, scale: GLOW_START_SCALE },
+  { opacity: GLOW_PEAK_OPACITY, scale: 1, duration: BLOOM_DUR, ease: "power2.out" },
+  BLOOM_START,
+);
+// Bounded breathe during the hold — finite phase tween, NOT a yoyo loop.
+const glow = document.getElementById("bloom-glow");
+const phase = { p: 0 };
+tl.to(
+  phase,
+  {
+    p: Math.PI * 2 * BREATHE_CYCLES,
+    duration: BREATHE_DUR,
+    ease: "none",
+    onUpdate: () => {
+      const s = Math.sin(phase.p);
+      glow.style.opacity = String(GLOW_PEAK_OPACITY + s * OPACITY_AMP);
+      glow.style.transform = `scale(${1 + s * SCALE_AMP})`;
+    },
+  },
+  BLOOM_START + BLOOM_DUR,
+);
+
+// ── Form B: TRAVELING SWEEP ── one finite pass, constant glide.
+tl.fromTo(
+  "#sweep",
+  { x: SWEEP_START_X, opacity: 0 },
+  { x: SWEEP_END_X, opacity: SWEEP_PEAK_OPACITY, duration: SWEEP_DUR, ease: "none" },
+  SWEEP_START,
+);
+tl.to("#sweep", { opacity: 0, duration: SWEEP_FADE_DUR, ease: "power1.in" }, SWEEP_FADE_START);
+```
+
+## Variations
+
+- **Bloom-and-hold** — for scenes <3s or a hero with its own idle, skip the breathe: the single `fromTo` is the whole recipe.
+- **Pulse-on-arrival** — bloom slightly PAST peak (`GLOW_OVERSHOOT_OPACITY`, `scale: 1.06`), then a second adjacent tween eases down to a steady hold — one breath punctuating the landing, no ongoing loop.
+- **Multi-hero relay** — stagger per-glow `BLOOM_START` by ~0.15–0.3s across a row; shrink `OPACITY_AMP` / `SCALE_AMP` per the `/√N` rule below.
+- **Diagonal raked sweep** — angle `{sweepGradient}` (~105°) across a wordmark: the classic one-pass logo sheen. Narrower `SWEEP_WIDTH`, higher `SWEEP_PEAK_OPACITY`.
+
+### Shimmer sweep (text-clipped status-phrase working-state)
+
+The sweep re-aimed **inside type**: a soft highlight gradient clipped into a status phrase ("Thinking…", "Analyzing dataset…") via `background-clip: text` travels left→right through the letterforms — the grey-on-grey shimmer that says _still working_. Unlike every other form here it legitimately **repeats while the status is live**: the repetition is diegetic working-state, not idle wobble (same defense as a blinking caret — the motion performs status). Two things keep it honest: it is **bounded** (one finite tween whose pass count is computed from the status window, never `repeat: -1`), and it is **killed at resolve** — the moment the status completes, the shimmer stops dead; a shimmer surviving into the answer beat turns a working indicator into decoration.
+
+```js
+// Status shimmer — N passes as ONE bounded tween. Killed at resolve.
+const status = document.getElementById("status-phrase");
+// CSS on #status-phrase: background: {shimmerGradient}; background-size: 300% 100%;
+// -webkit-background-clip: text; background-clip: text; color: transparent;
+const shimmer = { p: 0 };
+const PASSES = Math.round(STATUS_DUR / PASS_PERIOD); // whole passes, computed up front
+tl.to(
+  shimmer,
+  {
+    p: PASSES,
+    duration: STATUS_DUR,
+    ease: "none",
+    onUpdate: () => {
+      const t = shimmer.p % 1; // 0→1 within each pass; percent axis inverted → left→right travel
+      status.style.backgroundPosition = `${(1 - t) * 100}% 50%`;
+    },
+  },
+  STATUS_START,
+);
+tl.set(status, { backgroundPosition: "100% 50%" }, STATUS_START + STATUS_DUR); // resolve: dead.
+```
+
+Keep it a whisper: `{shimmerGradient}` is the status text's own grey with one slightly-lighter band (highlight stop a step above the base, nothing near white); `background-size` ~300% keeps the band narrow in the glyphs; `PASS_PERIOD` 1.2–1.8s — slower reads as a sheen accent, faster as a spinner. Whole-number `PASSES` lands the band at its start position exactly at the kill frame, so the `tl.set` is visually a no-op. This is the working-state cousin of `gradient-text-sweep`: reach **here** when the sweep _means_ "in progress," **there** when the gradient is the typographic treatment itself.
+
+## Values
+
+| token                   | range / default                                        | notes                                                                      |
+| ----------------------- | ------------------------------------------------------ | -------------------------------------------------------------------------- |
+| GLOW_PEAK_OPACITY       | 0.15 (subtle) → 0.30 (default) → **0.45 hard ceiling** | higher washes the frame; a glow you consciously notice is too strong       |
+| GLOW_INSET              | −200 to −450px (1920×1080)                             | negative so the halo extends past the hero; too small reads as a tight rim |
+| GLOW_START_SCALE        | 0.80–1.0                                               | ≤1.0 — grow into place, never shrink                                       |
+| BLOOM_DUR / BLOOM_START | 0.6–1.4s                                               | `BLOOM_START + BLOOM_DUR` ≈ the hero's settle frame                        |
+| OPACITY_AMP / SCALE_AMP | 0.02–0.05 / 0.01–0.03 default                          | `PEAK + OPACITY_AMP ≤ 0.45`; push only when the glow is the sole motion    |
+| BREATHE_CYCLES          | period 2.5–4s per breath                               | glow breathes slower than element breathing                                |
+| SWEEP_WIDTH             | 15–35% of surface (grid) / 8–15% (wordmark)            |                                                                            |
+| SWEEP_DUR               | 0.8–1.6s                                               | one deliberate pass — slow enough to read as light                         |
+| SWEEP_PEAK_OPACITY      | 0.10 → 0.25 (default) → 0.40                           | same ≤ ~0.45 wash limit; tight sweeps tolerate the high end                |
+| SWEEP_START_X / END_X   | fully off-surface both ends                            | no visible spawn/despawn mid-surface; fade reaches 0 as the band clears    |
+| PASS_PERIOD (shimmer)   | 1.2–1.8s                                               | with whole-number PASSES                                                   |
+
+## Critical Constraints
+
+- **Glow peak opacity ≤ 0.45** — including breathe amplitude; default to the LOW end (0.15–0.30).
+- **Glow behind, hero in front**; glow color darker + more saturated than the hero surface.
+- **Land glow and hero as one beat** — before or after reads as two separate events.
+- **Breathe is bounded, sweep is one pass** — the only sanctioned repetition is the shimmer sweep, bounded and killed at resolve.
+- **Concurrent halos compound** — per-glow amps ≤ default `/√N`, stagger breathe periods (2.6s / 2.9s / 3.3s) so they don't pulse in lockstep.
+- **Don't combine a `boxShadow` glow on the hero with this halo layer** — they compete and read muddy; the glow lives on the dedicated layer.
+
+## See also
+
+`sine-wave-loop` (hero breathes on scale/y while the glow breathes on opacity, out of phase) · `press-release-spring` (the click-triggered sibling — never both behind one element) · `counting-dynamic-scale` / `stat-bars-and-fills` (bloom behind a landing stat) · `center-outward-expansion` (sweep across the assembled grid) · `gradient-text-sweep` (the design-beat gradient counterpart).

package/dist/assets/design/skills/hyperframes-animation/rules/anchored-layout-expand.md

@@ -0,0 +1,148 @@
+---
+name: anchored-layout-expand
+description: Edge-pinned container grows (or collapses) along ONE axis and in-flow content reflows with it — a pill springs open downward into a dropdown, a panel grows a sub-task stack, an input card stretches as typed text wraps, a pane expands over a neighbor. Transform-only (mask + slide, or proxy-driven scaleY + counter-scale) because width/height tweens are forbidden; the push on subsequent content is a matched translate on the same tween.
+metadata:
+  tags: expand, collapse, anchored, dropdown, menu, accordion, panel, reflow, push, mask, counter-scale, layout
+---
+
+# Anchored Layout Expand
+
+> The law: **author the layout at its final (expanded) state in CSS, then fake the collapsed state with transforms.** The container never changes size — the _visible_ region does — and everything downstream rides a matched translate. The browser computes layout ONCE; every intermediate frame is pure transform.
+
+THE one-axis growth primitive: a container pinned at one edge appears to grow along a single axis, and the in-flow content after it moves in perfect contact with the traveling edge — dropdown, sub-task stack, growing composer card, pane widening over a neighbor. Growth and push are ONE motion: if the panel's bottom edge and the pushed content ever separate or overlap, the illusion dies.
+
+Distinct from [card-morph-anchor.md](card-morph-anchor.md) (a free-floating two-shot morph with no neighbors to push — this rule's container is a live layout participant), [spring-pop-entrance.md](spring-pop-entrance.md) (arrival at a point, no edge travel or reflow), and [reactive-displacement.md](reactive-displacement.md) (displacement by a colliding intruder; here content moves because the container's edge reached it — layout causality, not collision).
+
+## How It Works
+
+1. **Mask** — a wrapper at the final body height (`BODY_H`), `overflow: hidden`. Never tweened.
+2. **Sheet** — the panel surface + content inside the mask, starting at `y: -BODY_H` (tucked above the mask window, behind the pinned header).
+3. **Below** — ONE wrapper holding everything after the container, also starting at `y: -BODY_H`.
+4. **Grow** — ONE `fromTo` drives sheet AND below from `y: -BODY_H → 0`. Shared tween ⇒ the descending bottom edge and the pushed content stay in exact contact by construction. Collapse = the same pair tweened back.
+
+When the surface must visibly **stretch in place** (rows revealed top-first, or a pane growing sideways), use the proxy counter-scale variant below instead.
+
+## Recipe
+
+```html
+<!-- inside a standard scene clip (hyperframes-core) -->
+<div class="stack">
+  <div class="expander">
+    <div class="expander-head">{headerLabel}</div>
+    <div class="expand-mask" id="expand-mask" data-layout-allow-overflow>
+      <div class="expand-sheet" id="expand-sheet">
+        <div class="expand-row">{rowA}</div>
+        <div class="expand-row">{rowB}</div>
+      </div>
+    </div>
+  </div>
+  <!-- EVERYTHING that must be pushed lives in this one wrapper -->
+  <div class="below" id="below">{followingContent}</div>
+</div>
+```
+
+```css
+/* Layout is the EXPANDED end state — no collapsed geometry exists in CSS. */
+.expander-head {
+  position: relative;
+  z-index: 2; /* the sheet slides out from UNDER the header */
+}
+.expand-mask {
+  height: BODY_H; /* authored final height — NEVER tweened */
+  overflow: hidden;
+}
+.expand-sheet {
+  height: BODY_H;
+  border-radius: 0 0 SHEET_RADIUS SHEET_RADIUS; /* bottom-only — header + sheet read as one grown card */
+  will-change: transform; /* + on .below */
+}
+```
+
+```js
+// BODY_H must equal the mask's CSS height exactly — measure once at build.
+// (Montage caveat: per the contract, in a multi-scene master use an authored
+// CSS-matched constant instead — later clips may not be laid out yet.)
+const BODY_H = document.querySelector("#expand-mask").offsetHeight;
+
+// The grow: ONE tween, BOTH sides of the seam.
+tl.fromTo(
+  ["#expand-sheet", "#below"],
+  { y: -BODY_H },
+  { y: 0, duration: GROW_DUR, ease: GROW_EASE },
+  GROW_AT,
+);
+
+// Garnish: rows already ride the sheet; the fade stagger makes them read as "options arriving".
+tl.fromTo(
+  ".expand-row",
+  { opacity: 0 },
+  { opacity: 1, duration: ROW_FADE_DUR, stagger: ROW_STAGGER, ease: "power2.out" },
+  GROW_AT + GROW_DUR * 0.25,
+);
+
+// Collapse — same machinery back; faster (closing is a snap decision).
+tl.fromTo(
+  ["#expand-sheet", "#below"],
+  { y: 0 },
+  { y: -BODY_H, duration: COLLAPSE_DUR, ease: "power3.in", immediateRender: false },
+  COLLAPSE_AT,
+);
+```
+
+## Variations
+
+- **Proxy counter-scale — surface stretches in place** (rows revealed top-first holding their screen positions; the "payload card expands from the tool-call line"). Drive mask `scaleY` and the sheet's exact inverse from ONE proxy — two independent tweens are wrong: eased midpoints of `s` and `1/s` are not inverses and the content squashes mid-grow. Net content scale is `s × 1/s = 1` every frame; seek-safe because everything derives from the one interpolated proxy.
+
+  ```js
+  const grow = { h: COLLAPSED_H }; // 0 for fully collapsed
+  tl.fromTo(
+    grow,
+    { h: COLLAPSED_H },
+    {
+      h: BODY_H,
+      duration: GROW_DUR,
+      ease: GROW_EASE,
+      onUpdate: () => {
+        const s = Math.max(grow.h / BODY_H, 0.0001); // clamp: no divide-by-zero
+        gsap.set("#expand-mask", { scaleY: s, transformOrigin: "50% 0%" });
+        gsap.set("#expand-sheet", { scaleY: 1 / s, transformOrigin: "50% 0%" });
+        gsap.set("#below", { y: grow.h - BODY_H });
+      },
+    },
+    GROW_AT,
+  );
+  ```
+
+- **One-axis pane expand (X)**: same machinery rotated 90° — pin the left edge, sheet from `x: -PANE_W` (or proxy `scaleX` + counter-scale, origin `0% 50%`). Decide the neighbor's fate explicitly: **overlap** (pane paints over it, no neighbor tween) or **push** (neighbor rides the same tween). Never both.
+- **Typed-wrap growth** — the composer card gets taller as typed text wraps. Quantize: one short step per wrap boundary, each moving the pair by one `LINE_H`; wrap times come from the deterministic typing schedule ([discrete-text-sequence.md](discrete-text-sequence.md)), never measured at render time. Two battle-tested traps:
+  - **Composer cards have no pinned header** — a composer grows from its TOP edge (the send-button footer stays put), so a plain y-step clips the card's top out of the mask. Combine the proxy counter-scale with the wrap quantization (step the proxy by `LINE_H` at each wrap time) and split the surface into a **sheet** (carries the top radius) + **footer** (carries the bottom radius) so the growth seam stays invisible.
+  - **Wrap TIME vs wrap POSITION are two different authorities** — the typing schedule decides _when_ a wrap fires, the browser's line-breaking decides _where_ text actually wraps, and with proportional fonts they silently disagree. Author an explicit `\n` in the typed string (with `white-space: pre-wrap`) at the chosen split point so both derive from the same authored fact.
+- **Springy open** (rare, explicitly-playful): `back.out(1.2)` — the edge overshoots a few px; the pushed content bounces with the panel (correct — they're in contact). Default stays `power3.out`.
+- **Row grows a sub-task stack**: the row is the pinned header, the stack is the sheet, every later row lives in `#below`; chain several scopes for progressive disclosure.
+- **FLIP hand-off**: if the container also TRAVELS to a new layout slot while resizing (prompt promoted to heading, card docking into a sidebar), that's a FLIP problem — `/hyperframes-keyframes` (FLIP recipes). This rule stays the in-place one-axis specialist.
+
+## Values
+
+| token                    | range                       | notes                                                                 |
+| ------------------------ | --------------------------- | --------------------------------------------------------------------- |
+| BODY_H                   | measured / authored         | drift from the CSS height = visible gap or overlap at full open       |
+| GROW_AT                  | trigger beat + 0–0.1s       | growth needs a cause (click / wrap / status beat) or it reads haunted |
+| GROW_DUR                 | 0.35–0.6s                   | below ~0.3s the pushed content appears to teleport                    |
+| GROW_EASE                | `power3.out` default        | `back.out(1.1–1.3)` only for the playful register                     |
+| ROW_STAGGER / \_FADE_DUR | 0.04–0.08s / 0.2–0.3s       | start rows ~25% into the grow so none flash inside a closed panel     |
+| COLLAPSE_DUR             | 0.2–0.35s, `power3.in`      | faster than open                                                      |
+| STEP_DUR / LINE_H        | 0.12–0.2s / CSS line-height | typed-wrap variant; WRAP_TIMES from the typing script                 |
+
+## Critical Constraints
+
+- **NEVER tween `width` / `height` / `top` / `left` / `margin` / `padding`** — the mask's height is a CSS constant; only its children transform. Tweening the mask IS the forbidden move this rule replaces.
+- **`data-layout-allow-overflow` on the mask** — the collapsed phase parks the sheet outside the mask's box by construction, which trips the `freecodego_design_lint` layout gate (`container_overflow`). The flag is the sanctioned waiver: this overflow is the technique working as designed, not a bug.
+- **Sheet + below share one tween (or one proxy)** — matched-but-separate tweens on the two sides of the contact edge are the classic seam bug.
+- **Everything downstream rides `#below`** — content outside the wrapper is overlapped at t=0 and orphaned during the grow.
+- **`overflow: hidden` on the mask** — without it the tucked sheet is visible above the header at t=0.
+- **Counter-scale needs a proxy**, clamped `s ≥ 0.0001` (a fully-collapsed body divides by zero).
+- **Deterministic sizes** — `BODY_H`, `LINE_H`, `WRAP_TIMES` are build-time constants or one-time measurements, never per-frame layout reads.
+
+## See also
+
+`cursor-click-ripple` (the igniting click) · `spring-pop-entrance` (richer per-row arrivals) · `discrete-text-sequence` (the typing that drives stepped growth) · `scale-swap-transition` (the grown menu's exit) · `/hyperframes-keyframes` FLIP (grow + travel).

package/dist/assets/design/skills/hyperframes-animation/rules/asr-keyword-glow.md

@@ -0,0 +1,128 @@
+---
+name: asr-keyword-glow
+description: Keywords glow + scale up when "spoken" — attack/sustain/release envelope synced to per-word timestamps. Even without real audio, hardcoded timings create a "narrator emphasis" effect.
+metadata:
+  tags: asr, audio-sync, highlight, glow, keyword, text, speech, emphasis
+---
+
+# ASR Keyword Glow
+
+Words in a phrase visually activate (glow blur + scale) when "spoken", following an attack-sustain-release envelope over per-word `{ start, end }` timestamps. In a real ASR pipeline the timings come from a word-level transcript (`hyperframes transcribe` — same shape); for promo video, hand-author them to control emphasis pacing. The envelope never falls to zero after a word — it decays to a rest level, leaving a breadcrumb of recent emphasis.
+
+## How It Works
+
+A single linear driver tween (`ease: "none"` — any other ease distorts the per-word envelope; do not change) sweeps scene time; its `onUpdate` loops over ALL words computing each one's envelope: 0 before `start`, linear attack to 1 over `ATTACK_DUR`, sustain at 1 until `end`, decay to `REST_LEVEL` over `RELEASE`, then hold at rest. The envelope drives `text-shadow` blur and `scale` — one driver for the whole phrase, never one tween per word (60+ words would bloat the timeline).
+
+## Recipe
+
+```html
+<!-- inside a standard scene clip (hyperframes-core) -->
+<div class="phrase">
+  <span class="word" data-word="{w1Key}">{w1}</span>
+  <span class="word" data-word="{w2Key}">{w2}</span>
+  <!-- … the final word may be the brand, with the .brand modifier -->
+  <span class="word brand" data-word="{brandKey}">{brandWord}</span>
+</div>
+```
+
+```css
+.phrase {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  color: {restColor};
+}
+.word {
+  display: inline-block; /* required for transform on <span> */
+  transform-origin: 50% 50%;
+  text-shadow: 0 0 0 {glowColorTransparent};
+}
+.word.brand {
+  color: {brandAccentColor};
+}
+```
+
+```js
+// Per-word spoken windows — one entry per span; brand word 1.5-2× a normal word's window.
+const TIMINGS = {
+  // {w1Key}: { start: …, end: … },  — seconds, local to the scene
+};
+
+function envelope(time, start, end) {
+  if (time < start) return 0;
+  if (time < end) return Math.min((time - start) / ATTACK_DUR, 1);
+  const releaseEnd = end + RELEASE;
+  if (time < releaseEnd) return 1 - ((time - end) / RELEASE) * (1 - REST_LEVEL);
+  return REST_LEVEL;
+}
+
+const words = document.querySelectorAll(".word");
+const driver = { t: 0 };
+tl.to(
+  driver,
+  {
+    t: SCENE_DURATION,
+    duration: SCENE_DURATION,
+    ease: "none", // linear — t maps 1:1 to scene time
+    onUpdate: () => {
+      words.forEach((el) => {
+        const timing = TIMINGS[el.dataset.word];
+        if (!timing) return;
+        const env = envelope(driver.t, timing.start, timing.end);
+        el.style.textShadow = `0 0 ${MAX_BLUR * env}px ${glowColorRgba(env)}`;
+        el.style.transform = `scale(${1 + MAX_SCALE_BOOST * env})`;
+      });
+    },
+  },
+  0,
+);
+```
+
+`glowColorRgba(env)` returns the glow color with `env`-modulated alpha.
+
+## Variations
+
+- **Karaoke style (RECOMMENDED for video narration)** — the default amplitudes read too subtle in video: inactive words still dominate. Render inactive words DIM and lerp the active word toward bright + larger; at any moment 1–2 words are bright (spoken + lingering rest) and the rest is dim. Use for short phrases (5–10 words) where one word at a time should POP; keep the subtle default for long dense text. Pushes MAX_BLUR, MAX_SCALE_BOOST, and REST↔ACTIVE contrast; everything else identical:
+
+```js
+function lerpChannel(a, b, t) {
+  return Math.round(a + (b - a) * t);
+}
+function colorAt(env, isBrand) {
+  const target = isBrand ? BRAND_RGB : ACTIVE_RGB;
+  return `rgb(${lerpChannel(REST_RGB.r, target.r, env)}, ${lerpChannel(REST_RGB.g, target.g, env)}, ${lerpChannel(REST_RGB.b, target.b, env)})`;
+}
+// in onUpdate: el.style.color = colorAt(env, el.classList.contains("brand"));
+```
+
+- **Multi-octave glow** — multiply the sustain by `1 + sin(driver.t × PULSE_HZ) × PULSE_AMPLITUDE` so high-emphasis words breathe at peak.
+- **Color shift on the peak** — same channel-lerp from `restColor` → `peakColor` as `env` rises (non-karaoke form).
+- **3D pop-out** — add `translateZ(env × MAX_POP_Z)` so the spoken word leans toward camera; requires `perspective` on the parent.
+- **From real ASR transcripts** — convert `{ word, start_ms, end_ms }` entries to seconds and feed in identically.
+
+## Values
+
+| token           | default style        | karaoke style | notes                                                      |
+| --------------- | -------------------- | ------------- | ---------------------------------------------------------- |
+| ATTACK_DUR      | 0.1–0.25s            | same          | must be < the shortest word's window or it never reaches 1 |
+| RELEASE         | 0.2–0.5s             | same          | decay to rest                                              |
+| REST_LEVEL      | 0.15–0.4             | 0.05–0.2      | > 0 (breadcrumb), < 1                                      |
+| MAX_BLUR        | 15–25px              | 30–45px       | bigger = "shouting"                                        |
+| MAX_SCALE_BOOST | 0.03–0.10            | 0.15–0.25     | additive at peak (0.08 ⇒ scale 1.08)                       |
+| PULSE_HZ / AMP  | 4–10 rad/s / 0.1–0.3 | —             | multi-octave variation                                     |
+| MAX_POP_Z       | 20–60px              | —             | 3D variation                                               |
+| SCENE_DURATION  | = `data-duration`    | same          | driver must end in sync with the scene's seek window       |
+
+## Critical Constraints
+
+- **Timings monotonic, non-overlapping** — every entry's `end` < the next entry's `start`; overlapping windows make the envelope ambiguous.
+- **Brand word window 1.5–2× a normal word** — the brand is the headline; let it sustain.
+- **Driver ease stays `"none"`** — any other ease warps every word's envelope timing.
+- **`text-shadow`, not `box-shadow`** — the glow must hug the GLYPH (speaking emphasis), not the inline-block rectangle.
+- **One driver looping all words** — never one tween per word.
+- **Commit to a style** — values between the default and karaoke columns yield awkward "half-loud" emphasis.
+- **Climax dwell ≥1s** after the final word's emphasis — the last word IS the headline beat.
+
+## See also
+
+`3d-text-depth-layers` (depth on the active word at peak) · `sine-wave-loop` (idle breathe between emphasis moments) · `context-sensitive-cursor` (typewriter matching the ASR cadence) · `/media-use` for `hyperframes transcribe` and caption rendering.