motion-frames

动态画面技能

制作一幅铺满画面的动态构图。仅使用内联 CSS 动画 — 页面本身就是循环动画。将其视为一张海报画面，可由导出器（HyperFrames、 Lottie 等）捕获为视频。

工作流

1. 阅读当前生效的 DESIGN.md（已在上方注入）。动态效果的成败取决于 字体对比 — 为标题选择 DS 中表现力最强的衬线字体／展示字体令牌；正文／等宽字体令牌用于标注其他所有内容。
2. 构图 将画布设计为 16:9 的主视觉，包含以下图层，从后到前：
   • 舞台 — 铺满画面的 <main>。使用米白色或 DS 画布背景，并添加 非常微妙的点状网格纹理（CSS 背景，间隔 22–32px 的 radial-gradient 圆点）。
   • 同心圆环 — 2–3 个从焦点向外辐射的 SVG 圆形。 使用 DS 前景色的超细描边（0.5–1px），并设为低不透明度。这些圆环以不同速度旋转（60s、90s、180s）。
   • 焦点标记 — 线框地球仪、风格化物体，或用内联 SVG 绘制的 字母组合。宽度约占画布的 28%。
   • 圆环标签 — 沿某个圆环放置简短词语／音标符号（例如："Hola · Bonjour · 你好 · नमस्ते"）。它们与 圆环一同旋转，并通过 <text> 路径反向旋转，使词语保持正向。
   • 标题 — 放在左下角或底部居中。使用展示衬线字体，在一个词上加斜体 强调。添加细微的 letterSpacing 和不透明度渐显动画（@keyframes type-in）。
   • 画面装饰 — 角落印记（左上角实验室标签、右上角品牌或 期号）和一条细基线。保持静止。
3. 添加动画，仅使用 @keyframes — 不使用 JS：
   • 圆环使用 rotate-slow、rotate-med、rotate-fast。
   • 焦点标记使用 globe-spin。
   • 焦点圆点使用 pulse，约 2s，并添加缓动。
   • 使用 marquee-fade 在加载时显示一次标题。
4. 编写 单个 HTML 文档：
   • 从 <!doctype html> 到 </html>，CSS 内联。
   • 所有动态效果都使用 CSS — 不编写脚本，以便 HyperFrames 或任何帧捕获工具 能够确定性地捕获画面。
   • 在舞台、焦点、圆环、标题和装饰上添加 data-od-id。
5. 自检：
   • 即使在第 0 帧暂停动态效果，构图仍应呈现为一张海报。
   • 至少有 3 个图层以不同速度移动（深度感来自速度差异， 而非视差技巧）。
   • 强调色只出现一次 — 通常用于标题中的斜体词。

输出约定

在 <artifact> 标签之间输出：

<artifact identifier="motion-slug" type="text/html" title="Motion — Title">
<!doctype html>
<html>...</html>
</artifact>

在产物前写一个句子，之后不写任何内容。