A 1970s European editorial poster in motion — a red rule draws across, a giant tilted figure drops in, a three-line headline rises line-by-line, an italic serif standfirst fades.
日本語の概要は準備中です。原文の説明を表示しています。
nexu-io/html-video4,6692026年6月22日 更新
無料GitHub で公開
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.
含まれるファイル（8）
- SKILL.md3.8 KB
- example.md1.2 KB
- package.json367 B
- preview.png148.6 KB
- source/DataRollup.tsx7.2 KB
- source/entry.ts302 B
- source/Root.tsx1.2 KB
- template.html-video.yaml4.6 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
【模板: 数据滚动帧 (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)。
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.
日本語の概要は準備中です。原文の説明を表示しています。
nexu-io/html-video4,6692026年6月22日 更新
Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.
日本語の概要は準備中です。原文の説明を表示しています。
nexu-io/html-video4,6692026年6月22日 更新
Electric split with hand-drawn script — offset panels slide in, display title rises with an outlined word, script strokes itself in.
日本語の概要は準備中です。原文の説明を表示しています。
nexu-io/html-video4,6692026年6月22日 更新
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
日本語の概要は準備中です。原文の説明を表示しています。
nexu-io/html-video4,6692026年6月22日 更新
Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line.
日本語の概要は準備中です。原文の説明を表示しています。
nexu-io/html-video4,6692026年6月22日 更新