Habilidade de Animação de Sprite

Produza um único quadro animado de um explicador educacional — do tipo que você poderia gravar a tela em um vídeo vertical. Mascotes em pixel art, exibição do ano em destaque, animações CSS em loop, tipografia cinética japonesa / inglesa.

Fluxo de Trabalho

1. Leia o DESIGN.md ativo (injetado acima). Escolha o token serifado mais chamativo para o ano, um sans robusto para os títulos e um token mono para os rótulos da linha do tempo / índice.
2. Escolha o tópico do briefing (ex: "Nintendo · 1889 — Hanafuda"). Você sempre precisa de: um ano, um título de uma linha, um assunto animado (um sprite de pixel — personagem, objeto ou ícone) e uma legenda curta.
3. Cenário — fundo creme / off-white em tela cheia (#f5efe2) com um grão de papel sutil. Mantenha as margens generosas; este é um quadro de um vídeo.
4. Barra superior — linha mono pequena:
   • Esquerda: slug do título ("名次の/番組" ou "EP. 01 / NINTENDO")
   • Direita: pontos de progresso ("01 / 12") e um carimbo "REC"
5. Animações do assunto — pelo menos três animações em loop independentes na página:
   • Ano em destaque: o ano do título (ex: "1889年") preenche o canto inferior esquerdo, em um peso de exibição serifado. Possui uma animação sutil de glitch vertical / linha de varredura (keyframes de clip-path), e um "pop" de 1 quadro a cada loop.
   • Cartão de sprite de pixel: um cartão ou personagem em pixel art de 96×128 pixels (use um SVG inline com retângulos shape-rendering: crispEdges nítidos, ou uma grade de pixels box-shadow). Animação sutil de balanço (±4px, 1.6s).
   • Kana cinético: 1–2 caracteres japoneses / kanji que desaparecem e deslizam em sincronia com o balanço (ex: "花" — hana — flor).
   • Fita de marcação: na parte inferior do cenário, uma fita com marcações de ano (1889 · 1907 · 1949 · 1977 · 1985 · 2006 · 2017) deslizando para a esquerda em uma velocidade constante e lenta.
6. Bloco de legenda — legenda mono pequena explicando a curiosidade: "A Nintendo começou como fabricante de cartas de baralho Hanafuda em Kyoto, em 1889. Mario não apareceu por mais noventa e seis anos."
7. Escreva um único documento HTML:
   • <!doctype html> até </html>, CSS inline, sem JS externo.
   • Todas as animações usam @keyframes + animation: ... infinite.
   • O cenário usa uma proporção de tela fixa (ex: letterbox 16:9) para que o loop seja lido como um único quadro de um vídeo.
   • data-od-id no cenário, ano, sprite, legenda e fita de marcação.
8. Auto-verificação:
   • A página é uma cena coesa, não uma colagem. O olhar pousa primeiro no ano, depois no sprite, depois na legenda.
   • Pelo menos 3 animações em loop independentes estão visíveis.
   • A paleta de cores é restrita (creme + um único vermelho de destaque + tinta).
   • Nenhum ativo externo — todos os sprites são SVG inline ou CSS.

Contrato de Saída

Emita entre as tags <artifact>:

<artifact identifier="sprite-anim-slug" type="text/html" title="Sprite animation — Title">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes do artefato, nada depois.