frame-data-rollup

[Template: Data Rollup Frame] [Type]Native Remotion template (RFC-08 Phase 2) — not HTML+GSAP, but React-tsx directly consuming Remotion's frame clock (useCurrentFrame + interpolate + spring). This lets usersactively attach to data framesmotion enhancement: hyperframes produces static/CSS charts, and this template makes the bars actually grow according to the data and the numbers actually roll, recognizable at a glance.

[Intent] Data display frame — weekly metrics / growth bars / KPIs, values should move rather than sit still. Suitable for inserting into a data segment of a video that is mainly hyperframes.

[Canvas] Default 1920×1080, all layout is calculated based on the real canvas size (useVideoConfig), 9:16 / 1:1 will not be squashed either.

[Data contract (inputProps)]

• data.items[] — each item {label, value}, is the bar to draw; about 7 bars max, more will be crowded.
• data.title? — top-left title.
• data.unit? — number suffix, such as K / %。
• accent? / background? / foreground? — color scheme, default orange #FF5A2C / near-black #0E0E10 / paper white #F5F5F2。

[Motion structure]

• Each bar grows from 0 to spring() according to value/maxValue height, cascading in one by one with staggered timing (0.12s per bar).
• Numbers use the same growth curve as the bars to roll from 0 to value, and the bars and numbers settle at the same time.
• The title fades in with a spring + moves up; the label fades in when the bar grows to 40%.

[Content discipline]

• Feed real data, do not use placeholder numbers.
• value must be a number; non-numbers will be treated as 0 (enhanceFrameNative should be normalized/validated before binding).
• Keep the number of bars within 7.

[Offline determinism] Pure system font stack, inline styles, no external fonts / resources / network — ensures deterministic headless rendering and no black screen (aligned with the bridging neutralizeBlockingResources lesson).

[Original] Original React-tsx, standard animated bar chart vocabulary (count-up + spring growth) implemented from scratch, no specific upstream source (provenance origin = none).