mcpField
S
sprite-animation

sprite-animation

github.com/nexu-ioCreative & media9.3k40 installsUpdated 2w ago
Repository

About sprite-animation

sprite-animation is a design skill for educational animation keyframes in a pixel-art style. It combines a central mascot, large year or number, kinetic text, and a looping CSS animation without JavaScript.

Key features

  1. 01Create pixel-art animation posters
  2. 02Loop with CSS keyframes only
  3. 03Center a pixel-art mascot
  4. 04Add kinetic text and a timeline
  5. 05Use a retro color palette

Use cases

  1. 01Create a frame for an educational animation
  2. 02Design retro pixel-art visuals

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nexu-io/html-anything --skill sprite-animation

After installing, type/sprite-animationin Claude Code to confirm it loaded.

Bundled filesexample.html

Details

From the project README

【模板: 像素 / 8-bit 动画解说】 【意图】教育型动画的单帧海报, 纯 CSS keyframes 循环, 不用 JS。 【布局】

  • Full-bleed cream stage
  • Bold display year / 大字数字
  • 中心一个像素艺术 mascot (SVG 或纯 CSS 绘制)
  • kinetic 中文 / 日文 display 字
  • 底部 timeline ribbon 一直走 【设计细节】
  • 动画用 @keyframes, 不依赖 JS
  • 复古调色板: 红 / 米 / 墨绿

Comments

Markdown supported