Sprite Animation

Generates a single looping CSS animation frame designed to be screen-recorded into a vertical explainer video. You get a full-bleed cream stage with a big serif year, a pixel-art sprite (Hanafuda card, mushroom, 8-bit console) bouncing in sync with kinetic Japanese typography, and a timeline ribbon ticking across the bottom. Everything animates with keyframes, no JavaScript, and the whole scene reads like one beat from a Nintendo history documentary. Good for when the brief says "pixel-art video," "8-bit explainer," or anything retro that needs to feel like motion design frozen in HTML. The workflow is opinionated: read the design tokens, pick your topic and year, build inline SVG sprites, loop at least three independent animations.

skills.sh installs: 247
GitHub stars: 106.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill sprite-animation --agent claude-code

Installs into .claude/skills of the current project.

Files

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.