【免费下载链接】animateProcedural animation in any style for Claude Code: short single-file canvas videos with story, look and storyboard check-ins. 7 built-in styles or one matched from your references, your own music (beat-mapped), real product screenshots, every format from one piece.项目地址https://gitcode.com/gh_mirrors/animate15/animate点击查看免费下载Animate 是面向 Claude Code 的程序化动画技能它把「故事 视觉风格 分镜」写进代码产出可渲染为 MP4 的短小单文件 canvas 视频内置 7 种画风并支持按你的参考图自定义。整部作品由两份“配置”驱动作品目录下的piece.json元信息、构建与审查规则和src/head.html里的TIMELINE常量分镜、节拍、声音提示点。读懂这两份配置等于读懂了 Animate 作品的全部结构。 一份 piece.json 的完整结构每个作品位于pieces/name/piece.json是它的“户口本”。官方模板见 piece.json完整范例见 examples/history-of-ai/piece.json{ name: starter, title: Starter piece, format: { width: 1080, height: 1920, fps: 24, bpm: 120, duration: 8.0, frames: 192 }, storyFormat: F2 morph chain, style: cut-paper, review: { safe: { top: 240, bottom: 420, right: 140 }, refs: {} } }基础字段name / title / storyFormat字段含义name作品名目录名的规范写法title展示用的作品标题storyFormat叙事格式编号来自 FORMATS.md 的 8 种故事格式如F2 morph chain时间线 形状变形、beat-cut踩拍硬切format播放规格六参数键含义常用默认width/height渲染分辨率1080×19209:16fps帧率24bpm音乐网格速度120一个 8 分音符 6 帧duration/frames时长秒与总帧数二者需自洽8.0 / 192 24fps 120 BPM 是刻意搭配的切点和变形中心都能落在整帧上review.mjs靠这个网格验证节奏。style一行代码切换画风style指向 styles/ 下的风格插件构建时由 build.mjs 自动拉入对应的kit.js。内置 8 个选项7 种内置 自定义formats一份作品出多种画幅formats: [9:16, 1:1, 16:9]列出要输出的画幅第一个是主画幅保留final.mp4文件名。配合LX/LY/UNIT布局函数场景会按画幅自动重排而不是裁剪。导出时执行node tools/export.mjs pieces/name --formats 9:16,1:1,16:9即可一次出片。music 与 voice接入你自己的声音music: { file: audio/track.wav, start: 12.0, gain: 0, fade: 0.5 } voice: { file: voice/voice.wav, music: -12, gain: 0 }music用你自己的曲目替换合成配乐WAV/MP3/M4Astart是歌曲中作品的起点tools/beats.mjs会生成节拍图切点全部对齐这首歌的节拍。voice配音轨道music是配乐垫在配音下的 dB 值说话时还会自动闪避最终归一到 −14 LUFS。scenes 与 build构建顺序scenes: [src/era-01.js, src/era-02.js]长作品可把src/scenes.js拆成多个时代文件便于多 Agent 并行绘制build: [...]完全自定义构建顺序默认head → kit/core → style → scenes → bridges → kit/morph → kit/board → score。review审查工具的配置键作用safe手机平台 UI 的禁用区top/bottom/rightreview.mjs 会在竖版预览上画红线校验refs{ 镜头id: [参考图路径] }审查时把关键帧与参考图并排对比textIgnore[[起, 止, 原因]]声明“故意拥挤”的文字时段避免误报deadMax静止画面告警阈值默认 3s TIMELINEhead.html 里的作品总谱TIMELINE定义在 head.html通过window.TIMELINE暴露给渲染器、导出器与审查器——所有工具都从这里读片长、分镜和节拍。核心字段速查表字段含义width / height / fps / bpm / duration / frames / loop播放规格与piece.json的format对应safe/aspect当前画幅的禁用区与宽高比名如9:16gridOffset自备曲目时首个节拍偏移网格整体平移format故事格式标识morph-chain/F2/F4/F5审查器据此追加专项检查shots镜头表{ id, key, era, t0, t1, title }每 0.25s 出联系表cuts/morphs硬切与形状变形桥的中心时刻秒落在 8 分网格上cues命名提示点{ name: t 或 [t1,t2,...] }场景动作全部按它调度acts幕结构{ name, role, t0, t1 }role可选build、journey、peak、silence、gift、goodbye等驱动 STORY ARC 检查board分镜板每个节拍一张关键帧{ t, title, sound, next }narration旁白行t0/t1/text导出时生成字幕 SRTanchor主角锚点{ t0, t1, x, y, tolerance }最快段落里主角必须钉在屏幕上gpu置true表示 WebGL 作品审查与导出自动切 GPU 上下文board分镜板就是验收单board数组渲染成故事板——15 个节拍、每格含时间点、画面描述、声音与衔接去向用户按格子编号逐格点 /通过后这些格子就直接成为成片里的场景函数不再重画实战示例60 秒 AI 简史examples/history-of-ai/src/head.html 展示了成熟作品的完整用法15 个镜头、13 个变形中心加 1 个硬切、cues里eliza是 6 个时刻的数组一台打字机逐字敲出、anchor把火花主角钉在 (470, 880) ±40px 内的 41.25–43.4s 快切段acts则用silence → gift完成“沉默前奏 最响一击”的高潮配方。 两份配置如何联动build.mjs读piece.json的style/scenes/build把src/各片段与风格套件拼成单文件index.htmlbeats.json、voice.json、assets/会被自动注入为BEATS/VOICE/ASSETS常量。export.mjs从window.TIMELINE读取width / height / frames / fps决定视口按piece.json的music/voice混音按formats[0]命名输出文件。review.mjs同时读两份TIMELINE提供切点、镜头、幕与锚点piece.json提供安全区、参考图与文字豁免清单产出联系表、切点网格、故事弧线、LUFS 等量化报告。✅ 新手快速上手清单从 templates/piece 或 templates/beat-cut 复制起步改piece.json的name/format/style在head.html里填SHOTS与TIMELINEboard先只写 2–4 格关键帧node tools/build.mjs pieces/name构建node tools/still.mjs抽帧确认外观补齐boardnode tools/storyboard.mjs渲染分镜板拿用户点头node tools/export.mjs pieces/name --share出片node tools/review.mjs过检——报告数字而不是“看起来不错”这是 SKILL.md 的硬性规定。记住一句话piece.json管“这是什么、怎么构建、怎么审查”TIMELINE管“每一秒画什么、切在哪、响在哪”。两份配置写清楚整部动画的骨架就已经完成了。赞分享【免费下载链接】animateProcedural animation in any style for Claude Code: short single-file canvas videos with story, look and storyboard check-ins. 7 built-in styles or one matched from your references, your own music (beat-mapped), real product screenshots, every format from one piece.项目地址https://gitcode.com/gh_mirrors/animate15/animate点击查看免费下载相关推荐Frappe Gantt API 完全参考手册每个配置项详解Frappe Gantt API 完全参考手册每个配置项详解 Frappe Gantt 是一款优秀的开源 JavaScript 甘特图组件提供丰富的 API前端图表库数据可视化Vuep API 参考6 个 Props、事件与全局配置一览表Vuep API 参考6 个 Props、事件与全局配置一览表 Vuep 是一个 Vue Playground 在线预览组件提供「左侧实时编辑、右侧即时预览text-humanizer 配置参数全解析从 deepseek_api_key 到 temperature8 个关键选项一文看懂text humanizer 配置参数全解析从 deepseek_api_key 到 temperature8 个关键选项一文看懂 text humaniz上一篇如何在 TapCanvas 中定制自己的 AI 影视工作流可复用 DAG 与工作流模板完整实践下一篇为什么说 quiche 是最被低估的 Rust 基础设施库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
