name: animated-video
description: "Timeline-based motion design"
user-invocable: true

Animated video / 动画视频

Create an animated video or motion design piece rendered as an HTML page. Build a timeline-based animation with smooth transitions. Design frame-by-frame sequences with playback controls (play/pause, scrubber). Focus on visual storytelling with the Anthropic brand palette. Export-ready at a fixed aspect ratio (16:9 or 9:16). If you need to know the position of an element (eg to move a cursor or character between elements) use refs to grab the position.

创建渲染为 HTML 页面的动画视频或动效设计作品。构建带平滑过渡的基于时间线的动画。设计带播放控制（播放/暂停、进度条）的逐帧序列。聚焦于使用 Anthropic 品牌色板的视觉叙事。以固定纵横比（16:9 或 9:16）达到可导出状态。如果需要知道某个元素的位置（例如在元素之间移动光标或角色），使用 ref 获取位置。

ALWAYS build on the animations_v3.jsx starter for ANY animation piece — including one hosted on a design-components page (the helmet-script + x-import structure IS the starter case, not an exemption). The only exemptions: a minor animated accent inside a larger non-animation design, or the user explicitly asking you not to use the starter. Skipping the starter silently removes the user's timeline editor — scene trims, speed changes, and video export only exist when the page builds on the engine. Do NOT load animations.jsx or animations-v2.jsx alongside it (the engines share window globals — last wins). A project that already uses an older starter keeps it; don't migrate existing animations.

任何动画作品都必须构建在 animations_v3.jsx starter 之上——包括托管在 design-components 页面上的作品（helmet-script + x-import 结构正是 starter 的用例，而非豁免理由）。仅有的豁免：较大的非动画设计中的小型动画点缀，或用户明确要求不使用 starter。跳过 starter 会无声地移除用户的时间线编辑器——场景裁剪、速度调整和视频导出只有在页面构建于该引擎之上时才存在。不要同时加载 animations.jsx 或 animations-v2.jsx（各引擎共享 window 全局——后加载者胜出）。已经在使用旧 starter 的项目保持不变；不要迁移既有动画。

START by calling copy_starter_component with kind: "animations_v3.jsx" — the continuous-composition engine: the whole animation is ONE element tree rendered from one authored-time clock, so elements move, morph, and persist across section boundaries by ordinary interpolation — nothing mounts or unmounts at a boundary. It gives you <CompositionStage>, useComposition() (→ {T, CUES}), <Shot>, <Captions>, an Easing library, and interpolate() / animate() tweens. Read the file after copying.

第一步就调用 copy_starter_component 并传 kind: "animations_v3.jsx"——这是连续构图（continuous-composition）引擎：整个动画是一棵由单一创作时钟渲染的元素树，因此元素通过普通插值就能跨越分节边界移动、变形并持续存在——边界处没有任何东西挂载或卸载。它提供 <CompositionStage>、useComposition()（→ {T, CUES}）、<Shot>、<Captions>、Easing 库，以及 interpolate() / animate() 补间。复制后阅读该文件。

THE AUTHORING CONTRACT (it's in the file's usage block; follow it exactly): declare the scene list as a JSON string literal in a plain inline <script> of the MAIN document — <script>window.OM_SCENES = '[{"name":"Opening","dur":3},…]';</script> (exact JSON.stringify formatting, no spaces) — NOT in a text/babel script and NOT in a sibling .jsx (only vanilla inline script literals are addressable for the editor's write-back); declare window.OM_PLAYBACK the same way; pass both through untouched as <CompositionStage scenes={window.OM_SCENES} playback={window.OM_PLAYBACK}> wrapping ONE component — the whole piece. The scene list is the user-control view (names, order, playback durations); the engine derives the cue table from it, so the literal is the single source of structure. The user edits timing on the host timeline — trim a scene's edge, or set a section's speed — and every edit writes back into your literal and reflows the composition live.

创作契约（在文件的 usage 块中；严格遵守）：在主文档的一个普通内联 <script> 中把场景列表声明为 JSON 字符串字面量——<script>window.OM_SCENES = '[{"name":"Opening","dur":3},…]';</script>（与 JSON.stringify 完全一致的格式，无空格）——不要放在 text/babel 脚本里，也不要放在同级 .jsx 里（只有原生内联脚本的字面量可被编辑器写回寻址）；以同样方式声明 window.OM_PLAYBACK；两者原样透传给 <CompositionStage scenes={window.OM_SCENES} playback={window.OM_PLAYBACK}>，包裹一个组件——即整个作品。场景列表是用户控制视图（名称、顺序、播放时长）；引擎由它推导 cue 表，因此该字面量是结构的唯一来源。用户在宿主时间线上编辑时序——裁剪场景边缘，或设置某节的速度——每次编辑都会写回你的字面量，并实时重排构图。

CUE-FIRST DISCIPLINE (this is what makes a piece read as one continuous video):

1. Write the OM_SCENES literal FIRST — it is the piece's outline. Get {T, CUES} from useComposition() and key ALL choreography to T and CUES.SectionName (authored seconds) — never to your own clock, never to wall-clock time.
2. One helper component per section for readability, but ALL of them render ALL the time inside the one tree, keyed to cues — never conditionally mounted per section. A shared element crossing a boundary is just motion whose start and end straddle a cue.
3. Define exactly three motion helpers up front (e.g. MOTION = {enter, draw, pop} wrapping Easing curves) and use no easing or transform outside them; one caption element, one visible at a time (<Captions> has this built in).

CUE 优先纪律（正是这一点让作品读起来像一条连续视频）：

1. 先写 OM_SCENES 字面量——它是作品的大纲。从 useComposition() 获取 {T, CUES}，并把全部编排键控到 T 与 CUES.SectionName（创作秒数）上——绝不键控到你自己的时钟，绝不键控到墙钟时间。
2. 每节一个辅助组件以保证可读性，但它们全部始终渲染在同一棵树内、键控到 cue——绝不要按节条件挂载。跨越边界的共享元素只是一段起止横跨某个 cue 的运动而已。
3. 预先定义恰好三个运动辅助函数（例如包裹 Easing 曲线的 MOTION = {enter, draw, pop}），在它们之外不使用任何缓动或变换；字幕元素只有一个，同时只显示一条（<Captions> 内置了这一点）。

TIMING IS USER-EDITABLE (time-stretch): when the user trims or speeds a section, the engine replays that section's SAME authored slice over the new playback length — choreography keyed to T retimes, never cuts off. Authored hard cuts are content now, not structure: wrap a shot's elements in <Shot from={CUES.X} to={CUES.Y}> (visibility flips at the cues; children stay mounted so images and videos hold their readiness). A looping piece shows its last authored frame immediately before its first — make them match.

时序可由用户编辑（时间拉伸 time-stretch）：当用户裁剪或加速某节时，引擎把该节同样的创作切片按新的播放时长重放——键控到 T 的编排只是重新计时，绝不会被截断。创作中的硬切现在属于内容而非结构：把一个镜头的元素包进 <Shot from={CUES.X} to={CUES.Y}>（可见性在 cue 处翻转；子元素保持挂载，使图片和视频保持就绪状态）。循环播放的作品在首帧之前会立即显示其最后一个创作帧——让两者匹配。

Give every motion project a tweaks panel (kind: "tweaks_panel.jsx") whose TWEAK_DEFAULTS include "motionEditor": true with a <TweakToggle label="Motion editor"> wired to it. That key is the host timeline editor's visibility gate: the user flips it in the Tweaks panel to hide or show the editor bar, and the animation, its timing data, and export are untouched either way. Declare the TWEAK_DEFAULTS literal in a plain inline <script> of the MAIN document (the /EDITMODE-BEGIN/ convention), so the flip persists.

给每个动效项目配一个 tweaks 面板（kind: "tweaks_panel.jsx"），其 TWEAK_DEFAULTS 包含 "motionEditor": true，并接上一个绑定到该键的 <TweakToggle label="Motion editor">。该键是宿主时间线编辑器的可见性开关：用户在 Tweaks 面板中切换它来隐藏或显示编辑器条，无论怎么切换，动画本身、其时序数据和导出都不受影响。把 TWEAK_DEFAULTS 字面量声明在主文档的普通内联 <script> 中（遵循 /EDITMODE-BEGIN/ 约定），这样切换状态才能持久。

The stage renders inside