takomi 2.5.1 → 2.5.4

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

@@ -1,85 +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
-```
+# 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/assets/.agent/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/expected.json

@@ -1,41 +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."
-}
+{
+  "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."
+}