Separates creative grammar (renderer_family) from technical engine (render_runtime) so HyperFrames can stand alongside Remotion as a first-class runtime instead of masquerading as a Remotion sub-case. Locks runtime choice at proposal stage and enforces it end-to-end: the schemas require it, video_compose routes by it, the reviewer fails closed on silent swaps, and a parametrized contract test walks every pipeline manifest to ensure each planning-stage skill explains the conversation to the user. Adds hyperframes_compose (scaffold/lint/ validate/render/doctor/add_block), a playbook -> CSS style bridge, and vendored HyperFrames Layer 3 skills from commit d291358, pinned via PROVENANCE.md for future re-sync. Final_review now records render_runtime_used and runtime_swap_detected so compose lies are catchable after the fact.
1.3 KiB
Data in Motion
Light guidance for data and stats in video compositions. The house style handles aesthetics — this just addresses data-specific pitfalls.
Visual Continuity
When successive stats belong to the same concept (Q1 → Q2 → Q3 → Q4, or three metrics for the same product), keep them in the same visual space with the same aesthetic. Only the VALUE changes. An aesthetic change should signal a new concept, not just a new number.
Numbers Need Visual Weight
A number on its own floats in empty space. Pair every metric with a visual element that gives it presence — a proportional fill bar, a background color shift, a shape that represents the value, a progress ring. The visual doesn't need to be a chart — it just needs to fill the frame and make the data feel tangible rather than just text on a background.
Avoid Web Patterns
- No pie charts — hard to compare, looks like PowerPoint
- No multi-axis charts — viewer can't study intersections in a 3-second window
- No 6-panel dashboards — 2-3 related metrics side-by-side is fine, 6+ is a web pattern
- No gridlines, tick marks, or legends — visual noise that adds nothing in motion
- No chart library output — build with GSAP + SVG/CSS, not D3 or Chart.js