Turn any static character image into a lightweight, web-ready sprite sheet animation — powered by Kling AI (directly or via the Higgsfield CLI) and Claude Code.
One image + one sentence = production-ready CSS sprite animation.
/animate-character ./character.png "typing excitedly, getting faster"
Adding character animations to websites usually means hiring an animator, learning complex tools like Spine or After Effects, or embedding heavy GIF/video files that hurt performance.
This skill takes a different approach:
- Input: A single static character image (PNG/JPG) + a plain-English animation description
- Output: A single sprite sheet PNG (~50-150KB) + ready-to-paste CSS
No JavaScript runtime needed. No video decoder. No heavy assets. Just a CSS steps() animation that works everywhere — plain HTML, React, Vue, static sites — and weighs kilobytes instead of megabytes.
Source Image → Kling AI Video → Frame Extraction → Sprite Sheet + CSS
(PNG/JPG) (MP4, 2-5s) (ffmpeg, 12fps) (single PNG)
- You provide a character image and describe the animation
- Claude analyzes the image, crafts an optimized Kling AI prompt, and asks for your approval
- Kling AI generates a short animation video from your image
- ffmpeg extracts frames, removes the background (chroma-key), and assembles a sprite sheet
- You get a single PNG + CSS/React code ready to drop into your project
sprites/
├── idle.png # Single sprite sheet PNG (~50-150KB)
└── idle.json # Metadata: frame count, dimensions, CSS + React snippets
Paste the CSS and your character is animated:
.sprite-idle {
width: 200px;
height: 200px;
background: url('idle.png') left center;
animation: sprite-idle-play 2s steps(24) infinite;
}
@keyframes sprite-idle-play {
to { background-position: right center; }
}See it in action: open demo/index.html in your browser.
Always required:
- Claude Code CLI installed
- Node.js 18+
- ffmpeg installed and in PATH
Plus one of these video-generation backends:
- Kling AI API credentials (Access Key + Secret Key)
- Stored as
KLING_ACCESS_KEY/KLING_SECRET_KEYenv vars
- Higgsfield CLI:
npm install -g @higgsfield-ai/cli - One-time
higgsfield auth login - Routes Kling 3.0 by default but also unlocks Seedance 2.0, Veo 3.1, Wan 2.7, Hailuo, etc. via a single flag
The dispatcher auto-detects which one to use, or you can force a choice with --provider=kling / --provider=higgsfield.
| Kling direct | Higgsfield CLI | |
|---|---|---|
| Setup | API key + secret env vars | One-time higgsfield auth login |
| Auth | JWT (handled by our script) | CLI handles it |
| Models | Kling v3 only | Kling 3.0 + 15 others (Veo, Seedance, Wan, Hailuo…) |
| Cost | Direct Kling billing | Higgsfield credits (your account) |
| Best for | Sticking with one well-known API | Easy model swapping, simpler auth |
Windows (PowerShell):
git clone https://github.com/TamerinTECH/claude-skill-klingai-animation.git
cd claude-skill-klingai-animation
.\install.ps1Mac / Linux:
git clone https://github.com/TamerinTECH/claude-skill-klingai-animation.git
cd claude-skill-klingai-animation
chmod +x install.sh && ./install.shThe installer will:
- Check that ffmpeg and Node.js are installed
- Copy the skill to
~/.claude/skills/animate-character - Detect which backend you already have configured (Kling env vars and/or Higgsfield CLI auth) and walk you through setting one up if neither is ready
git clone https://github.com/TamerinTECH/claude-skill-klingai-animation.git
cp -r claude-skill-klingai-animation/skill ~/.claude/skills/animate-charactercd your-project
cp -r /path/to/claude-skill-klingai-animation/skill .claude/skills/animate-charactercd your-project
git submodule add https://github.com/TamerinTECH/claude-skill-klingai-animation.git .claude/skills/animate-characterIf you used the installer above, your backend is already saved. The steps below are only needed for manual installs.
Get keys from the Kling AI Developer Console, then set them as environment variables:
Windows (persistent — survives terminal restarts):
[Environment]::SetEnvironmentVariable("KLING_ACCESS_KEY", "your-access-key", "User")
[Environment]::SetEnvironmentVariable("KLING_SECRET_KEY", "your-secret-key", "User")Mac / Linux (add to ~/.bashrc or ~/.zshrc):
export KLING_ACCESS_KEY="your-access-key"
export KLING_SECRET_KEY="your-secret-key"npm install -g @higgsfield-ai/cli
higgsfield auth login # interactive: opens browser
higgsfield model list --json # verifyAuth lives inside the CLI's own config — no env vars to manage.
/animate-character ./character.png "celebration, happy jump with clapping"
Claude will:
- Show you an analysis of your source image
- Propose a Kling AI video prompt for your approval
- Generate the video and convert it to a sprite sheet
- Deliver the PNG + CSS/React snippet ready to paste into your project
Generate video (auto-detect backend):
node .claude/skills/animate-character/scripts/generate.mjs \
--image=./character.png \
--prompt="A panda bouncing happily on green background" \
--duration=5 \
--output=./output/animation.mp4Force Kling direct API:
node .claude/skills/animate-character/scripts/generate.mjs \
--provider=kling \
--image=./character.png \
--prompt="..." \
--output=./output/animation.mp4Force Higgsfield (with custom model):
node .claude/skills/animate-character/scripts/generate.mjs \
--provider=higgsfield \
--hf-model=kling3_0 \
--image=./character.png \
--prompt="..." \
--output=./output/animation.mp4Convert existing video to sprite sheet:
node .claude/skills/animate-character/scripts/video-to-spritesheet.mjs \
--input=./animation.mp4 \
--output=./sprites \
--fps=12 \
--width=200 \
--name=celebration| Option | Default | Description |
|---|---|---|
--provider |
auto-detect | Backend: kling (direct API) or higgsfield (CLI) |
--image |
(required) | Path to source character image |
--prompt |
(required) | Animation description |
--duration |
5 |
Video duration in seconds (5 or 10) |
--mode |
std |
Quality: std (fast) or pro (higher quality). Kling models only. |
--aspect-ratio |
1:1 |
Output aspect ratio (1:1, 16:9, 9:16) |
--output |
./animation.mp4 |
Output file path |
--model |
kling-v3 |
Kling model version (when --provider=kling) |
--hf-model |
kling3_0 |
Higgsfield job_set_type (when --provider=higgsfield) |
The Higgsfield provider defaults to whatever's in skill/scripts/providers/higgsfield-unlimited.json — currently kling2_6 in std mode (the closest CLI match to "Kling 2.5 Turbo" and the cheapest Kling option at ~10 credits/call).
If you need actually-uncapped Kling generation, use --provider=kling (direct Kling API). It bills against your Kling AI account, not Higgsfield credits.
Cost preflight: Before each generation the script runs higgsfield generate cost and prints the estimated credit charge so you see the cost before committing.
Recommendations for sprite-sheet character animation (character must stay centered, no camera movement, consistent across frames):
| Tier | Model (--hf-model=) |
Cost (observed) | Why |
|---|---|---|---|
| Default | kling2_6 (std) |
~10 credits | Kling family = best character lock available via CLI |
| Cheapest | minimax_hailuo |
~6 credits | Strong character consistency, supports static shot, locked camera prompts |
| Best quality | kling3_0 |
~? credits | "Bind Subject" feature; preliminary cost shown as 1000 by API but actual billing TBD |
Avoid for sprite sheets: veo3*, cinematic_studio_*, soul_cast, wan2_* — all bias toward cinematic camera moves that fight our "centered, static" requirement.
The script auto-snaps --duration to the nearest valid value for the chosen model (Kling: 5/10s, Minimax: 6/10s, Seedance: 4/8/12s).
To update when your Higgsfield subscription changes: edit higgsfield-unlimited.json — map each UI display name to its CLI job_set_type (run higgsfield model list --json).
| Option | Default | Description |
|---|---|---|
--input |
(required) | Path to MP4 video |
--output |
./sprites |
Output directory |
--quality |
high |
Preset: low (8fps, lighter) or high (12fps, smoother) |
--fps |
12 / 8 |
Frames per second to extract. Overrides --quality fps. |
--width |
200 |
Frame width in pixels |
--height |
(auto) | Frame height (auto preserves aspect ratio) |
--remove-bg |
green |
Background removal: green, none |
--format |
horizontal |
Layout: horizontal, vertical, grid |
--name |
spritesheet |
Name for output files and CSS classes |
- Always mention "solid green background" — enables clean background removal
- Always mention "no camera movement" — keeps character centered
- Keep animations short — 2-3 seconds is ideal for looping
- Be specific about motion — describe exactly what moves and how
- Request looping — ask for animation to return to starting pose
Idle:
A cute cartoon panda standing still on a solid green background, blinking slowly, breathing gently with subtle body movement, looking to the right, waiting patiently. Smooth looping animation, 3 seconds. No camera movement.
Celebration:
A cute cartoon panda on a solid green background, doing a small happy jump with a big smile, clapping hands excitedly. Short bouncy movement. Smooth animation, 2 seconds. No camera movement.
Thinking:
A cute cartoon panda on a solid green background, tilting head to the side with a curious expression, one hand on chin, thinking. Gentle movement. Smooth animation, 2 seconds. No camera movement.
| Step | Tool | Details |
|---|---|---|
| Auth | Node.js crypto | JWT token (HS256) generated locally from your keys. Valid 30 min. Credentials never leave your machine. |
| Video | Kling AI API | Image-to-video generation. Polls every 10s until complete (up to 10 min). |
| Frames | ffmpeg | Extracts frames at target FPS, scales to target width. |
| Background | ffmpeg chromakey | Removes green screen, produces transparent PNGs. |
| Assembly | ffmpeg xstack | Combines frames into a single sprite sheet. Falls back to ImageMagick if needed. |
<div class="sprite-idle"></div>
<style>
.sprite-idle {
width: 200px;
height: 200px;
background: url('idle.png') left center;
animation: sprite-idle-play 2s steps(24) infinite;
}
@keyframes sprite-idle-play {
to { background-position: right center; }
}
</style><div
style={{
width: 200,
height: 200,
backgroundImage: `url('/sprites/idle.png')`,
backgroundSize: '4800px 200px',
animation: 'sprite-idle-play 2s steps(24) infinite'
}}
/>| Issue | Solution |
|---|---|
ffmpeg not found |
Install from https://ffmpeg.org/download.html and ensure it's in your PATH |
No provider configured |
Set KLING_ACCESS_KEY+KLING_SECRET_KEY or run higgsfield auth login |
higgsfield CLI not found |
npm install -g @higgsfield-ai/cli then higgsfield auth login |
| Task times out | Try --mode=std for faster generation, or switch to --hf-model=kling2_6 |
| Poor background removal | Use a more saturated green in prompts, or try --remove-bg=none |
| Character looks different | Use the same source image and consistent prompt structure across animations |
| Sprite sheet too large | Reduce --fps (8 is still smooth) or --width |
MIT — use at your own risk. No warranty, no guarantees.
Kling AI API usage is subject to Kling AI's terms. Higgsfield CLI usage is subject to Higgsfield's terms. API/credit costs are your responsibility.
Built by TamerinTech | GitHub