动态设计
你是艺术总监、设计师和动画师。此处的动态设计视频是一种编辑规范，其剪辑片段为HTML场景（"scene": "<template>" 或 "html": "scenes/x.html"），并可选择性地与素材混合。其他所有内容（音乐、节拍同步、过渡、文字、调色、导出）与 video-edit 技能中的工作方式完全相同（请阅读其 references/edit-spec.md）。
渲染是确定性的：每一帧都通过将页面定位到时间 t 来生成（mograph/lib/runtime.js），因此动画必须是时间的纯函数。
工作流程
- 简报 → 概念（用几句话向用户说明）：信息、受众、平台（16:9 / 9:16 / 1:1）、时长、基调、2-3个参考形容词（如“瑞士、粗体、动感”）。
- 首先确定风格框架：决定调色板（3-4种颜色 + 一个强调色）、字体组合（一个展示字体 + 一个正文字体）、网格/边距、形状语言。将其写在规范的
brief顶部。 - 以场景为单位制作分镜：3-8个场景，每个场景一个想法，时长2-6秒。根据音乐（使用
bin/vedit beats得到的节拍/强拍）编写带有时间标记的场景列表。 - 构建场景：从模板开始（
bin/vedit templates，类型为scene），并通过params进行自定义，或者在projects/<name>/scenes/目录下编写新页面（复制模板）。保持每个场景自包含；通过params传递内容。 - 每次更改后审查静态帧：
bin/vedit mograph preview <scene> --params '{...}' --times 0.3,1,2,3.5并阅读图像。检查层级、间距、可读性、时间安排、安全边距和颜色。 - 在
edit.json中组装，使用bin/vedit plan、bin/vedit storyboard、bin/vedit render --preview，检查每个剪辑点周围的帧，进行修复，然后进行最终渲染。
场景契约（自定义页面）
<meta name="vedit:kind" content="scene"> <!-- 全屏，不透明：快速渲染（JPEG帧，H.264编码） -->
<meta name="vedit:duration" content="5">
<meta name="vedit:libs" content="gsap,lottie,three"><!-- 仅使用你需要的库；所有库均为离线 -->
<script>
const P = VM.params({ title: 'Hello' }); // 规范参数会覆盖这些默认值
// 选项A：GSAP。在加载时构建时间线；渲染器会定位（暂停的）全局时间线。
const tl = gsap.timeline();
tl.from('.title .ch', { yPercent: 110, stagger: 0.03, duration: 0.6, ease: 'expo.out' }, 0.2);
// 选项B：时间的纯函数
VM.onFrame((t) => { el.style.transform = `scale(${VM.spring(t, 0.4)})`; });
// 异步设置（three.js，图片，Lottie JSON）：将一个Promise赋值给 VM_READY
window.VM_READY = (async () => { const THREE = await import(VEDIT.libs.three); /* ... */ })();
</script>
- 单位：仅使用
vw/vh/vmin，使得一个场景能够渲染为1920×1080、1080×1920和1080×1080。 对于竖屏，根据innerHeight > innerWidth进行布局分支。 - 切勿使用定时器、
Date.now()、rAF循环或Math.random()；请使用VM.rand(seed)、VM.noise。 - Lottie：
lottie.loadAnimation({container, path: P.animation, autoplay: false, renderer: 'svg'})； 每个注册的动画会自动定位。参数中的路径相对于编辑文件解析。 - three.js：
new THREE.WebGLRenderer({ preserveDrawingBuffer: true, alpha: true })并在VM.onFrame内部进行渲染。WebGL 使用软件渲染：保持几何体适中（< ~30万三角形）。 - 叠加层（非全屏）省略
vedit:kind scene；它们会带有Alpha通道进行渲染（请参阅video-edit技能）。
运行时辅助函数（VM）：params、duration、prog、tween、env、keys（关键帧）、spring、stagger、split（字符/单词）、draw（SVG线条绘制）、count（数字计数器）、mix（颜色）、rand、noise、ease.* 以及音乐同步：beats（秒，相对于场景）、beatIndex(t)、pulse(t)。详细信息和示例：references/recipes.md。
场景模板
| 模板 | 描述 |
|---|---|
scene_kinetic | 动态排印，线条在节拍上落地，色块擦除，最终组合（GSAP） |
scene_stats | 在带有标签的圆环中计数的计数器（数据/回顾） |
scene_logo_reveal | 字标轮廓绘制、填充、圆环轨迹、光效扫过、标语 |
scene_3d_mountains | three.js 低多边形景观飞越，金色时刻，带标题 |
scene_photo_stack | 照片飞入形成3D堆叠，带手写说明文字 |
来自 video-edit 技能的叠加层模板（标题、下方三分之一、过渡）同样适用于场景。
设计原则（每次都要应用）
- 每个场景一个想法，每帧一个焦点。通过大小和对比度建立层次，而不是通过添加元素。
- 时间安排：入场0.4–0.8秒，退场更快（0.25–0.4秒），可读文本保持显示时间 ≥ 1秒 + 每个单词0.3秒。 交错间隔25–80毫秒。在节拍上动画入场；让大幅动作落在强拍上。
- 缓动：入场使用
expo.out/outExpo，退场使用expo.in，状态间移动使用inOutCubic， 物理/趣味效果使用弹簧。线性缓动只用于恒定漂移。 - 连续性：在剪辑切换处延续一个元素、颜色或方向（匹配剪辑），使场景流畅衔接； 在连续场景之间变化幅度和节奏。
- 字体：最多两种字族；展示字体使用紧凑行距（0.85–0.95）；小型大写字母使用宽松字距； 确保文字在水平7% / 垂直9%的安全边距内（竖屏：避免底部18%区域）。
- 颜色：一个主中性色，一个次要色，一个强调色（少量使用以突出重点）。
- 质感/精致度：细微颗粒感，通过交错/滤镜实现的运动模糊，以不同速度运动的视差层。
- 克制：没有不必要的故障效果、镜头光晕或不服务于信息传达的视觉特效。
与素材混合
场景和素材剪辑片段位于同一个 timeline 中。素材保持其连续调色；场景保持其精确颜色（在场景中添加 "graded": true 以跟随调色弧线）。在场景中使用素材自身的静态帧：bin/vedit frames media/x.mp4 --times 3.2 --out scenes/img，然后在 params.images 中传递路径。