# Frame Data Rollup

> A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync. The numbers come alive in a way a static HTML chart can't.

- Skill: `zhouyinlong-lab/frame-data-rollup` (Agent Skill, multi-file: 8 files)
- Install (CLI): `npx skillmds@latest add zhouyinlong-lab/frame-data-rollup`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zhouyinlong-lab/frame-data-rollup/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: zhouyinlong-lab (https://skillmd.com/u/zhouyinlong-lab)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/zhouyinlong-lab/frame-data-rollup

---


【模板: 数据滚动帧 (Data Rollup)】
【类型】**原生 Remotion 模板 (RFC-08 Phase 2)** — 不是 HTML+GSAP,而是 React-tsx 直接吃 Remotion 的帧时钟 (`useCurrentFrame` + `interpolate` + `spring`)。这是让用户**主动给数据帧挂上**的动效增强:hyperframes 出静态/CSS 图表,本模板让柱子真的按数据长出来、数字真的滚动,一眼可辨。

【意图】数据展示帧 — 每周指标 / 增长柱 / KPI,数值应该动起来而不是干放着。适合塞进一条以 hyperframes 为主的视频里的某一个数据段。

【画布】默认 1920×1080,布局全部基于真实画布尺寸 (`useVideoConfig`) 计算,9:16 / 1:1 也不会压扁。

【数据契约 (inputProps)】
- `data.items[]` — 每项 `{label, value}`,就是要画的柱子;最多约 7 根,多了会挤。
- `data.title?` — 左上标题。
- `data.unit?` — 数字后缀,如 `K` / `%`。
- `accent?` / `background?` / `foreground?` — 配色,默认番橙 `#FF5A2C` / 近黑 `#0E0E10` / 纸白 `#F5F5F2`。

【动效结构】
- 每根柱子按 `spring()` 从 0 长到 `value/maxValue` 高度,逐根错峰 (0.12s 一根) 级联进场。
- 数字用与柱子同一条 growth 曲线从 0 滚到 `value`,柱子和数字同时落定。
- 标题 spring 淡入 + 上移;label 在柱子长到 40% 时淡入。

【内容纪律】
- 喂真实数据,别用占位数字。
- `value` 必须是数;非数会被当 0(`enhanceFrameNative` 应在绑定前归一/校验)。
- 柱子数控制在 7 根内。

【离线确定性】纯系统字体栈、内联样式,无外部字体 / 资源 / 网络 — 保证 headless 渲染确定、不黑屏 (对齐桥接的 neutralizeBlockingResources 教训)。

【原创】原创 React-tsx,标准动画柱状图词汇 (count-up + spring 生长) 从零实现,无特定上游来源 (provenance origin = none)。