sprite-animation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Sprite Animation Skill

Sprite Animation 技能

Produce a single animated frame of an educational explainer — the kind you might screen-record into a vertical video. Pixel-art mascots, big year display, looping CSS animations, kinetic Japanese / English display type.

制作教育类解释视频的单帧动画画面——可直接录屏制作成竖版视频。包含像素艺术吉祥物、大尺寸年份展示、循环CSS动画、动态日文/英文排版。

Workflow

工作流程

Read the active DESIGN.md (injected above). Pick the loudest serif token for the year, a sturdy sans for headlines, and a mono token for timeline / index labels.
Pick the topic from the brief (e.g. "Nintendo · 1889 — Hanafuda"). You always need: a year, a one-line headline, an animated subject (a pixel sprite — character, object, or icon), and a short caption.
Stage — full-bleed cream / off-white background (
```
#f5efe2
```
) with a subtle paper grain. Keep margins generous; this is one beat of a video.
Top bar — small mono row:
- Left: title slug ("名次の/番組" or "EP. 01 / NINTENDO")
- Right: progress dots ("01 / 12") and a "REC" stamp
Subject animations — at least three independent looping animations on the page:
- Big year: the headline year (e.g. "1889年") fills the lower-left, in a serif display weight. It has a subtle vertical glitch / scanline animation (clip-path keyframes), and a 1-frame "pop" every loop.
- Pixel sprite card: a 96×128 pixel-art card or character (use an inline SVG with crisp
```
shape-rendering: crispEdges
```
  rectangles, or a
```
box-shadow
```
  pixel grid). Subtle bobbing animation (±4px, 1.6s).
- Kinetic kana: 1–2 Japanese / kanji characters that fade-and-slide in sync with the bob (e.g. "花" — hana — flower).
- Tick ribbon: bottom of the stage, a tape/ribbon with year ticks (1889 · 1907 · 1949 · 1977 · 1985 · 2006 · 2017) sliding left at a slow constant speed.
Caption block — small mono caption explaining the trivia: "Nintendo started as a Hanafuda playing-card maker in Kyoto, 1889. Mario didn't show up for another ninety-six years."
Write a single HTML document:
- ```
<!doctype html>
```
  through
```
</html>
```
  , CSS inline, no external JS.
- All animations use
```
@keyframes
```
  +
```
animation: ... infinite
```
  .
- Stage uses a fixed canvas ratio (e.g. 16:9 letterboxed) so the loop reads as a single frame from a video.
- ```
data-od-id
```
  on stage, year, sprite, caption, and tick ribbon.
Self-check:
- The page is one cohesive scene, not a collage. The eye lands on the year first, then the sprite, then the caption.
- At least 3 independent looping animations are visible.
- The color palette is restrained (cream + a single accent red + ink).
- No external assets — all sprites are inline SVG or CSS.

阅读当前的DESIGN.md（已注入上方）。为年份选择最醒目的衬线字体标识，为标题选择稳重的无衬线字体，为时间轴/索引标签选择等宽字体标识。
从需求中选取主题（例如“任天堂 · 1889 — 花札”）。你需要包含以下元素：年份、单行标题、动画主体（像素精灵——角色、物品或图标）以及简短说明。
舞台设置——全屏米色/米白色背景（
```
#f5efe2
```
），带有轻微纸张纹理。留足边距；这是视频中的一个片段。
顶部栏——小型等宽字体行：
- 左侧：标题标识（“名次の/番組” 或 “EP. 01 / NINTENDO”）
- 右侧：进度点（“01 / 12”）和“REC”标记
主体动画——页面上至少包含三个独立的循环动画：
- 大尺寸年份：标题年份（例如“1889年”）占据左下区域，采用衬线粗体字。带有轻微的垂直故障/扫描线动画（clip-path关键帧），且每次循环有一帧“弹出”效果。
- 像素精灵卡片：96×128像素的像素艺术卡片或角色（使用带有清晰
```
shape-rendering: crispEdges
```
  矩形的内嵌SVG，或
```
box-shadow
```
  像素网格）。带有轻微的上下摆动动画（±4px，1.6秒）。
- 动态假名：1-2个日文/汉字字符，与摆动动画同步淡入滑入（例如“花”——hana——花朵）。
- 滚动时间条：舞台底部，带有年份标记（1889 · 1907 · 1949 · 1977 · 1985 · 2006 · 2017）的胶带/时间条以恒定慢速向左滚动。
说明块——小型等宽字体说明，介绍相关知识： "任天堂1889年在京都成立，最初是一家花札牌制造商。马里奥在96年后才问世。"
编写单个HTML文档：
- 包含
```
<!doctype html>
```
  到
```
</html>
```
  的完整结构，CSS内嵌，无外部JS。
- 所有动画使用
```
@keyframes
```
  +
```
animation: ... infinite
```
  实现。
- 舞台采用固定画布比例（例如16:9黑边），使循环画面看起来像是视频的单帧。
- 在舞台、年份、精灵、说明和滚动时间条上添加
```
data-od-id
```
  属性。
自我检查：
- 页面是一个连贯的场景，而非拼贴画。视觉焦点依次为年份、精灵、说明。
- 至少可见3个独立的循环动画。
- 调色板简洁克制（米色 + 单一红色强调色 + 墨色）。
- 无外部资源——所有精灵均为内嵌SVG或CSS实现。

Output contract

输出规范

Emit between

<artifact>

tags:

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

One sentence before the artifact, nothing after.

在

<artifact>

标签内输出：

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

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