# MotionPack（动效长廊 · vibe video 仓库）— Remotion 动效模板库（215 个特效）

> 中文：可直接复制使用的 Remotion（React 视频）动效模板：数据可视化、叙事、UI 演示、情绪字幕等。每个特效 = 一个独立 React 组件 + zod 参数 + 默认参数 + 固定尺寸与时长。图表数据均为示例数据。
> English: 215 copy-paste Remotion motion templates. Each effect is a standalone React component with a zod props schema, defaultProps, fixed size and duration. This file is the short entry; details live in the linked files.

本文件是入口（短）。先在「按类型找特效」挑类型文件 → 找到 id → 用 fetch-effect.mjs 拉取 → 渲染单帧确认。

## 按类型找特效 / Effects by type（按视频风格 videoStyle 分组）
- 01 逐帧手绘（FRAME BY FRAME）· 7 个 + 相关 5：https://dongxiao.sites.3ceng.cn/ai/effects/v01.md
- 02 等轴 2.5D（ISOMETRIC）· 2 个：https://dongxiao.sites.3ceng.cn/ai/effects/v02.md
- 03 扁平矢量（FLAT VECTOR）· 14 个 + 相关 27：https://dongxiao.sites.3ceng.cn/ai/effects/v03.md
- 04 线条动画（LINE ART）· 8 个 + 相关 12：https://dongxiao.sites.3ceng.cn/ai/effects/v04.md
- 05 3D 渲染（3D RENDER）· 1 个 + 相关 3：https://dongxiao.sites.3ceng.cn/ai/effects/v05.md
- 06 形变动画（SHAPE MORPH）· 7 个 + 相关 7：https://dongxiao.sites.3ceng.cn/ai/effects/v06.md
- 07 贴纸风科普（STICKER EXPLAINER）· 7 个 + 相关 11：https://dongxiao.sites.3ceng.cn/ai/effects/v07.md
- 08 赛博朋克 HUD（CYBERPUNK HUD）· 15 个 + 相关 3：https://dongxiao.sites.3ceng.cn/ai/effects/v08.md
- 09 拼贴剪贴（COLLAGE CUT-OUT）· 6 个 + 相关 4：https://dongxiao.sites.3ceng.cn/ai/effects/v09.md
- 10 弥散玻璃（AURORA · LIQUID GLASS）· 4 个 + 相关 1：https://dongxiao.sites.3ceng.cn/ai/effects/v10.md
- 11 几何构成 包豪斯（BAUHAUS · ANAMORPHIC）· 1 个 + 相关 1：https://dongxiao.sites.3ceng.cn/ai/effects/v11.md
- 12 复古 Synthwave（SYNTHWAVE · VHS）· 5 个 + 相关 1：https://dongxiao.sites.3ceng.cn/ai/effects/v12.md
- 13 像素风（PIXEL ART）· 5 个 + 相关 3：https://dongxiao.sites.3ceng.cn/ai/effects/v13.md
- 14 液态流动（LIQUID MOTION）· 1 个：https://dongxiao.sites.3ceng.cn/ai/effects/v14.md
- 15 综艺花字（VARIETY CAPTIONS）· 6 个 + 相关 14：https://dongxiao.sites.3ceng.cn/ai/effects/v15.md
- 16 页面 2.5D 推镜（PAGE CAMERA）· 41 个 + 相关 20：https://dongxiao.sites.3ceng.cn/ai/effects/v16.md
- 17 数据新闻编辑风（EDITORIAL DATA）· 23 个 + 相关 14：https://dongxiao.sites.3ceng.cn/ai/effects/v17.md
- 18 水墨国风（INK WASH）· 7 个 + 相关 4：https://dongxiao.sites.3ceng.cn/ai/effects/v18.md
- 20 蓝图工程图（BLUEPRINT）· 3 个 + 相关 3：https://dongxiao.sites.3ceng.cn/ai/effects/v20.md
- — 文字特效（TEXT EFFECTS）· 13 个 + 相关 7：https://dongxiao.sites.3ceng.cn/ai/effects/txt.md
- — 通用（GENERAL）· 9 个 + 相关 3：https://dongxiao.sites.3ceng.cn/ai/effects/gen.md
- — 素材（ASSETS）· 2 个：https://dongxiao.sites.3ceng.cn/ai/effects/asset.md
- — 配色示例（COLOR EXAMPLES）· 1 个：https://dongxiao.sites.3ceng.cn/ai/effects/theme.md
- — 未分类（OTHER）· 27 个：https://dongxiao.sites.3ceng.cn/ai/effects/other.md
- 全部 id 一行一个：https://dongxiao.sites.3ceng.cn/ai/effects/index.md
- 分类（categories）：创意 104 · 素材 18 · UI 73 · 数据可视化 36 · 叙事 159 · 动画 29

## 其他文档 / More docs
- 新效果指南（建工程 / 最小 Root / 渲染单帧 / 改参数 / 新写效果 / props 约定 / 已知坑）：https://dongxiao.sites.3ceng.cn/skills/new-effect-guide.md
- 做片方法与全部技能文档（老孙 PPT 风、motion-craft、quality-gate、style-signatures、提示语库、拍点工具）：https://dongxiao.sites.3ceng.cn/ai/guides.md
- 质量闸门 / 风格指纹（TIP01·七维评审·v01–v15 Signature）：https://dongxiao.sites.3ceng.cn/skills/quality-gate.md · https://dongxiao.sites.3ceng.cn/skills/style-signatures.md
- 音效（sfx-lib 282 条 + 特效自带音效，按用途速查、对齐公式、下载地址、许可）：https://dongxiao.sites.3ceng.cn/ai/sfx.md · JSON：https://dongxiao.sites.3ceng.cn/sfx-index.json
- 主题包 ThemeProvider（renjian / blueprint）：https://dongxiao.sites.3ceng.cn/ai/themes.md
- 「动画」分类 · 水彩画风（开源原片 1:1 复刻）：https://dongxiao.sites.3ceng.cn/ai/animation/style-watercolor.md
- 「动画」分类 · 画风短片（Lemo-Opuscar 各画风 demo 1:1 复刻，MIT，见 NOTICE.md）。每个一篇文档 https://dongxiao.sites.3ceng.cn/ai/animation/style-（id）.md，id：art-deco 装饰艺术 · ascii-crt ASCII · blueprint 蓝图 · crayon-book 蜡笔绘本 · dark-keynote 暗色科技发布 · dataviz 数据叙事 · engraving 铜版画 · hologram-hud 科幻全息界面 · impasto 油画厚涂 · ink-wash 水墨 · iso-infographic 等距信息图 · microgame 微游戏快闪（瓦里奥制造式） · midcentury-toon 50s 扁平卡通 · one-line 一笔画 · papercut-red 红色窗花剪纸 · pixel-rpg 16-bit 像素 RPG · risograph Risograph 丝网印刷 · rubber-hose 1930s 橡皮管卡通 · scifi-toon 科幻情景喜剧卡通 · shadow-puppet 皮影戏 · silent-film 1920s 默片 · silkscreen-poster 丝印旅行海报 · stained-glass 彩色玻璃窗 · swiss-motion 瑞士动态排版 · urban-sketch 钢笔淡彩 · whiteboard 白板讲解 · woodcut 木刻版画

## 机器可读 / Machine-readable
- 全部元数据 JSON（id、用途、尺寸、fps、时长、透明、竖屏适配、propsSchema、defaultProps、dependencies、渲染命令）：https://dongxiao.sites.3ceng.cn/effects.json（约 1.43 MB；只要某几个特效时先读类型文件）
- 单个特效源码（纯文本，内容即 .tsx）：https://dongxiao.sites.3ceng.cn/effects/{Id}.txt
- 共享文件 kits：https://dongxiao.sites.3ceng.cn/effects/kits/{文件名}.txt（例 https://dongxiao.sites.3ceng.cn/effects/kits/netKit.tsx.txt；src/effects 外的在 effects/kits/_root/ 下；数据文件为 .json）
- 在线预览（给人看）：https://dongxiao.sites.3ceng.cn/#/effect/{Id}。在线预览 #/effect/{Id} 是前端 hash 路由：curl / WebFetch 只能拿到首页 HTML，只读文本的 Agent 读不到；请改读 effects/{Id}.txt（源码）和 effects.json（参数、时长、渲染命令）。
- 一条命令拉齐依赖：https://dongxiao.sites.3ceng.cn/templates/fetch-effect.mjs.txt（存成 fetch-effect.mjs）
- 新特效模板：https://dongxiao.sites.3ceng.cn/templates/NewEffectTemplate.tsx.txt · 最小 Root：https://dongxiao.sites.3ceng.cn/templates/remotion-index.ts.txt

## 怎么用 / How to use
1. 建工程（新目录；已有 Remotion 项目就只补缺的包，版本须一致）：
   mkdir mp && cd mp && npm init -y
   npm i remotion@4.0.534 @remotion/player@4.0.534 @remotion/zod-types@4.0.534 @remotion/paths@4.0.534 zod@4.5.4 react@19.3.0 react-dom@19.3.0 && npm i -D @remotion/cli@4.0.534 typescript @types/react@19.3.0 @types/react-dom@19.3.0
   另存 tsconfig.json：{"compilerOptions":{"target":"ES2022","module":"ESNext","moduleResolution":"bundler","jsx":"react-jsx","strict":true,"skipLibCheck":true,"noEmit":true,"resolveJsonModule":true},"include":["src"]}
   个别特效另需：matter-js@^0.20.0 d3-geo@^3.1.1 topojson-client@^3.1.0 world-atlas@^2.0.2（见该特效 dependencies.npm）
2. 拉取：node fetch-effect.mjs {Id}（可多个 id）。它读 effects.json，把 effects/{Id}.txt 存成 src/effects/{Id}.tsx，按 dependencies.kits 下载共享文件（去掉 .txt），按 dependencies.assets 下载素材到 public/。要音效加 --sfx（只要某几个：--sfx=impact,stamp）；只用 CDN 不落地素材加 --no-assets。
   换站点根（镜像 / 本地 dist）：SITE=http://127.0.0.1:8000/ node fetch-effect.mjs {Id}；换素材根：ASSET_BASE=https://镜像/ 。
3. 注册：fetch-effect 同时生成 src/effects/registry.ts（拉过的特效一项一条，用 effects.json 的 exports 导出名 + 尺寸 / fps / 时长函数，经 defineEffect 包好）和 src/remotion/index.ts（最小 Root，只引用你项目里的文件）。已存在的 index.ts 不覆盖；registry.ts 只追加没登记过的 id。手写的话照抄新效果指南第 1 节。
4. 渲染单帧确认：effects.json 的 render.still 有现成命令（npx remotion still src/remotion/index.ts {Id} out/{Id}.png --frame=60 --props=props.json --browser-executable=/usr/bin/google-chrome）；出片：npx remotion render src/remotion/index.ts {Id} out/{Id}.mp4 --props=props.json --concurrency=2 --browser-executable=/usr/bin/google-chrome。remotion still 只渲一帧，命令里不写 --concurrency；渲视频（remotion render）在 16 GB 机器上加 --concurrency=2，一次只跑一个渲染。命令都带 --browser-executable=/usr/bin/google-chrome（系统 Chrome 的路径；装了别处就改成那个路径，用 Remotion 自带的浏览器就删掉这个参数）。透明导出（supportsAlpha=true）见 render.transparentWebm / render.transparentProres。
5. 素材：字体 / 图片 / 音频在七牛 CDN（https://image.3ceng.cn/grok_bot/motionpack/assets/v20261022/，键带版本号、只增不覆盖），由 src/effects/assetUrl.ts 统一出地址。渲染时默认读 CDN；离线用本地文件：REMOTION_ASSET_BASE=local（文件放 public/ 同路径，fetch-effect 默认就下载好了）。
6. 时长：类型文件和 effects.json 写的是默认时长（durationSec = durationInFrames / fps）。有 durationSec 这个 prop 的特效（effects.json 的 durationProp）直接改它；其余特效的时长由 durationProps 列出的参数推导（例 TokenCounterHook = countFrames + hold + 20 帧），改这些参数即可，--frames / 截短会切掉动画。
7. 音效（可选）：特效自带音效 = props.sfx / sfxEnabled / sfxVolume（32 个合成音效）；音效库 sfx-lib = 另一套，282 条，自己混。两套的说明、对齐规则、下载地址都在 https://dongxiao.sites.3ceng.cn/ai/sfx.md。at 规则一句话：特效自带音效（props.sfx）的 at = 画面命中帧（整数帧）。起播帧 = round(at − LEAD×fps − 1)：LEAD 是该音效从开头到峰值的秒数，只有 whoosh 0.25s、whoosh-fast 0.17s、whoosh-deep 0.36s、swish 0.09s、reverse 0.54s、riser 1.32s、nat-air 1.6s 有前奏、会自动提前；其余音效（impact、stamp、pop、tick 等）LEAD = 0，起音在 at 前 1 帧。sfx-lib 是另一套：自己按 start = F/fps − anchor（anchor 取该条 align 指向的 onset / peak / end 秒）算。
8. 字体与授权：特效用到的字体文件在 dependencies.assets 里（开源字体），其余用系统字体。Remotion 本身对部分公司有授权要求，见 https://remotion.dev/license 。
9. 站点不存在的路径返回「首页 HTML + 200」：下载内容以「!doctype html」开头就是路径错了。

## 三种用法 / Three ways（由易到难，每步只渲染单帧）
- A 改参数：从 effects.json 读该特效的 propsSchema + defaultProps → 复制成 props.json 改文字 / 颜色 / 时长 → render.still。
- B 组合：阶段表特效 StageTableStory（rows=[{part,at,dur,props}]）换主题 + 换表 = 新故事；坐标按 1280×720 设计稿写（详见新效果指南「坐标坑」）。
- C 新写：node fetch-effect.mjs --base 拉底座 + 模板 → 复制 NewEffectTemplate.tsx 改画面 → defineEffect（./types）注册 → still 渲一帧。

## props 约定 / Props conventions（全库统一）
下面是常见约定，不是每个特效都有每一项，以该特效的 propsSchema / defaultProps 为准。durationSec 总秒数（只有 durationProp = "durationSec" 的特效有；帧 = 秒 × fps）· transparent 透明背景 · variant 主题变体（多数特效浅色 / 纸底为默认、深色是 variant；Hook / 片头类如 TokenCounterHook 默认就是深色且没有 variant）· xxxColor 颜色 #rrggbb（默认色看 defaultProps；describe 写「可选」的颜色不设 = 默认画面，设了才生效；写「已停用」的只为兼容旧 props，不影响画面）· seed 随机种子（只用 remotion 的 random(seed)）· 文案都在 props 里 · sfx / sfxEnabled / sfxVolume 由注册表 withSfx 统一加 · 纯帧驱动：禁用 CSS animation / setTimeout / rAF / Math.random。
旧外观开关：IsoCityBlock layout / RidgeLines look / SynthwaveSunset scene 设 'classic' 逐字节还原 v63 及以前。

## 风格体系 / Style system
- styleTags = [主风格, ...副风格]，videoStyle = 主风格；effects.json 的 videoStyles[] 有 24 类（status：ready 已备 / approx 近似 / planned 计划中）。用户说「想要某种风格」→ 先找类型文件，再看 related。
- 新特效归类：src/styles/styleTags.ts 的 STYLE_TAGS 补一行（主风格只有 1 个；通用字幕 / 标题 = txt；拿不准 = gen）。
- styles（ThemeProvider 主题包）管颜色 / 字体 / 节奏，styleTags 管分类，别混。