SuperAPI AI 工具集

frame-data-rollup

设计与创作

查看项目

更新于 10-16 06:51

技能介绍

用途:这是一个原生 Remotion 模板(RFC-08 Phase 2),用于数据展示帧,如每周指标、增长柱、KPI。它让柱子按数据真实长出来、数字真实滚动,适合嵌入以 hyperframes 为主的视频中的某个数据段。

主要能力:基于 React-tsx 直接使用 Remotion 帧时钟(useCurrentFrame + interpolate + spring)。每根柱子按 spring() 从 0 长到 value/maxValue 高度,逐根错峰(0.12s 一根)级联进场;数字用与柱子同一条 growth 曲线从 0 滚到 value,柱子和数字同时落定;标题 spring 淡入并上移,label 在柱子长到 40% 时淡入。默认画布 1920×1080,布局基于真实画布尺寸(useVideoConfig)计算,9:16 / 1:1 也不会压扁。

使用方式:通过 inputProps 传入数据契约。data.items[] 每项为 {label, value},即要画的柱子,最多约 7 根;data.title? 为左上标题;data.unit? 为数字后缀,如 K / %;accent? / background? / foreground? 为配色,默认番橙 #FF5A2C / 近黑 #0E0E10 / 纸白 #F5F5F2。

限制:喂真实数据,别用占位数字;value 必须是数,非数会被当 0(enhanceFrameNative 应在绑定前归一/校验);柱子数控制在 7 根内。纯系统字体栈、内联样式,无外部字体 / 资源 / 网络,保证 headless 渲染确定、不黑屏。原创 React-tsx,标准动画柱状图词汇从零实现,无特定上游来源。