用途 animated-video 用于创作动画视频或动态设计作品，最终以 HTML 页面形式呈现，并按固定画幅（16:9 或 9:16）导出为视频。适合产品发布视频、基于时间线的动效、逐帧序列与视觉叙事素材。
主要能力
- 时间线引擎：基于 animations_v2.jsx 启动组件，提供 <Stage>、<Sprite start end>、useTime()/useSprite() 钩子、缓动库、interpolate()/animate() 补间，以及 TextSprite / ImageSprite / RectSprite 基础元素。
- 场景编排：<SceneStage> 按既定顺序播放命名场景，并与可导出时长保持同步；即使只有单个场景，也按单元素场景列表组织。
- 播放控制：支持播放/暂停与拖动进度条（scrubber）的逐帧序列。
- 用户可编辑时序：修改某个场景长度时，引擎会重映射场景时钟，使编排整体加速或减速播放而不会被截断；该机制仅对由场景时钟驱动的运动有效，因此场景组件内应使用 useScene() 的 localTime/progress 驱动动画。
- 运动编辑器开关：通过 tweaks_panel.jsx 的 TWEAK_DEFAULTS 中 "motionEditor": true 与 <TweakToggle label="Motion editor"> 控制宿主时间线编辑器的显示，不影响动画、时序数据与导出。
- 导出约定：由 <SceneStage> 自带可导出属性、seek 监听、svg/foreignObject 包装与字体内联；若页面未使用该启动组件，则需自行在唯一根元素上设置 data-om-exportable-video-with-duration-secs（N ≤ 300，超出会被截断），监听 data-om-seek-to-time-frame 事件并在收到时暂停并同步渲染指定时间戳；需要参与音频导出的嵌套 <video> 需带 data-om-exportable-video-play-start / end（以及可选的 play-speed）。
使用方式
- 以 copy_starter_component（kind: "animations_v2.jsx"）开始，读取复制后的文件；不要同时加载 animations.jsx（v2 已包含完整引擎，同时导入以最后加载者为准）。
- 在主文档的普通内联 <script> 中以精确的 JSON.stringify 格式声明场景列表：<script>window.OM_SCENES = '[{"name":"Opening","dur":3},…]';</script>，再以 <SceneStage scenes={window.OM_SCENES}> 传入，并在 children 对象中把场景名映射到组件。场次条目可携带额外字段（文本、调色板、任意参数），场景组件会收到整个条目。
- 为每个视觉元素和每个场景编写可复用的 JSX 组件，并迭代调整时间线。
- 场景内动画一律基于 useScene() 的 localTime/progress 驱动，不要使用自己的时钟，也不要在场景内直接使用 useTime。
- 需要获取元素位置（如让光标或角色在元素间移动）时，使用 refs 获取坐标，并以带阻尼的视口动画跟随光标。
- 若要将某时间点作为评论定位，每秒更新视频根元素的 data-screen-label 为当前时间戳。
- 以场景序列组织作品，按创作契约编写，注意不要自行给 <SceneStage> 之上的包装元素添加可导出属性，否则会产生两个可导出根，导致播放控制与导出静默失效。
适用场景 产品发布视频、动效设计片段、带播放控制的逐帧序列、以视觉叙事为主的短视频素材。创作上建议先确定故事弧线、关键张力与角色并同步给用户，运用预备、缓动、跟随、夸张等动画原则；场景应有建立镜头，并可在真实上下文中呈现（背景或电脑/手机界面），避免元素悬浮于虚空；除刻意停顿外应始终有运动；文字或图像出现后应留出数秒让观众消化。
限制 页面可导出时长 N ≤ 300 秒，超出会被截断；文档中只能有一个元素携带可导出属性，且不得嵌套。未使用启动组件时需自行实现导出契约。Stage 渲染在截图时若返回黑色属于截取伪影，应以实时预览为准。}