Lottie Animation Integration
freshtechbro/claudedesignskills
Implements After Effects Lottie animations in web and React apps: picking JSON or dotLottie format, a rendering library, and a data source, with an optimizer script.
Generate animated videos and motion graphics from natural language descriptions.
Install Animate
$ npx skills add OneWave-AI/claude-skills --skill animate -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install OneWave-AI/claude-skills animate --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/OneWave-AI/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/animate .claude/skills/animate && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "animate" agent skill from https://github.com/OneWave-AI/claude-skills/tree/main/animate into .claude/skills/animate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/OneWave-AI/claude-skills/tree/main/animateType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add OneWave-AI/claude-skills --skill animate -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install OneWave-AI/claude-skills animate --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OneWave-AI/claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/animate .agents/skills/animate && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "animate" agent skill from https://github.com/OneWave-AI/claude-skills/tree/main/animate into .agents/skills/animate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add OneWave-AI/claude-skills --skill animate -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install OneWave-AI/claude-skills animate --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OneWave-AI/claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/animate .cursor/skills/animate && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "animate" agent skill from https://github.com/OneWave-AI/claude-skills/tree/main/animate into .cursor/skills/animate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/OneWave-AI/claude-skills.git --path animate--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add OneWave-AI/claude-skills --skill animate -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install OneWave-AI/claude-skills animate --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OneWave-AI/claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/animate .gemini/skills/animate && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "animate" agent skill from https://github.com/OneWave-AI/claude-skills/tree/main/animate into .gemini/skills/animate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install OneWave-AI/claude-skills animateInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add OneWave-AI/claude-skills --skill animate -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/OneWave-AI/claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/animate .github/skills/animate && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "animate" agent skill from https://github.com/OneWave-AI/claude-skills/tree/main/animate into .github/skills/animate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add OneWave-AI/claude-skills --skill animate -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install OneWave-AI/claude-skills animate --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OneWave-AI/claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/animate .opencode/skills/animate && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "animate" agent skill from https://github.com/OneWave-AI/claude-skills/tree/main/animate into .opencode/skills/animate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
animate- GitHub stars
- 328
- Token cost
- ~1.4k tokens
- SKILL.md length
- 629 words
- Files
- 1
- Skills in repo
- 69
- Repo updated
- First seen
- Licence
- MIT
At a glance
Generate animated videos and motion graphics from natural language descriptions.
- Works in 8 steps: Parse the Request → Choose the Animation Stack → Scaffold the Project → …
- The user wants to create animations
- SKILL.md covers Workflow, Scene Transition Reference…, Element Animation Reference… and Important Rules
- Calls npm and bash; needs GEMINI_API_KEY
What it does
Animate is an agent skill from OneWave-AI/claude-skills. 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.
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Media & Creative, covering Motion graphics, Web animation and motion and Browser automation. It works with Motion, Vite and React. The repository describes itself as: 200+ production-ready Claude Code skills for sales, marketing, design, engineering, and AI agent architecture. Built and maintained by OneWave AI. The licence is MIT.
When your agent uses it
- The user wants to create animations
- Motion graphics
- Animated presentations
Example prompts
- “/animate”
Requirements
- Node.js
- A credential in GEMINI_API_KEY
- Pre-approved tools (allowed-tools): Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch
Workflow steps
8 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit fc5b785. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
ReadWriteEditBashGlobGrepWebFetchWebSearch
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npmbash
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names these keys or tokens, usually read from environment variables:
GEMINI_API_KEY
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Animate loads about 1.4k tokens when it runs. Until then it costs about 77 tokens; SKILL.md has 629 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
allowed-tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from OneWave-AI/claude-skills at commit fc5b785, republished under its MIT licence (© OneWave-AI). 629 words, ~1,438 tokens.
Download SKILL.mdSave it as
.claude/skills/animate/SKILL.md (or your agent's skills folder).- name
- animate
- description
- 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.
- allowed-tools
- Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch
- argument-hint
- description of the animation you want
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
Show full SKILL.md (284 more words)Show less
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 devTell 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
© OneWave-AI, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in animate of OneWave-AI/claude-skills.
Open the folder on GitHubat commit fc5b785
Compare with similar skills
Animate next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Animate this skillOneWave-AI/claude-skills | 328 | — | ~1.4k | Automated safety check: Notes | MIT | |
| Lottie Animation Integrationfreshtechbro/claudedesignskills | 1k | — | ~4.5k | Automated safety check: Pass | MIT | |
| Design Motion PrinciplesDinil-Thilakarathne/sona-ui | 118 | 1 repos | ~1.7k | Automated safety check: Pass | MIT | |
| Motiscope RecreateKumarSashank/motiscope | 122 | — | ~2k | Automated safety check: Pass | MIT | |
| RecreateKumarSashank/motiscope | 122 | — | ~1.8k | Automated safety check: Notes | MIT | |
| Clone AnywebsiteSylphAI-Inc/skills | 111 | — | ~10k | Automated safety check: Pass | None |
Similar skills
Design Motion Principles
Dinil-Thilakarathne/sona-ui
Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques.
Motiscope Recreate
KumarSashank/motiscope
Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG.
Recreate
KumarSashank/motiscope
Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG.
Clone Anywebsite
SylphAI-Inc/skills
Clone any website's landing page with pixel-perfect fidelity.
Web Video Presentation
ConardLi/garden-skills
Turns an article or spoken script into a click-through, full-screen 16:9 web presentation that looks like a video, with optional synthesized narration.
More from OneWave-AI/claude-skills
All 69 skills in this repoCRM Data Cleanup
OneWave-AI/claude-skills
Finds duplicate and junk records in a CRM CSV export with fuzzy matching, normalizes fields and writes a reviewable merge plan plus import-ready files without touching the live CRM.
Design Export Repair
OneWave-AI/claude-skills
Repairs broken decks and PDFs exported from Claude Design or similar AI deck generators: clipped text, wrong fonts and corrupted .pptx package structure.
Bi Measure Builder
OneWave-AI/claude-skills
Writes, explains, debugs, and optimizes BI calculations - Power BI / Fabric DAX measures and calculated columns, Tableau calculated fields (FIXED/INCLUDE/EXCLUDE LOD expressions, table…
Bookkeeping Close
OneWave-AI/claude-skills
Categorizes transactions, reconciles bank and card statements to the ledger, works a month-end checklist and prepares a close package, without ever forcing a balance.
CSV and Excel Merger
OneWave-AI/claude-skills
Combines CSV, TSV and Excel files into one verified table with pandas, by stacking or joining, mapping columns, normalizing keys and removing duplicates.
Sec Filing Puller
OneWave-AI/claude-skills
Pulls financial statement numbers for US public companies straight from SEC EDGAR's free official XBRL APIs (companyfacts, companyconcept, frames, submissions) into a cited table.
Related
Categories
Questions about Animate
What does Animate do?
Generate animated videos and motion graphics from natural language descriptions. Animate is an agent skill from OneWave-AI/claude-skills. Generate animated videos and motion graphics from natural language descriptions.
When should I use Animate?
Animate fits situations like: the user wants to create animations; motion graphics; animated presentations.
How do I install Animate in Claude Code?
Run `npx skills add OneWave-AI/claude-skills --skill animate -a claude-code`. Or copy the skill folder (animate in OneWave-AI/claude-skills) into .claude/skills/animate in your project. Claude Code loads it when a task matches its description.
How do I install Animate in Codex?
Run `npx skills add OneWave-AI/claude-skills --skill animate -a codex`. Or copy the skill folder (animate in OneWave-AI/claude-skills) into .agents/skills/animate in your project. Codex loads it when a task matches its description.
Can I use Animate in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add OneWave-AI/claude-skills --skill animate -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/animate, .gemini/skills/animate, .github/skills/animate and .opencode/skills/animate in your project.
What does Animate need to run?
Going by SKILL.md and its folder, Animate needs the command-line tools its instructions call (npm and bash) and credentials named GEMINI_API_KEY. Our summary lists: Node.js; A credential in GEMINI_API_KEY. Its frontmatter pre-approves these tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch.
Does Animate access the network?
SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Animate safe to install?
Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
What licence does Animate use?
Animate is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Animate use?
About 1.4k tokens (SKILL.md is roughly 5.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Animate?
Skills that share tags, products or a category with Animate: Lottie Animation Integration (freshtechbro/claudedesignskills, 1k stars), Design Motion Principles (Dinil-Thilakarathne/sona-ui, 118 stars), Motiscope Recreate (KumarSashank/motiscope, 122 stars) and Recreate (KumarSashank/motiscope, 122 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Animate?
OneWave-AI (a GitHub organization) maintains it in OneWave-AI/claude-skills, which has 328 GitHub stars. The repository holds 69 skills in this directory. The repository was last updated on October 2, 2026.
Source: OneWave-AI/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.