Sprite Animation Skill
SkillDocs & knowledgeSprite-animation is a skill that guides an AI agent to build a pixel / sprite-style animated explainer slide: a single self-contained HTML page styled as one frame of an educational motion video. It combines a pixel-art mascot, a large animated display year, kinetic Japanese or English type, and a scrolling timeline ribbon, all driven by looping CSS keyframes with no JavaScript.
Available today. Use it from your connected AI after setup.
No other account needed.
Have a design system with a DESIGN.md covering color, typography, layout, and components available to the agent.
Then ask your AI: use the Sprite Animation Skill skill
What your AI can do with it
- Produces a single self-contained HTML explainer slide with a full-bleed cream stage and pa
- Builds pixel-art mascots as inline SVG with crispEdges rectangles or a box-shadow pixel gr
- Animates a large serif display year with glitch/scanline clip-path keyframes and a loop po
- Adds kinetic Japanese or English display type that fades and slides in sync with the sprit
- Includes a bottom timeline ribbon with year ticks sliding left at a constant speed
- Uses at least three independent looping CSS keyframe animations with no JavaScript
Getting started
- Have a design system with a DESIGN.md covering color, typography, layout, and components available to the agent.
- Give the agent a brief naming the topic, including a year, a one-line headline, an animated subject, and a short caption.
- Ask for a sprite animation, pixel-art video, 8-bit explainer, or similar trigger phrase, or use the example prompt about Nintendo history.
- Open the generated index.html preview to view the animated slide, and screen-record it if a vertical video is wanted.
What this skill tells your AI
The instructions your AI receives, as published by nexu-io/open-design in design-templates/sprite-animation/SKILL.md and read by ahel’s review.
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: crispEdgesrectangles, or abox-shadowpixel 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-idon 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.
Signals
- GitHub stars
- 98k
- Forks
- 11k
- Last commit
- Sep 2026
Others that do the same job
Questions
- Does it use JavaScript?
- No. All animations are pure CSS keyframe loops; the output is a single self-contained HTML slide with no JavaScript.
- What can the animated subject be?
- Any pixel sprite, a character, object, or icon, such as a Hanafuda card, a mushroom, or an 8-bit console, built from inline SVG or a box-shadow pixel grid.
Advanced
- Item type
- skill
- Key
sprite-animation-2- Source
- github.com/nexu-io/open-design