motion-frames

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Motion Frames Skill

Produce a single full-bleed motion composition. Inline CSS animations only — the page is the loop. Treat it as a poster frame that an exporter (HyperFrames, Lottie, etc.) can capture into a video.

制作一款全屏的单帧运动合成作品。仅使用内联CSS动画——页面本身就是循环动画。将其视为可被导出工具（HyperFrames、Lottie等）捕获为视频的海报帧。

Workflow

工作流程

Read the active DESIGN.md (injected above). Motion lives or dies on typography contrast — pick the most expressive serif / display token in the DS for the headline; the body / mono token labels everything else.
Compose the canvas as a 16:9 hero with these layers, back to front:
- Stage — full-bleed
```
<main>
```
  . Off-white or DS-canvas background, very subtle dotted grid texture (CSS background,
```
radial-gradient
```
  dots at 22–32px intervals).
- Concentric rings — 2–3 SVG circles radiating from a focal point. Ultra-thin strokes (0.5–1px) in DS-foreground at low opacity. These rotate at different speeds (60s, 90s, 180s).
- Focal mark — a wireframe globe, a stylized object, or a typographic monogram drawn as inline SVG. ~28% of the canvas wide.
- Ring labels — short words / phonetic tokens placed around one of the rings (e.g. "Hola · Bonjour · 你好 · नमस्ते"). They co-rotate with the ring, with
```
<text>
```
  paths counter-rotated so the words stay upright.
- Headline — bottom-left or center-bottom. Display serif, italic accent on one word. Add a subtle
```
letterSpacing
```
  + opacity reveal animation (
```
@keyframes type-in
```
  ).
- Frame chrome — corner stamps (top-left lab tag, top-right brand or issue number) and a thin baseline rule. Static.
Animate with
```
@keyframes
```
only — no JS:
- ```
rotate-slow
```
  ,
```
rotate-med
```
  ,
```
rotate-fast
```
  for rings.
- ```
globe-spin
```
  for the focal mark.
- ```
pulse
```
  for the focal dot, ~2s, easing.
- ```
marquee-fade
```
  to reveal headline once on load.
Write a single HTML document:
- ```
<!doctype html>
```
  through
```
</html>
```
  , CSS inline.
- All motion uses CSS — no scripts, so HyperFrames or any frame-grabber can capture it deterministically.
- ```
data-od-id
```
  on stage, focal, ring, headline, chrome.
Self-check:
- The composition still reads as a poster with motion paused at frame 0.
- At least 3 layers move at different speeds (depth comes from delta velocity, not parallax tricks).
- Accent appears once — usually the italic word in the headline.

阅读当前的DESIGN.md（已注入上方）。运动效果的成败取决于排版对比度——从设计系统（DS）中选择最具表现力的衬线/展示字体作为标题；正文等宽字体用于其他所有标签。
构图：将画布设置为16:9的英雄区，按从后到前的层级排列：
- 舞台——全屏
```
<main>
```
  元素。背景为灰白色或设计系统画布色，带有非常细微的点状网格纹理（CSS背景，使用
```
radial-gradient
```
  实现间隔22–32px的圆点）。
- 同心环——2–3个从焦点向外辐射的SVG圆形。使用设计系统前景色的极细描边（0.5–1px），低透明度。这些圆环以不同速度旋转（60秒、90秒、180秒一圈）。
- 焦点标记——线框地球仪、风格化对象或文字组合图案，以内联SVG绘制。宽度约为画布的28%。
- 环标签——短词/语音标记放置在其中一个圆环周围（例如“Hola · Bonjour · 你好 · नमस्ते”）。它们随圆环一同旋转，
```
<text>
```
  路径反向旋转以保持文字直立。
- 标题——位于左下角或底部中央。使用展示衬线字体，其中一个单词采用斜体强调。添加细微的
```
letterSpacing
```
  + 透明度渐显动画（
```
@keyframes type-in
```
  ）。
- 框架装饰——角落标记（左上角实验室标签、右上角品牌或期号）和细基线。静态元素。
动画：仅使用
```
@keyframes
```
实现——无需JS：
- 为圆环设置
```
rotate-slow
```
  、
```
rotate-med
```
  、
```
rotate-fast
```
  动画。
- 为焦点标记设置
```
globe-spin
```
  动画。
- 为焦点圆点设置
```
pulse
```
  动画，时长约2秒，带缓动效果。
- 为标题设置
```
marquee-fade
```
  动画，在页面加载时一次性渐显。
编写单个HTML文档：
- 包含
```
<!doctype html>
```
  到
```
</html>
```
  的完整结构，CSS内联。
- 所有动效均使用CSS实现——无脚本，确保HyperFrames或任何帧捕获工具可确定性地捕获动画。
- 在舞台、焦点、圆环、标题、装饰元素上添加
```
data-od-id
```
  属性。
自我检查：
- 动画暂停在第0帧时，作品仍可作为海报正常阅读。
- 至少有3个层级以不同速度运动（层次感来自速度差，而非视差技巧）。
- 仅出现一处强调——通常是标题中的斜体单词。

Output contract

输出约定

Emit between

<artifact>

tags:

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

One sentence before the artifact, nothing after.

在

<artifact>

标签内输出：

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

在artifact前写一句话，之后无内容。