Sprite Animation Skill
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.
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.
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.
1---2name: sprite-animation3description: A pixel / sprite-style animated explainer slide — full-bleed cream stage, bold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom, or 8-bit console), kinetic Japanese display type, ticking timeline ribbon. Reads like a single frame of an educational motion video — looping CSS keyframes, no JS, ready to be screen-recorded into a vertical video. Use when the brief asks for a "sprite animation", "pixel-art video", "8-bit explainer", "history of X explainer", "kinetic typography history", "Nintendo-style", "精灵图动画", "像素动画", or "复古动画".4---5# Sprite Animation Skill
6
7Produce a single animated frame of an educational explainer — the kind you
8might screen-record into a vertical video. Pixel-art mascots, big year
9display, looping CSS animations, kinetic Japanese / English display type.
10
11## Workflow
12
131. **Read the active DESIGN.md** (injected above). Pick the loudest serif
14 token for the year, a sturdy sans for headlines, and a mono token for
15 timeline / index labels.
162. **Pick the topic** from the brief (e.g. "Nintendo · 1889 — Hanafuda").
17 You always need: a year, a one-line headline, an animated subject (a
18 pixel sprite — character, object, or icon), and a short caption.
193. **Stage** — full-bleed cream / off-white background (`#f5efe2`) with a
20 subtle paper grain. Keep margins generous; this is one beat of a video.
214. **Top bar** — small mono row:
22 - Left: title slug ("名次の/番組" or "EP. 01 / NINTENDO")
23 - Right: progress dots ("01 / 12") and a "REC" stamp
245. **Subject animations** — at least three independent looping animations
25 on the page:
26 - **Big year**: the headline year (e.g. "1889年") fills the lower-left,
27 in a serif display weight. It has a subtle vertical glitch / scanline
28 animation (clip-path keyframes), and a 1-frame "pop" every loop.
29 - **Pixel sprite card**: a 96×128 pixel-art card or character (use an
30 inline SVG with crisp `shape-rendering: crispEdges` rectangles, or a
31 `box-shadow` pixel grid). Subtle bobbing animation (±4px, 1.6s).
32 - **Kinetic kana**: 1–2 Japanese / kanji characters that fade-and-slide
33 in sync with the bob (e.g. "花" — *hana* — flower).
34 - **Tick ribbon**: bottom of the stage, a tape/ribbon with year ticks
35 (1889 · 1907 · 1949 · 1977 · 1985 · 2006 · 2017) sliding left at a
36 slow constant speed.
376. **Caption block** — small mono caption explaining the trivia:
38 "Nintendo started as a Hanafuda playing-card maker in Kyoto, 1889.
39 Mario didn't show up for another ninety-six years."
407. **Write** a single HTML document:
41 - `<!doctype html>` through `</html>`, CSS inline, no external JS.
42 - All animations use `@keyframes` + `animation: ... infinite`.
43 - Stage uses a fixed canvas ratio (e.g. 16:9 letterboxed) so the loop
44 reads as a single frame from a video.
45 - `data-od-id` on stage, year, sprite, caption, and tick ribbon.
468. **Self-check**:
47 - The page is one cohesive scene, not a collage. The eye lands on the
48 year first, then the sprite, then the caption.
49 - At least 3 independent looping animations are visible.
50 - The color palette is restrained (cream + a single accent red + ink).
51 - No external assets — all sprites are inline SVG or CSS.
52
53## Output contract
54
55Emit between `<artifact>` tags:
56
57```
58<artifact identifier="sprite-anim-slug" type="text/html" title="Sprite animation — Title">
59<!doctype html>
60<html>...</html>
61</artifact>
62```
63
64One sentence before the artifact, nothing after.
gabrielmoreira