frame-data-rollup

Agent Skills › nexu-io/html-video › frame-data-rollup

frame-data-rollup

GitHub

原生Remotion数据滚动帧，利用弹簧物理实现柱状图生长与数字同步滚动。支持自定义数据、配色及标题，确保离线渲染确定性，适用于视频中的动态KPI或增长指标展示。

templates/frame-data-rollup/SKILL.md nexu-io/html-video

Trigger Scenarios

需要在视频中展示动态增长的柱状图需要将静态数据转化为同步滚动的数字动画制作带有实时数据反馈的KPI汇报视频片段

Install

npx skills add nexu-io/html-video --skill frame-data-rollup -g -y

More Options

Non-standard path

npx skills add https://github.com/nexu-io/html-video/tree/main/templates/frame-data-rollup -g -y

Use without installing

npx skills use nexu-io/html-video@frame-data-rollup

指定 Agent (Claude Code)

npx skills add nexu-io/html-video --skill frame-data-rollup -a claude-code -g -y

安装 repo 全部 skill

npx skills add nexu-io/html-video --all -g -y

预览 repo 内 skill

npx skills add nexu-io/html-video --list

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "poster",
            "entry": "preview.png"
        },
        "surface": "video",
        "featured": 0,
        "scenario": "video",
        "upstream": "https:\/\/github.com\/nexu-io\/html-video",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the Data Rollup Frame to show my weekly metrics as a bar chart where the bars grow from zero and the numbers count up to their real values. Feed it the actual data; keep it to a handful of bars. This is a Remotion-enhanced data frame — the animation should make the figures feel alive.",
        "example_prompt_i18n": {
            "zh-CN": "用「数据滚动帧」把我的每周指标做成柱状图:柱子从 0 长上去、数字滚动到真实数值。喂真实数据,柱子控制在几根以内。这是 Remotion 增强的数据帧,动画要让数字有'活起来'的感觉。"
        }
    },
    "name": "frame-data-rollup",
    "tags": [
        "data",
        "chart",
        "bar",
        "rollup",
        "count-up",
        "remotion",
        "native",
        "kpi",
        "frame"
    ],
    "emoji": "📊",
    "en_name": "Data Rollup Frame",
    "zh_name": "数据滚动帧",
    "category": "video",
    "featured": 0,
    "scenario": "video",
    "example_id": "sample-frame-data-rollup",
    "aspect_hint": "1920×1080 (16:9), also 9:16 \/ 1:1",
    "description": "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.",
    "recommended": 5,
    "example_desc": "数据展示帧 — 柱子按真数据从 0 长出 + 数字 0→目标同步滚动",
    "example_name": "数据滚动帧 · This week on GitHub",
    "en_description": "A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync.",
    "example_format": "markdown",
    "zh_description": "数据滚动帧:原生 Remotion 数据动画 — 柱子按真实数据用 spring 从 0 长上去、数字同步从 0 滚到目标值。静态 HTML 图表做不出的'数字活起来'效果。",
    "example_tagline": "柱子生长 + 数字滚动 (原生 Remotion)"
}

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