/sprite-animation

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

Boost this skill

nexu-io@nexu-io

GitHub

From plugin

html-anything

8.8k81 skills

Install

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

How it fires

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

Fires itselfAuto-invocation. Claude 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 循环, 可录视频

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
复古调色板: 红 / 米 / 墨绿

Read it on GitHub ↗

Ships withhtml-anything

From the team behind Open Design — 40k★ · 200+ contributors, production-grade and iterating faster. html-anything is the focused agent-era HTML editor; if it clicks for you, Open Design is where the same team ships at scale.

Get the whole plugin

Stats

TypeScript Node HTML CSS Bash

+7 tags

SQL GitHub Markdown Anthropic Gemini Obsidian Bun

8,827

Stars

857

Forks

Active

Maintenance

HTML