Skill

/sprite-animation

像素美术 + kinetic 字体的解说帧, 纯 CSS 循环, 可录视频

shell

$ npx -y skills add nexu-io/html-anything --skill sprite-animation --agent claude-code

Installs just this skill. Get the whole plugin for auto-invocation.

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/sprite-animation

Context preview

The summary Claude sees to decide when to auto-load this skill.

像素美术 + kinetic 字体的解说帧, 纯 CSS 循环, 可录视频

Stats

Stars7,917

Forks772

LanguageHTML

LicenseApache-2.0

Ships with html-anything

SKILL.md

sprite-animation.SKILL.md

---
name: sprite-animation
zh_name: "像素动画解说"
en_name: "Sprite Animation"
emoji: "🕹️"
description: "像素美术 + kinetic 字体的解说帧, 纯 CSS 循环, 可录视频"
category: poster
scenario: marketing
aspect_hint: "竖版/横版均可"
featured: 8
tags: ["pixel", "8-bit", "复古", "explainer"]
---

【模板: 像素 / 8-bit 动画解说】
【意图】教育型动画的单帧海报, 纯 CSS keyframes 循环, 不用 JS。
【布局】
- Full-bleed cream stage
- Bold display year / 大字数字
- 中心一个像素艺术 mascot (SVG 或纯 CSS 绘制)
- kinetic 中文 / 日文 display 字
- 底部 timeline ribbon 一直走
【设计细节】
- 动画用 @keyframes, 不依赖 JS
- 复古调色板: 红 / 米 / 墨绿