Individual skill
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.
templates/frame-data-rollup/SKILL.md
Source commit c414ecc07f795add03807d5d9ce4baefd807cea2
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- Yes
- Observed behavior
- Local scripts
- Last checked
- Nov 9, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 4,828
- Repository last updated
- Jun 21, 2026
- License
- Apache-2.0
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- ai-agent Repository topic
- apache-2 Repository topic
- coding-agent Repository topic
- css Repository topic
- ffmpeg Repository topic
- html Repository topic
- mp4 Repository topic
- open-design Repository topic
- open-source Repository topic
- video Repository topic
- data Declared skill tag
- chart Declared skill tag
- bar Declared skill tag
- rollup Declared skill tag
- count-up Declared skill tag
- remotion Declared skill tag
- native Declared skill tag
- kpi Declared skill tag
- frame Declared skill tag
- data Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 3,873 bytesexample.mddoc · 1,259 bytespackage.jsonruns · 367 bytespreview.pngasset · 152,199 bytessource/DataRollup.tsxruns · 7,355 bytessource/Root.tsxruns · 1,248 bytessource/entry.tsruns · 302 bytestemplate.html-video.yamlasset · 4,706 bytes
Read excerpt
【模板: 数据滚动帧 (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`。
【动效结构】