首页 / 全部技能 / 内容创作 / wrapped-video
内容创作 · iart-ai/explainer-video-skills

wrapped-video

This skill should be used when the user asks to "make a Spotify Wrapped style video", "build a year in review / year-in-review video", "create a personalized data video", "generate a recap video", "build a wrapped video generator", "turn a data table into shareable videos", or "make per-user stat videos". Covers the data row → one shareable video pattern, the Wrapped scene grammar (big-number reveals, top-X lists, superlatives), animated data counters, vertical 9:16 framing, and batch-rendering many personalized videos from one template.

L4 高权限 · 分级授权与审计V1 已固定执行命令联网读写文件Dual-pass Audit
Author iart-aiGitHub iart-ai/explainer-video-skills ↗Stars 26License MIT(仓库根 LICENSE:MIT License / Copyright (c) 2026 iart.ai;.claude-plugin/plugin.json 声明 "license": "MIT",GitHub API license.spdx_id = MIT)Commit 3e2d411b72
管控等级描述 skill 的能力与建议配套的管控措施,不代表质量或安全认证,也不表示可用或不可用。是否使用由用户和管理者决定。不同 agent 宿主对权限的约束各不相同,请勿假定宿主一定会提供安全兜底。第三方 skill 版权归原作者,使用风险由使用者自行承担。

1实现原理 · 为什么它能做到

整套方法建立在「一个模板 × 一张数据表 → 每行一部片」上:先给一行记录定义类型化 schema,整部视频是该记录的纯函数,不能用一行数据填满的场景不该出现在 Wrapped 里。

skills/wrapped-video/SKILL.md
Define a typed schema for one record. The whole video is a pure function of it.
这条把「批量个性化」从剪辑问题变成数据契约问题——后面并发、命名、去重都建立在「行即输入」上。

第二条不可协商项是「为截图而设计」:每个场景要 2 秒内读完、冻结成静帧也要好看,因为被分享出去的就是那张静帧。

skills/wrapped-video/SKILL.md
2. **Built to be screenshotted.** Each scene must read in under 2 seconds and look good frozen
把分享物(静帧)当设计目标,而不是把视频当目标、截图当副产品。

场景语法固定为 5–7 个短场景类型(Intro / Big-number / Top-X / Superlative / Comparison / Time-heatmap / Outro),每段约 2.5–4s;每年只换数据与配色,语法不变。

skills/wrapped-video/SKILL.md
A Wrapped is a fixed sequence of short scene *types*, each ~2.5–4s.
固定语法是「一个模板撑起百万条个性化视频」的前提——可复用的不是画面而是槽位。

叙事按「升序冲击」编排:把统计量按情绪载荷(大小、稀有度、体面程度)从小到大排,主角数字压轴并停留最久;绝不先出最大数字,否则后面无处可爬。

skills/wrapped-video/SKILL.md
**Sequence stats for rising impact — smallest first, biggest last.**
这条把「排序」提升为叙事设计,而非编辑细节;配套要求是 climax 帧最大最久。

主角必须是观众本人:前两秒出现其名字、用 per-user accent 色、文案全用第二人称;若某一帧对两个不同用户读起来一模一样,这帧就没在做事。

skills/wrapped-video/SKILL.md
If a frame would read identically for two different users, it isn't pulling its weight.
这是一条可操作的验收判据(同一帧对不同行必须不同),而不是「要个性化」的口号。

签名动效是大数字计数:必须由 useCurrentFrame + spring 驱动(禁用 setState/setInterval——渲染器逐帧快照会闪),到 locale 格式化并用 tabular-nums 防数字滚动时宽度抖动。

skills/wrapped-video/SKILL.md
Drive it from `useCurrentFrame()` (never `setState`/`setInterval` — that flickers on render), ease it with a spring, and format with `toLocaleString()`.
与同 pack 的 explainer-video / map-animation 共用同一条帧驱动纪律。

竖屏安全区被量化到像素:渲染 1080×1920,关键内容(名字、数字、列表、CTA)必须落在中心 80% 高度内,避开顶部 12% 与底部 18%(平台 UI 覆盖区)。

skills/wrapped-video/SKILL.md
Render **1080×1920**. Stories/Reels/TikTok crop and overlay UI, so keep all type and key numbers inside the **center 80% height**, clear of the **top 12%** and **bottom 18%**.
被遮挡的不是「美观问题」,而是最该被看见的数字会消失——所以按像素区间给。

批量渲染是这套方法的价值兑现:bundle 一次后逐行 selectComposition + renderMedia 传 inputProps,按稳定 id 命名保证幂等,校验失败的行跳过并记日志而不渲染半成品。

skills/wrapped-video/SKILL.md
The payoff. Render every data row to its own MP4 with `renderMedia`, passing the row as `inputProps`.
「纯函数 + 稳定命名」使重跑可覆盖、失败行可单独重驱——这是它能扩到万级的关键。

2核心能力

01Wrapped 场景语法 + 帧级 storyboard 时间表(7 类场景、22s@30fps 逐场帧区间)
02行级数据契约:zod schema 定义一行记录 + Composition 注册(schema + defaultProps)
03大数字计数组件(spring 驱动 + interpolate + toLocaleString,tabular-nums 防抖宽)
04Top-X 列表错峰入场(每行一个 spring、rank 1 先、动作完全一致)
05百分位条 + 数字同步计数的 climax 场景
06场景编排与转场:<Series> 免手算绝对帧、TransitionSeries + fade/slide
07批量管线:CSV/JSON → schema 校验 → renderMedia → out/wrapped-<id>.mp4(bundle 一次、并发上限、幂等命名、去重、Lambda 扩容)
08竖屏安全区规则 + 冻结可分享的 outro 卡(最重要元素放垂直中心 ~960px)
09配套产出物:每用户的 share still(renderStill 出 outro 帧)与 README 演示 GIF

3外部依赖

KindDependency / Endpoint
clinpx remotion still / render / compositions(单行验证与正式编码)
clinpx tsx(运行批量脚本 render-all.ts)
package@remotion/bundler 与 @remotion/renderer(bundle + 逐行渲染)
packagezod(行级 schema 校验)、p-limit(并发上限)、csv-parse(CSV 解析)、@remotion/transitions(转场)
network@remotion/google-fonts:批量渲染时把字体内联进 bundle(避免 headless 缺字形/FOUT)
api可选:Remotion Lambda(AWS 无服务器扇出),面向万级批量
cliffmpeg / ffprobe(contact-sheet.sh 与 probe-mp4.sh)

4管控建议与判定依据

建议配套管控措施
面向 Agent
分级或逐次授权,建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据(文件路径与关键语句摘要)
  • scripts/: 执行本地脚本或命令: npx remotion still / render / compositions(SKILL.md 指示):按需从 npm 获取并执行 Remot
  • 网络端点: 声明外部网络访问: 构建期:@remotion/google-fonts 会把字体取回并内联进 bundle(reference 明确建议如此,以避免 headless
  • 本地工作目录: 文件读写与工件输出: out/wrapped-<recordId>.mp4(每行一部片,按稳定 id 命名以保幂等)、out/wrapped-<recordId>.jpg(
审计说明: 。判级对象是 skill 自身目录(skills/wrapped-video/:SKILL.md + references/ 三份 + 0 字节 README.md;目录内无脚本、无凭证读取、不写盘)。触发橙档的是执行链与依赖面:① 输出契约要求 `npx remotion still/render` 渲染每行的 MP4,npx 从 npm registry 拉取并执行 Remotion CLI 与 @remotion/* 系列包,并在本地 bundle + headless Chromium 中执行被渲染项目代码(同作者 pack 先例:remotion-video 同因判橙);② 批量路径依赖 tsx、zod、p-limit、csv-parse、@remotion/bundler/renderer/transitions 等第三方包;③ reference 给出的可选扩容路径是 Remotion Lambda(AWS),接入后涉及云端凭据与计费。skill 本体不读凭证/env、无业务 API、不采集、不绕过防护,故非红档。触发条件:只有真正渲染(或启用 Lambda)时才发生;纯写 schema/组件、只做数据校验不渲染不触发。

5第二遍独立确认

  • [ok] 外部依赖调用点复核(npx remotion / npx tsx / @remotion/* / zod / Lambda) — SKILL.md Verify loop 确有 `npx remotion still Wrapped out/f-start.png --frame=0 --props='{...one user...}'` 与 `npx tsx render-all.ts`;batch-pipeline 确有 `import { renderMedia, selectComposition } from "@remotion/renderer";`、`p-limit` 与 `renderMediaOnLambda`;remotion-recipes 确有 @remotion/google-fonts 与 @remotion/transitions 用法。全部落地,非推测。
  • [ok] 是否隐含云端凭据需求 — 本地路径(renderMedia)不需要任何云端凭据;仅可选 Lambda 路径会引入 AWS 配置。SKILL.md/reference 中无 AWS key、无 access token 字面量,也无读取 env 的代码——故按「不读凭据」处理,但在 security.reason 与 verdict.risks 中标注了 Lambda 接入时的凭据/计费含义。
  • [ok] 帧驱动纪律的内部一致性 — SKILL.md 输出契约与 remotion-recipes 开篇「The one rule that prevents broken renders」一致禁止 setState/setInterval/Date.now()/CSS @keyframes 计时;大数字组件示例也确实只用 useCurrentFrame + spring + interpolate。
  • [ok] 数据契约与场景语法的耦合 — wrappedSchema 字段(name / year / minutesListened / topArtists / topGenre / percentile / accent)与场景类型表逐项对应(Intro 用 name+year、Big-number 用 minutesListened、Top-X 用 topArtists、Superlative/Comparison 用 percentile+topGenre、per-user accent 贯穿);未见场景需要而 schema 未提供的字段。
  • [ok] 安全区数值与 storyboard 的自洽性 — 1080×1920 下 top 12% = 0–230px、bottom 18% = 1575–1920px、center 80% = ~230–1575px,与 scene-grammar 的安全区表一致;垂直中心 ~960px 落在中心区内。数值互相自洽。
  • [ok] 跨目录 / 跨 skill 引用可解析性 — 正文引用的 `scripts/contact-sheet.sh`、`scripts/probe-mp4.sh` 位于仓库根(单装本 skill 目录会悬空,需装整个 repo);本 skill 自成闭环,未强依赖兄弟 skill(只需 Remotion 本体)。
  • [ok] 功能声明 vs 实际能力 — frontmatter 宣称覆盖「数据行 → 一条可分享视频」的范式、场景语法、计数动效、9:16 取景与批量渲染,SKILL.md 与三份 reference 逐项兑现(含 CLI 与 Node 两套批量变体);未夸大——不声称自动产出数据或自动分发。

6结论

  • 把「分享静帧」当设计目标,先定 share card 再倒推上升曲线——选题与排布都有可判定的目标函数
  • 数据契约先行(类型化 schema + Composition 注册 + 逐行校验),使「一部片 = 一行数据的纯函数」可工程化兑现
  • 个性化有可操作判据(同一帧对不同用户必须不同),而不是「要有个性」的口号
  • 叙事排序被明确成规则(小→大、climax 最大最久),避免最常见的「先抖出最大数字」结构错误
  • 批量是产品价值所在,且给到工程细节:bundle 一次、幂等命名、去重、并发上限、缩略图 still
  • 适合: 适合「同一支片、每人不同数字」的产品化场景:年度回顾/个人统计(听歌、运动、阅读、消费、游戏、销售战报、学习进度),尤其是需要从一张表批量产出成千上万部竖屏短视频、并要求每部都能截图直发的团队。
    不适合: 不适合没有 per-record 数据的手工剪辑片(skill 明确要求存在数据表);不适合横屏/长片叙事(它锚定 9:16 短场景语法);也不适合需要精细叙事弧与旁白的解说片(应走 explainer-video,本 skill 的场景是槽位化、无旁白的静帧友好型)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload wrapped-video.tar.gz
    sha256: 16427a3a8db59d32…
    Option B · Copy Guide for Agent
    install.json
    agent 读 JSON 指南后会自动从本站下载安装,无需更多说明。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 3e2d411b72.