animate
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.
- Installs
- 396
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/onewave-ai/claude-skills --skill animate- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads animate automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
$ARGUMENTSfor 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, easingsreferences/scene-patterns.md— example scene code patterns
For each scene, create a React component in client/src/components/video/video_scenes/:
- Use
motion.divwith scene transition presets (fadeBlur, scaleFade, slideLeft, splitHorizontal, morphExpand, etc.) - Use
containerVariantsanditemVariantsfor staggered content reveals - Use
vwunits for responsive sizing (works at any resolution) - Use CSS variables for theming (
var(--color-accent),var(--color-bg-dark), etc.) - Use Lucide icons for visual elements
- Use
.glass-panelclass for frosted glass cards - Use
.text-gradientand.text-gradient-accentfor gradient text
Step 5: Generate the VideoTemplate
Create client/src/components/video/VideoTemplate.tsx:
- Import all scene components
- Define
SCENE_DURATIONSobject (scene name -> milliseconds) - Use
useVideoPlayerhook to manage scene advancement - Wrap scenes in
AnimatePresence mode="wait"for smooth transitions - Each scene renders conditionally based on
currentSceneindex
Step 6: Customize Theme
Update client/src/index.css with the right colors:
- If the user specified brand colors, update CSS variables
- Choose fonts that match the mood (Space Grotesk for tech, Playfair Display for elegant, etc.)
- Update gradient and glow styles to match the palette
Step 7: Gemini 3.1 Pro Enhancement (Optional)
If GEMINI_API_KEY environment variable is available:
- Read
references/gemini-integration.mdfor API details - Send the user's description to Gemini 3.1 Pro asking for:
- Scene breakdown with descriptions and suggested transitions
- Color palette as CSS variables
- Copy/headlines for each scene
- SVG graphics if applicable
- Use the Gemini output to inform scene generation
- If no API key, skip this step — Claude handles all creative decisions directly
Step 8: Build and Preview
cd ~/animations/[project-name]
npm install
npm run dev
Tell the user the animation is running at http://localhost:5173 and open it in the browser.
Scene Transition Reference (Quick)
Pick transitions that match the story beat:
- fadeBlur — Soft intro/outro, dreamy reveals
- scaleFade — Confident reveals, product showcases
- slideLeft/slideRight — Sequential progression, timeline flow
- splitHorizontal/splitVertical — Dramatic reveals, before/after
- morphExpand — Grand finale, CTA screens
- clipCircle — Focus attention, spotlight effect
- perspectiveFlip — Card flips, perspective changes
- wipe — Clean transitions, directional flow
- zoomThrough — Immersive, forward momentum
- crossDissolve — Gentle, emotional transitions
Element Animation Reference (Quick)
- popIn — Bouncy scale entrance for icons/badges
- fadeUp/fadeDown — Subtle content reveals
- slideInLeft/slideInRight — Directional content
- blurIn — Soft focus reveals
- elasticScale — Playful, energetic entrances
- perspectiveRotateIn — 3D card reveals
- pulse — Looping attention grab
- float — Gentle hovering effect
Important Rules
- Always use
vwunits for sizing so animations look good at any resolution - Keep scenes between 3-5 seconds each — total video 15-30 seconds
- Use
AnimatePresence mode="wait"so one scene exits before the next enters - Every scene must have a background treatment (gradient, image, or animated shape)
- Use staggered animations for lists and grids (staggerChildren: 0.1-0.2)
- Include a loading state if assets are heavy
- The project must be completely self-contained — no external dependencies beyond npm packages
- Do NOT use emojis anywhere in the generated code or content
FAQ
What does the animate skill do?
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.
How do I install animate?
Run npx skills add https://github.com/onewave-ai/claude-skills --skill animate in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/animate/ (personal) or .claude/skills/animate/ (project).
Which AI agents can use animate?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is animate safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains animate?
It is published by onewave-ai in onewave-ai/claude-skills. It has 396 recorded installs.
More from onewave-ai/claude-skills
landing-page-copywriter
onewave-ai/claude-skills
Writes conversion-focused landing page copy - headlines, subheads, value propositions, feature and benefit blocks, social proof, FAQs, and CTA button text - using PAS, AIDA, or StoryBrand. Use when the user wants words for a landing page, sales page, product or pricing page, waitlist page, homepage hero, or ad-to-page flow, including rewriting weak copy, generating headline or CTA variants for A/B tests, or turning a product description into page sections. Use landing-page-optimizer instead for auditing an existing page's performance, and a frontend skill for building the page itself.
code-review-pro
onewave-ai/claude-skills
Performs a deep code review of files, modules, a diff, or a branch - finding security vulnerabilities (mapped to OWASP Top 10:2025), correctness bugs, performance problems, and maintainability issues - and returns severity-ranked findings with evidence and concrete fixes. Use when the user asks to review, audit, or sanity-check code, asks "is this safe", "what's wrong with this", "find bugs", or wants a security or performance pass before shipping. For posting line comments on a GitHub pull request, use git-pr-reviewer.
screenshot-to-code
onewave-ai/claude-skills
Turns a screenshot, mockup, Figma export, or photo of a UI into working front-end code - React + Tailwind CSS v4 by default, or Next.js, Vue, or plain HTML/CSS - matching layout, spacing, colors, and typography, then renders the result and compares it against the image to close visual gaps. Use whenever the user shares an image of a website, app screen, dashboard, component, or wireframe and wants it built, cloned, recreated, or "made real", or says "code this up", "build this design", or "match this screenshot".
csv-excel-merger
onewave-ai/claude-skills
Merges, appends, joins, and deduplicates multiple CSV, TSV, and Excel files (including multi-sheet workbooks) with pandas - mapping mismatched column names to one schema, normalizing keys, resolving conflicting values, tracking which file each row came from, and verifying the row math. Use when the user wants to combine spreadsheets or exports, stack monthly files, consolidate contact or lead lists, VLOOKUP-style join two sheets on an ID or email, or dedupe records across sources, even if they only say "put these together" or "clean up these lists into one".
technical-writer
onewave-ai/claude-skills
Writes and restructures technical documentation - READMEs, tutorials, how-to guides, user guides, architecture docs, onboarding guides, runbooks and SOPs, troubleshooting guides, release notes, and knowledge base articles - grounded in the actual code or product, with commands and examples verified where possible. Use when the user asks to document a project, feature, system, or process, write or fix a README, explain a codebase to new developers, turn notes into a guide, or make existing docs clearer. For endpoint-by-endpoint API reference or OpenAPI specs, use api-documentation-writer; for CLAUDE.md or AGENTS.md files, use claude-md-writer.
sports-betting-analyzer
onewave-ai/claude-skills
Analyze spreads, over/unders, prop bets. Historical trends, situational stats, value bet identification. For entertainment/education only.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.