dsh-hyperframes 0.2.0 → 0.3.0

package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/README.md

@@ -0,0 +1,54 @@
+# Tier 2 — title-image-outro
+
+## What it tests
+
+Three-scene composition. Each scene exercises a different Remotion idiom:
+
+1. **Scene 1 (0–2 s)** — TitleScene with `spring({damping:12, stiffness:100, mass:1})`
+   driving a `transform: scale()` on text. Tests the lossy `spring → GSAP ease` translation.
+2. **Scene 2 (2–4 s)** — ImageScene that fades in a `staticFile`-loaded image and
+   linearly scales it from 0.8 → 1.0. Tests asset paths + linear `interpolate`.
+3. **Scene 3 (4–6 s)** — OutroScene with a 1-s linear fade-in. Sanity check after
+   the harder scenes.
+
+A silent 6-second WAV plays throughout at `volume={0.5}`. Tests `<Audio>` translation.
+
+If a translation passes T2, the skill correctly handles `<Sequence>` boundaries,
+`<Audio>` / `<Img>` / `staticFile`, and the Remotion `spring → GSAP ease` heuristic.
+
+## Translation walk-through
+
+| Remotion                                                            | HyperFrames                                                                                              |
+| ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `<Sequence from={0} durationInFrames={60}>`                         | `<div data-start="0" data-duration="2" data-track-index="0">`                                            |
+| `spring({frame, fps, config: {damping:12, stiffness:100, mass:1}})` | `gsap.to(target, { scale: 1, duration: 0.7, ease: "back.out(1.4)" })`                                    |
+| `<Audio src={staticFile("music.wav")} volume={0.5} />`              | `<audio src="assets/music.wav" data-start="0" data-duration="6" data-volume="0.5" data-track-index="1">` |
+| `<Img src={staticFile("square.png")} />`                            | `<img src="assets/square.png">` (with setup.sh copying into both trees)                                  |
+| `interpolate(frame, [0, 15], [0, 1])` at 30 fps                     | `gsap.to(target, { opacity: 1, duration: 0.5, ease: "none" })`                                           |
+
+The scene crossfading is a HyperFrames idiom, not a Remotion one: at scene boundaries
+we `gsap.set(scene, { opacity: 0 })` so the previous scene disappears at the
+right time. Remotion does this implicitly by virtue of `<Sequence>`'s durationInFrames.
+
+## How to render and evaluate
+
+```bash
+# 1. Generate the binary assets (PNG + WAV) via ffmpeg
+./setup.sh
+
+# 2. Render Remotion baseline
+cd remotion-src && npm install && npm run render
+
+# 3. Render HyperFrames translation
+cd ../hf-src && npx hyperframes render --output ../hf.mp4
+
+# 4. Compare
+../../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff
+```
+
+## Why threshold 0.95?
+
+Same threshold as T1 (`expected.json` codifies it for the orchestrator). Spring → `back.out(1.4)`
+came in cleaner than predicted during calibration — the validated mean is 0.985 against the
+0.95 gate. If the translation breaks anything else (spring overshoot wrong, stagger off,
+asset path drift), mean SSIM will fall well below 0.95 — that's the failure signal.

package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/expected.json

@@ -0,0 +1,29 @@
+{
+  "tier": 2,
+  "name": "title-image-outro",
+  "composition_id": "MultiScene",
+  "description": "Three-scene composition exercising Sequence, spring, interpolate, Audio, Img, and staticFile. Title scene uses Remotion's spring (translated to GSAP back.out as an approximation). Image scene scales an Img (from staticFile) with linear interpolate. Outro scene fades text in linearly. A silent WAV plays throughout at volume 0.5.",
+  "duration_seconds": 6,
+  "fps": 30,
+  "width": 1280,
+  "height": 720,
+  "ssim_threshold": 0.95,
+  "validation": {
+    "measured_mean_ssim": 0.985,
+    "measured_min_ssim": 0.963,
+    "measured_p05_ssim": 0.966,
+    "measured_p95_ssim": 0.999,
+    "measured_at": "2026-04-27",
+    "measured_against": "remotion@4.0 (PNG output, BT.709) vs hyperframes@0.4.15-alpha.1",
+    "notes": "Spring → back.out(1.4) translation came out cleaner than expected; mean 0.985 leaves substantial headroom over 0.95."
+  },
+  "translation_notes": [
+    "spring({damping:12, stiffness:100, mass:1}) → back.out(1.4) over 0.7s. Spring overshoot+settle and back.out's overshoot+settle have similar shape; budget ~0.02 SSIM for the late-tail curvature mismatch (validated lower than predicted in spec; original notes overestimated drift).",
+    "<Sequence from durationInFrames> → wrapping div with data-start/data-duration in seconds and explicit gsap.set(opacity, 0/1) at scene boundaries to crossfade in/out cleanly",
+    "<Audio src volume> → <audio data-start data-duration data-volume>",
+    "<Img src={staticFile('x')}> → <img src='assets/x'>; setup.sh copies the asset into both fixture trees",
+    "interpolate with default linear easing → ease:'none' in GSAP",
+    "Fonts again rely on system Helvetica/Arial; ~0.015 SSIM cost from AA differences"
+  ],
+  "rationale": "Threshold 0.95 sits ~0.015 below measured p05 (0.966). T2 actually validated cleaner than T1 because the lower title fontWeight (140px vs T1's 160px) shows less of the system-font fallback divergence."
+}

package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/index.html

@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>tier-2-multi-scene</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1280px;
+        height: 720px;
+        overflow: hidden;
+        background: #0a0a0a;
+        font-family: Helvetica, Arial, sans-serif;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+      .title {
+        font-size: 140px;
+        font-weight: 800;
+        color: #ffffff;
+        letter-spacing: 0.05em;
+        transform: scale(0);
+      }
+      .square {
+        width: 200px;
+        height: 200px;
+        opacity: 0;
+        transform: scale(0.8);
+      }
+      .outro {
+        font-size: 100px;
+        font-weight: 600;
+        color: #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="stage"
+      data-composition-id="tier-2-multi-scene"
+      data-start="0"
+      data-width="1280"
+      data-height="720"
+      data-duration="6"
+      data-fps="30"
+    >
+      <div id="scene-1" class="scene clip" data-start="0" data-duration="2" data-track-index="0">
+        <div class="title">Welcome</div>
+      </div>
+
+      <div id="scene-2" class="scene clip" data-start="2" data-duration="2" data-track-index="0">
+        <img class="square" src="assets/square.png" alt="" />
+      </div>
+
+      <div id="scene-3" class="scene clip" data-start="4" data-duration="2" data-track-index="0">
+        <div class="outro">Goodbye</div>
+      </div>
+
+      <audio
+        id="bg-music"
+        data-start="0"
+        data-duration="6"
+        data-track-index="1"
+        data-volume="0.5"
+        src="assets/music.wav"
+      ></audio>
+
+      <script>
+        // Translation of Remotion's 3-Sequence MultiScene at fps=30, total 6s.
+        //
+        // Scene 1 (0-2s): TitleScene — spring scale on "Welcome".
+        //   Remotion: spring({frame, fps, config: {damping:12, stiffness:100, mass:1}})
+        //   GSAP equivalent: back.out(1.4) over ~0.7s. Spring → ease translation
+        //   is approximate; expect minor differences in the tail of the curve.
+        //
+        // Scene 2 (2-4s): ImageScene — opacity 0→1 over 0-0.5s + scale 0.8→1.0 over 0-2.0s.
+        //   Both Remotion interpolates use linear (default), match with ease:"none".
+        //
+        // Scene 3 (4-6s): OutroScene — opacity 0→1 over 4-5s, linear.
+
+        const tl = gsap.timeline({ paused: true });
+
+        // Scene 1 setup: opacity flick on so scene becomes visible at start
+        const scene1 = document.querySelector("#scene-1");
+        const title = scene1.querySelector(".title");
+        tl.set(scene1, { opacity: 1 }, 0);
+        tl.to(title, { scale: 1, duration: 0.7, ease: "back.out(1.4)" }, 0);
+        tl.set(scene1, { opacity: 0 }, 2);
+
+        // Scene 2
+        const scene2 = document.querySelector("#scene-2");
+        const square = scene2.querySelector(".square");
+        tl.set(scene2, { opacity: 1 }, 2);
+        tl.to(square, { opacity: 1, duration: 0.5, ease: "none" }, 2);
+        tl.to(square, { scale: 1.0, duration: 2.0, ease: "none" }, 2);
+        tl.set(scene2, { opacity: 0 }, 4);
+
+        // Scene 3
+        const scene3 = document.querySelector("#scene-3");
+        const outro = scene3.querySelector(".outro");
+        tl.set(scene3, { opacity: 1 }, 4);
+        tl.fromTo(outro, { opacity: 0 }, { opacity: 1, duration: 1.0, ease: "none" }, 4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tier-2-multi-scene"] = tl;
+      </script>
+    </div>
+  </body>
+</html>

package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "tier-2-multi-scene-remotion",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "render": "remotion render MultiScene out/baseline.mp4"
+  },
+  "dependencies": {
+    "@remotion/cli": "^4.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "remotion": "^4.0.0"
+  }
+}

package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/remotion.config.ts

@@ -0,0 +1,13 @@
+import { Config } from "@remotion/cli/config";
+
+// Match HyperFrames' default render so SSIM diffs measure translation
+// fidelity, not encoder differences.
+//
+//   setVideoImageFormat("png") avoids the JPEG limited-range/full-range
+//   colorspace flag (yuvj420p vs yuv420p) that otherwise costs ~0.05 SSIM.
+//
+//   setColorSpace("bt709") matches HF's BT.709 SDR output.
+Config.setVideoImageFormat("png");
+Config.setColorSpace("bt709");
+Config.setOverwriteOutput(true);
+Config.setConcurrency(1);

package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/MultiScene.tsx

@@ -0,0 +1,105 @@
+import {
+  AbsoluteFill,
+  Audio,
+  Img,
+  Sequence,
+  interpolate,
+  spring,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+} from "remotion";
+
+const TitleScene = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const scale = spring({ frame, fps, config: { damping: 12, stiffness: 100, mass: 1 } });
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: "#0a0a0a",
+        justifyContent: "center",
+        alignItems: "center",
+        fontFamily: "Helvetica, Arial, sans-serif",
+      }}
+    >
+      <div
+        style={{
+          fontSize: 140,
+          fontWeight: 800,
+          color: "#ffffff",
+          transform: `scale(${scale})`,
+          letterSpacing: "0.05em",
+        }}
+      >
+        Welcome
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+const ImageScene = () => {
+  const frame = useCurrentFrame();
+  const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });
+  const scale = interpolate(frame, [0, 60], [0.8, 1.0], { extrapolateRight: "clamp" });
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: "#0a0a0a",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Img
+        src={staticFile("square.png")}
+        style={{
+          width: 200,
+          height: 200,
+          opacity,
+          transform: `scale(${scale})`,
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+const OutroScene = () => {
+  const frame = useCurrentFrame();
+  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: "#0a0a0a",
+        justifyContent: "center",
+        alignItems: "center",
+        fontFamily: "Helvetica, Arial, sans-serif",
+      }}
+    >
+      <div
+        style={{
+          fontSize: 100,
+          fontWeight: 600,
+          color: "#ffffff",
+          opacity,
+        }}
+      >
+        Goodbye
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+export const MultiScene = () => (
+  <AbsoluteFill>
+    <Sequence from={0} durationInFrames={60}>
+      <TitleScene />
+    </Sequence>
+    <Sequence from={60} durationInFrames={60}>
+      <ImageScene />
+    </Sequence>
+    <Sequence from={120} durationInFrames={60}>
+      <OutroScene />
+    </Sequence>
+    <Audio src={staticFile("music.wav")} volume={0.5} />
+  </AbsoluteFill>
+);

package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/Root.tsx

@@ -0,0 +1,13 @@
+import { Composition } from "remotion";
+import { MultiScene } from "./MultiScene";
+
+export const RemotionRoot = () => (
+  <Composition
+    id="MultiScene"
+    component={MultiScene}
+    durationInFrames={180}
+    fps={30}
+    width={1280}
+    height={720}
+  />
+);

package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/index.ts

@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root";
+
+registerRoot(RemotionRoot);

package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": ["src"]
+}

package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/setup.sh

@@ -0,0 +1,34 @@
+#!/usr/bin/env bash
+# setup.sh — generate the binary assets this fixture needs.
+#
+# Both Remotion and HyperFrames variants need a 200x200 blue PNG and a
+# 6-second silent WAV. Generating them via ffmpeg keeps binaries out of
+# the repo while still letting the fixture render reproducibly.
+#
+# Run from the fixture root: ./setup.sh
+
+set -euo pipefail
+
+THIS_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+if ! command -v ffmpeg >/dev/null 2>&1; then
+  echo "error: ffmpeg not on PATH" >&2
+  exit 2
+fi
+
+mkdir -p "$THIS_DIR/remotion-src/public" "$THIS_DIR/hf-src/assets"
+
+# 200x200 solid blue PNG, ~200 bytes.
+ffmpeg -y -hide_banner -loglevel error \
+  -f lavfi -i "color=color=#3066be:size=200x200" -frames:v 1 \
+  "$THIS_DIR/remotion-src/public/square.png"
+cp "$THIS_DIR/remotion-src/public/square.png" "$THIS_DIR/hf-src/assets/square.png"
+
+# 6-second silent WAV at 8 kHz mono. ~96 KB if checked in, but it is generated.
+ffmpeg -y -hide_banner -loglevel error \
+  -f lavfi -i "anullsrc=cl=mono:r=8000" -t 6 -acodec pcm_s16le \
+  "$THIS_DIR/remotion-src/public/music.wav"
+cp "$THIS_DIR/remotion-src/public/music.wav" "$THIS_DIR/hf-src/assets/music.wav"
+
+echo "generated:"
+ls -la "$THIS_DIR/remotion-src/public/" "$THIS_DIR/hf-src/assets/"

package/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/README.md

@@ -0,0 +1,85 @@
+# Tier 3 — stargazed-data-driven
+
+## What it tests
+
+A purpose-built data-driven fixture that exercises the realistic shape of a
+production Remotion composition without using the runtime adapter from
+PR #214. If a translation passes T3, the skill correctly handles:
+
+- A `<Composition>` with a `z.object` schema and typed `defaultProps`
+- Custom React subcomponents reused with different props across scenes
+- A nested data structure (`stats[]`) materialized as repeated HTML with
+  per-instance attributes
+- A frame-driven count-up animation (`AnimatedNumber` → GSAP `onUpdate`)
+- Two different `spring` configs translated to two different `back.out` overshoots
+- Per-instance delays via component props (`delayInFrames` → GSAP timeline offsets)
+
+## Composition shape
+
+```
+Stargazed (10 s @ 30 fps, 1280×720)
+├── Sequence 0–3 s   TitleScene
+│                    ├── title  ← spring scale
+│                    └── subtitle ← linear fade
+├── Sequence 3–7 s   StatsScene
+│                    ├── StatCard "Stars" 1247 #fbbf24 (delay 0 frames)
+│                    ├── StatCard "Forks" 312 #60a5fa  (delay 12 frames)
+│                    └── StatCard "Issues" 48 #f87171  (delay 24 frames)
+└── Sequence 7–10 s  OutroScene
+                     └── UnderlinedText "thanks for watching" ← scale-in underline
+```
+
+Each `StatCard` is a custom subcomponent that internally uses `AnimatedNumber`
+to count from 0 to the target. `AnimatedNumber` itself derives the displayed
+value from `useCurrentFrame()` + a manual `1 - (1 - t)^3` ease.
+
+## The lossy parts (and why threshold = 0.90)
+
+1. **`spring → back.out(N)`**: two different spring configs in this composition.
+   - `{ damping: 12, stiffness: 100, mass: 1 }` (title) → `back.out(1.4)`
+   - `{ damping: 14, stiffness: 90, mass: 1 }` (stat card) → `back.out(1.2)`
+
+   Overshoot ratio (1.4 vs 1.2) approximates the damping difference. The
+   late-tail curve of GSAP's back ease and Remotion's spring don't match
+   exactly — costs ~0.03 mean SSIM per spring instance.
+
+2. **Count-up easing**: `AnimatedNumber` uses `1 - (1 - t)^3` (cubic ease-out)
+   manually computed in the component. GSAP's `power3.out` is the same curve
+   shape — should match closely. The displayed integer is rounded each frame
+   in both renderers; minor mismatches occur when the rounded value flips
+   between two numbers on a sub-frame timing difference.
+
+3. **Font rendering**: same caveat as T1/T2. System Helvetica/Arial fallback
+   produces minor anti-aliasing differences between renderers. Affects the
+   stat card numbers (large weight 800) most.
+
+A mean SSIM below 0.90 in T3 indicates a _structural_ mismatch (wrong scene
+durations, wrong stagger timing, missing prop wiring), not approximation
+drift. That's the failure signal we care about. The calibrated mean against
+Remotion @ 4.0 with PNG/BT.709 output is 0.953.
+
+## Translation walk-through (skill cheat sheet)
+
+| Remotion                                                                    | HyperFrames                                                                           |
+| --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| `<Composition schema={z.object({...})} defaultProps={...} />`               | data-\* attributes on root `#stage` div                                               |
+| nested array prop (`stats[]`)                                               | repeated HTML markup with per-instance `data-*` attrs                                 |
+| custom React subcomponent                                                   | inline repeated HTML using the component's prop interface as the template             |
+| `<AnimatedNumber from={0} to={value} dur={45} />` (cubic ease-out count-up) | tween on `{ v: 0 }` object with `onUpdate` rewriting `textContent`, ease `power3.out` |
+| `spring({damping:12, stiffness:100})`                                       | `back.out(1.4)` over ~0.7 s                                                           |
+| `spring({damping:14, stiffness:90})`                                        | `back.out(1.2)` over ~0.7 s                                                           |
+| `delayInFrames={i * 12}` (per-instance)                                     | GSAP timeline offset `(i * 0.4)` s                                                    |
+| `useVideoConfig()` to get `fps`                                             | dropped — composition fps is in `data-fps` on `#stage`                                |
+
+## How to render and evaluate
+
+```bash
+# Render Remotion baseline (no setup.sh — no binary assets in this fixture)
+cd remotion-src && npm install && npm run render
+
+# Render HyperFrames translation
+cd ../hf-src && npx hyperframes render --output ../hf.mp4
+
+# Compare
+../../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff
+```

package/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/expected.json

@@ -0,0 +1,41 @@
+{
+  "tier": 3,
+  "name": "stargazed-data-driven",
+  "composition_id": "Stargazed",
+  "description": "Data-driven 10-second composition with three scenes, custom React subcomponents reused across scenes, a Zod schema with defaultProps, and a count-up number animation. Translates the realistic shape of a production Remotion composition into HF — without using the runtime adapter from PR #214.",
+  "duration_seconds": 10,
+  "fps": 30,
+  "width": 1280,
+  "height": 720,
+  "ssim_threshold": 0.9,
+  "validation": {
+    "measured_mean_ssim": 0.953,
+    "measured_min_ssim": 0.927,
+    "measured_p05_ssim": 0.938,
+    "measured_p95_ssim": 0.977,
+    "measured_at": "2026-04-27",
+    "measured_against": "remotion@4.0 (PNG output, BT.709) vs hyperframes@0.4.15-alpha.1",
+    "notes": "Count-up timing in StatsScene shows a few-frame offset between Remotion's manual 1-(1-t)^3 and GSAP's power3.out — both formulas are identical, so the offset comes from sub-frame timing of when the seek + onUpdate fire. Final values converge correctly. Visible only as transient digit mismatches mid-animation; no SSIM impact above the noise floor."
+  },
+  "remotion_apis_exercised": [
+    "Composition with z.object schema and typed defaultProps",
+    "Sequence (3 nested with computed offsets)",
+    "AbsoluteFill",
+    "useCurrentFrame, useVideoConfig",
+    "interpolate (single-segment, multi-segment, with extrapolation)",
+    "spring (two configs: damping:12 and damping:14)",
+    "Custom React subcomponents reused with different props (StatCard ×3)",
+    "Custom React utility component (AnimatedNumber for count-up)",
+    "Custom React utility component (UnderlinedText)",
+    "Per-instance delay via prop (delayInFrames)"
+  ],
+  "translation_notes": [
+    "Zod schema + defaultProps → data-* attributes on the root #stage div. The skill emits one data attribute per scalar prop; nested arrays (stats[]) get materialized as repeated HTML markup with per-instance data attributes (data-stat-index, data-stat-value, --card-color).",
+    "Custom React subcomponents inline as repeated HTML divs. The component prop interface becomes the repeated markup template. This is lossy for components with internal state — fine here because StatCard, AnimatedNumber, UnderlinedText all derive from props alone.",
+    "AnimatedNumber's frame-driven count-up → a GSAP tween on a { v: 0 } counter object with onUpdate rewriting textContent. GSAP's power3.out is cubic easeOut, matching the Remotion 1-(1-t)^3 manual ease.",
+    "Two different springs in this composition: damping:12 → back.out(1.4) (snappy), damping:14 → back.out(1.2) (calmer). The 1.4 vs 1.2 overshoot ratio approximates the damping difference.",
+    "Per-instance stagger via delayInFrames prop translates to a GSAP timeline offset of (i * 0.4)s.",
+    "Threshold 0.90 reflects: spring → back.out approximation (×2 different configs), the count-up easing curve match (very close but not identical due to sub-frame seek timing), font/AA differences on body text. SSIM well below 0.90 indicates a structural mismatch, not approximation drift."
+  ],
+  "rationale": "Threshold 0.90 sits ~0.04 below measured p05 (0.938). The wider gap vs T1/T2 reflects T3's bigger approximation budget (2 spring instances + count-up timing + font fallback on multiple text sizes). Mean SSIM below 0.90 = structural mismatch (wrong durations, wrong stagger, missing prop wiring), not approximation drift."
+}