Skill de Motion Frames

Produza uma única composição de movimento em tela cheia. Apenas animações CSS inline — a página é o loop. Trate como um frame de pôster que um exportador (HyperFrames, Lottie, etc.) pode capturar em vídeo.

Fluxo de Trabalho

1. Leia o DESIGN.md ativo (injetado acima). O movimento vive ou morre no contraste da tipografia — escolha o token serifado / display mais expressivo no DS para o título; o token de corpo / mono rotula todo o resto.
2. Componha a tela como um herói 16:9 com estas camadas, de trás para frente:
   • Palco — tela cheia <main>. Fundo off-white ou tela DS, textura de grade pontilhada muito sutil (fundo CSS, radial-gradient pontos em intervalos de 22–32px).
   • Anéis concêntricos — 2–3 círculos SVG irradiando de um ponto focal. Traços ultrafinos (0,5–1px) em DS-foreground com baixa opacidade. Estes giram em velocidades diferentes (60s, 90s, 180s).
   • Marca focal — um globo wireframe, um objeto estilizado ou um monograma tipográfico desenhado como SVG inline. ~28% da largura da tela.
   • Rótulos dos anéis — palavras curtas / tokens fonéticos colocados em torno de um dos anéis (por exemplo, "Hola · Bonjour · 你好 · नमस्ते"). Eles co-rotacionam com o anel, com <text> caminhos contra-rotacionados para que as palavras permaneçam na vertical.
   • Título — canto inferior esquerdo ou centro inferior. Título serifado display, acento itálico em uma palavra. Adicione uma animação sutil de revelação letterSpacing + opacidade (@keyframes type-in).
   • Cromagem da moldura — selos de canto (etiqueta do laboratório no canto superior esquerdo, marca ou número da edição no canto superior direito) e uma linha fina de base. Estático.
3. Anime apenas com @keyframes — sem JS:
   • rotate-slow, rotate-med, rotate-fast para os anéis.
   • globe-spin para a marca focal.
   • pulse para o ponto focal, ~2s, com easing.
   • marquee-fade para revelar o título uma vez ao carregar.
4. Escreva um único documento HTML:
   • <!doctype html> até </html>, CSS inline.
   • Todo o movimento usa CSS — sem scripts, para que HyperFrames ou qualquer capturador de frames possa capturá-lo deterministicamente.
   • data-od-id no palco, focal, anel, título, cromagem.
5. Auto-verificação:
   • A composição ainda é lida como um pôster com o movimento pausado no frame 0.
   • Pelo menos 3 camadas se movem em velocidades diferentes (a profundidade vem da velocidade delta, não de truques de parallax).
   • O acento aparece uma vez — geralmente a palavra em itálico no título.

Contrato de Saída

Emita entre as tags <artifact>:

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

Uma frase antes do artefato, nada depois.