Character Animation

Turn a static character or asset image into a looping animated character, delivered as a moving SVG plus animated WebP and GIF. Use this whenever the user wants to animate, bring to life, or "make move" a character, mascot, logo, creature, sprite, icon, or any asset image — or wants a moving/animated SVG, WebP, or GIF made from an image — or mentions generating a sprite sheet animation, or names "Nano Banana 2" / Gemini image generation for animation. Also use it to convert an EXISTING sprite sheet (a grid of frames) into those animated formats. Trigger even when the user just says things like

10 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add karem505/character-animation-skill --skill character-animation

Manual install

git clone --depth 1 https://github.com/karem505/character-animation-skill.git /tmp/character-animation-skill
mkdir -p ~/.claude/skills
cp -r /tmp/character-animation-skill/. ~/.claude/skills/character-animation

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Character Animation

Turn one static character image into a looping animation. The pipeline is:

```
character image + motion description
        │  (Nano Banana 2 — gemini-3.1-flash-image, 4K)
        ▼
   4K sprite sheet (grid of frames, white bg)
        │  (slice grid · key out background · assemble)
        ▼
   moving SVG  +  animated WebP  +  animated GIF   (transparent, looping)
```

Scripts (`scripts/`):
- `generate_spritesheet.py` — Mode 1: one Nano Banana 2 call → a whole sprite sheet.
- `generate_posed_frames.py` — Mode 2: one call PER frame, edited from a fixed base
  plate, for coherent motion.
- `frames_to_sheet.py` — Mode 2: normalizes per-frame output (locks scale/position)
  into a clean transparent grid sheet.
- `interpolate_frames.py` — Mode 2: synthesizes motion-compensated in-betweens
  (keyframe-then-interpolate) for extra fluidity.
- `video_to_frames.py` — Path C: extract a time range from an existing video clip
  into per-frame PNGs.
- `remove_bg_ml.py` — ML keyer: shape-based (U²-Net) background removal for subjects
  the color keyers can't separate (white-on-white, photos, video frames).
- `spritesheet_to_animation.py` — shared: any sheet → the three animated files.

There's also a second entry point — **Path C** — that skips generation entirely and
turns an existing **video clip** into the same three looping, transparent files.

A Google Gemini API key is required for generation. Set it once via the

Read the full skill on GitHub

Details

Skill name: character-animation
Repository: karem505/character-animation-skill
License: MIT
Repo updated: 29 June 2026

FAQ

What does the Character Animation skill do?

How do I install the Character Animation skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add karem505/character-animation-skill --skill character-animation. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Character Animation popular?

It lives in karem505/character-animation-skill, which has 10 GitHub stars and 1 forks.

Related skills

Liquid Glass Frontend

ngocanhnckh/liquid-glass-frontend-skill

Use when building a beautiful, distinctive, awwwards-tier web frontend — landing pages, dashboards, web apps, marketing sites — that needs Apple-style liquid-glass surfaces, choreographed motion.dev animations, and creative editorial layouts instead of the generic SaaS look (icon-card rows, centered heroes, default fonts, uniform fade-ins). Covers creative direction and signature interactions, the frost/blur glass material, single-source color tokens with dark+light theming, scroll/stagger/parallax/scroll-scrubbed animation, type-as-hero typography, and asymmetric grid-breaking composition.

Frontend & Design

Bufatechno Webgamedev

bufatechno/bufatechno-webgamedev

BUFATECHNO WEB GAME DEV — skill for building complete, production-ready web games with Three.js (WebGPU/TSL) or Babylon.js (WebGPU/Havok). Optimized for ZCode and Claude. Covers scaffolding, ECS, PBR/IBL, WebGPU/TSL, VFX/particles/post-processing, Web Audio, assets (GLTF/Draco/KTX2/Splat), 2D canvas/sprites, and animation (mixer/skeletal/morph/blending). Use when user asks to create, build or ship any 3D browser game — FPS, voxel, third-person, platformer, racing, flight, tower defense, RPG, multiplayer, WebXR/VR. Triggers on 'Three.js game', 'Babylon.js demo', 'WebGPU game', 'voxel world', 'b

Frontend & Design

Motion Graphics

acelera-agency/html-animation

Build frame-exact motion graphics — animated logos, kinetic typography, brand videos, animated titles and social clips — as a single HTML file driven by a paused Web Animations timeline, then export them to MP4 in 1:1, 4:5 and 9:16. Use this whenever someone wants to animate a wordmark or logo, make a video from text, build a title sequence or lower third, produce a clip for LinkedIn / Instagram / Reels / TikTok, "turn this design into a video", animate a landing-page hero, or export a web animation to a video file — and also when an existing animation of this kind needs fixing, retiming, rest

Frontend & Design

Arbitrum Dapp Skill

hummusonrails/arbitrum-dapp-skill

Opinionated guide for building dApps on Arbitrum using Stylus (Rust) and/or Solidity. Covers local devnode setup, contract development, testing, deployment, and React frontend integration with viem. Use when starting a new Arbitrum project, writing Stylus or Solidity contracts, deploying to Arbitrum, or building a frontend that interacts with Arbitrum contracts.

Frontend & Design

No Slop Design

agshinrajabov/no-slop-design

Senior product-design workflow for web and mobile UI that avoids generic "AI slop" and produces token-based, accessible, platform-correct design with a deliberate visual anchor. Use when asked to design, redesign, review, or "make it look better" for any screen, app, landing page, component, or design system; when building UI from scratch; when a design system or brand must be adopted or created; when generating design tokens, moodboards, or design specs; or when output must not look AI-generated. Runs discovery (market, audience, existing design system) → mini research → moodboard → tokens →

Frontend & Design

Agential Skill

talhairfandev/agential-skill

Use this skill for any website, web application, frontend UI, component, layout, styling, refactor, or review. It enforces a self-contained editorial output standard: image-first composition, oversized typography, visible hairline grids, hard-edged rectangular framing, restrained copy, and review.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.