Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Animation Generator · onewave-ai | DecimalAI

design mediaby onewave-ai

Animation Generator

onewave-ai/animate

Source onewave-ai/claude-skills ↗License MIT

Generate animated videos and motion graphics from natural language descriptions. Creates a standalone Vite + React project with Framer Motion scenes that auto-play in the browser.

NewMaintained

Automatic

Frontend / UI pack

Last verified 8/24/2026

What it changes

Passed 11 of 21 test cases with the skill, and 11 of 21 without it.

Without skill50%

With skill50%

Checks it passed that the model alone missed

Uses the `useVideoPlayer` hook
References `references/scene-patterns.md`
References `references/animation-presets.md`

and 3 more in the full report

6 fixed7 passed either way9 still failing1 broke

Pass-rate lift: 0 pp
Tokens: +46%
Agent turns: 0%
Response time: -28%

Model gemini-3.6-flashMeasured 8/24/2026v113 of 23 cases passed with skill · 21 comparable

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/onewave-ai-animate/SKILL.md https://app.decimal.ai/s/onewave-ai-animate/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add onewave-ai-animate, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/onewave-ai-animate/ and pins it in .decimal/skills.lock

decimalai skills add onewave-ai-animate

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/onewave-ai-animate/SKILL.md https://app.decimal.ai/s/onewave-ai-animate/SKILL.md

Raw file: /s/onewave-ai-animate/SKILL.md ↗ · machine-readable summary at /s/onewave-ai-animate.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 6

Prompt

In `client/src/components/video/VideoTemplate.tsx`, what custom hook is responsible for managing active scene indexing and automatic scene timing advancement?

What was checked, without and with the skill
Checked	Without skill	With skill
Uses the `useVideoPlayer` hook	Missed	Passed

case-20 · gemini-3.6-flash · 8/24/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md123 linessingle file

Animation Generator

Create animated videos and motion graphics from a natural language description. Outputs a standalone Vite + React + Framer Motion project that plays in the browser.

Workflow

Step 1: Parse the Request

Break the user's description into a scene plan:

3-7 scenes, each 3-5 seconds long
Identify the story arc: hero/intro, problem, solution, features, CTA/outro
Pick a color palette and typography that fits the brand/mood
Use $ARGUMENTS for the user's animation description

Step 2: Choose the Animation Stack

Auto-detect the best approach based on the request:

Request Type	Stack	When to Use
Product intro, presentation, marketing	Framer Motion (default)	Scene-based with text, icons, transitions
Generative art, particles, patterns	p5.js	Creative/algorithmic visuals
3D objects, environments, product renders	Three.js + react-three-fiber	3D scenes needed
Simple text/logo animation	CSS animations only	Minimal, no heavy deps

Default to Framer Motion unless the request clearly needs something else.

Step 3: Scaffold the Project

Create a directory: ~/animations/[project-name]/
Run the scaffold script: bash ~/.claude/skills/animate/scripts/scaffold.sh [project-name] [stack]
Copy template files from ~/.claude/skills/animate/assets/template-files/ into the project

Step 4: Generate Scene Components

Read the references for animation presets and scene patterns:

references/animation-presets.md — all available transitions, springs, easings
references/scene-patterns.md — example scene code patterns

For each scene, create a React component in client/src/components/video/video_scenes/:

Track record

Benchmark

11 / 21

test cases passed, vs 11 / 21 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

onewave-ai / claude-skills

animate/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

Animation Generator

Workflow

Step 1: Parse the Request

Step 2: Choose the Animation Stack

Step 3: Scaffold the Project

Step 4: Generate Scene Components

Track record

Benchmark

Adoption

SkillSafety

Source

Related skills