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. Use when the user wants to create animations, motion graphics, video intros, animated presentations, or product demos.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# 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
…
The line at the top of this page pins the label git:20260225.059b9f3, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
GET https://markdownregistry.com/api/v1/artifacts/art_3svob2rarb3mjgld
GET https://markdownregistry.com/api/v1/resolve?ref=onewave-ai/claude-skills/animate
GET https://markdownregistry.com/api/v1/blob/5ee89ccea9d97c61f28b71d18e6b1f385d15da110082c3e14ce484214de3168c
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
onewave-ai/claude-skills · accessibility-auditor/SKILL.md · Audit websites for accessibility issues and WCAG compliance. Use when checking accessibility, fixing a11y issues, or…
onewave-ai/claude-skills · agent-army/SKILL.md · Deploy a 2-layer parallel agent hierarchy for large, parallelizable work — big refactors, multi-file migrations…
onewave-ai/claude-skills · agent-eval-harness/SKILL.md · Use to test whether an AI agent, prompt, or skill actually works before or after it ships — build a small eval set…
onewave-ai/claude-skills · agent-swarm-deployer/SKILL.md · Deploys swarms of sub-agents for massive parallel data processing tasks. Unlike agent-army (which is for code changes)…
onewave-ai/claude-skills · agent-team-builder/SKILL.md · Designs and deploys custom agent teams for specific business workflows. Interactive discovery of business processes…
onewave-ai/claude-skills · agent-to-agent/SKILL.md · Agent-to-Agent (A2A) communication protocol. Connect two or more Claude agents that pass messages, share context…
onewave-ai/claude-skills · ai-coding-guardrails/SKILL.md · Use when an AI coding agent is writing or refactoring production code and its known failure modes need to be held in…
onewave-ai/claude-skills · ai-readiness-assessment/SKILL.md · Assesses how ready a business is for AI adoption across six dimensions. Evaluates data maturity, tech stack, team…
onewave-ai/claude-skills · api-endpoint-scaffolder/SKILL.md · Generate REST API endpoints with proper structure, validation, error handling, and types. Use when creating new API…
emilkowalski/skills · skills/animate/SKILL.md · Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it…
asymmetric-al/core · .agents/skills/animate/SKILL.md · Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it…
quriosity-agent/qcut · qcut/.agents/skills/animate/SKILL.md · Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve…
aicodedecode/awesome-muse-skills · skills-imported/animate/SKILL.md · Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it…
illodev/drawn-by-code · .claude/skills/animate/SKILL.md · Directs the creation of a code-made animation or video in drawn-by-code, from brief to final MP4. Use it whenever the…
wankimmy/bossku-superpowers · skills/animate/SKILL.md · Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it…
nebutra/nebutra-sailor · .agents/skills/animate/SKILL.md · Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it…
