mcpField
F
frame-data-rollup

frame-data-rollup

github.com/nexu-io创意与媒体4.8k59 次安装18 周前更新
代码仓库

关于 frame-data-rollup

frame-data-rollup 是用于 Remotion 视频数据展示段的 React-tsx 模板，让柱形和数值随数据滚动动画呈现。它按画布尺寸布局，并以无外部资源的实现支持确定性离线渲染。

主要功能

  1. 01柱形按数据值弹簧生长
  2. 02数值沿同一曲线递增
  3. 03柱形依次错峰进场
  4. 04标题与标签动画显现
  5. 05适配不同画布比例

适用场景

  1. 01制作每周指标视频片段
  2. 02呈现增长柱状图
  3. 03制作动态 KPI 数据段

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/frame-data-rollup确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

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

详细介绍

来自项目 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)。

评论

支持 Markdown