mcpField
F
frame-data-rollup

frame-data-rollup

github.com/nexu-ioCreative & media4.8k59 installsUpdated 18w ago
Repository

About frame-data-rollup

frame-data-rollup is a React-tsx template for animated data segments in Remotion videos, with bars and values that grow from supplied data. Canvas-based layout and no external resources support deterministic offline rendering.

Key features

  1. 01Spring-driven data bars
  2. 02Values count up with bar growth
  3. 03Staggered bar entrances
  4. 04Animated title and labels
  5. 05Layouts adapt to canvas ratios

Use cases

  1. 01Create weekly metrics segments
  2. 02Present growth charts
  3. 03Build animated KPI sequences

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nexu-io/html-video --skill frame-data-rollup

After installing, type/frame-data-rollupin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

example.md
package.json
template.html-video.yaml
source/
DataRollup.tsx
entry.ts
Root.tsx

Details

From the project README

【模板: 数据滚动帧 (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)。

Comments

Markdown supported