skills.rest
th-efool
th-efoolCOMMUNITY
Explore all skills by this author →
GitHub

animate

Generates animated videos as Vite, React, and Framer Motion projects from natural language descriptions.

1|Updated Aug 8, 2026
Search Tags:#React#Framer Motion#animation#vite#motion graphics#three.js#video generation
One-click install
npx skills add https://github.com/th-efool/SKILLS --skill animate-th-efool
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animate
Source: https://github.com/th-efool/SKILLS/tree/main/animate
Command: npx skills add https://github.com/th-efool/SKILLS --skill animate-th-efool

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires framer-motion, react, vite, lucide-react, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Creating animated videos and motion graphics normally requires video editing software and specialized skills. This Skill turns a plain-language description into a working browser-based animation project without manual coding. ## Core Features & Use Cases - Scene-Based Generation: Breaks a description into 3-7 scenes with transitions, staggered reveals, and themed styling using Framer Motion presets. - Stack Auto-Detection: Chooses between Framer Motion, p5.js, Three.js, or plain CSS animations based on the request type. - Optional Gemini Enhancement: Uses the Gemini API (when a key is available) to refine scene breakdowns, color palettes, and copy. - Use Case: Ask for a 20-second product intro for a SaaS launch, and get a self-contained React project playing scene-by-scene animations at localhost:5173. ## Quick Start Ask the AI to create a 20-second animated product intro video with a dark theme and bold typography for your app launch.

Frequently Asked Questions about animate

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an animated video from a text description?▼

Describe the animation you want, including mood, colors, and content. The Skill breaks it into 3-7 scenes, scaffolds a Vite + React + Framer Motion project, generates scene components, and runs it in the browser at localhost:5173.

Framer Motion vs CSS animations for web video intros?▼

Framer Motion is the default for scene-based animations with text, icons, and transitions. Plain CSS animations are used only for simple text or logo animations where heavy dependencies are unnecessary.

Can I use Three.js for 3D product animations?▼

Yes. When the request involves 3D objects, environments, or product renders, the Skill auto-selects Three.js with react-three-fiber instead of the default Framer Motion stack.

Does the animation generator require a Gemini API key?▼

No. The Gemini enhancement step is optional and only runs if the GEMINI_API_KEY environment variable is set. Without it, Claude handles all creative decisions like scene breakdowns and color palettes directly.

What are the limitations of browser-based animation generation?▼

Output plays in the browser rather than exporting a video file, scenes are limited to 3-5 seconds each for a 15-30 second total, and the project must stay self-contained with no external assets beyond npm packages.

Related Skills

Explore More Design & Creative Skills→
narduk-enterprisesnarduk-enterprises

brand-guidelines

Apply Anthropic brand colors, typography, and layout rules to artifacts.

Official
Basic
monoesmonoes
15

monomotion

Create live browser animations with GSAP timelines and seekable playback.

Official
Intermediate
yan-labsyan-labs
197

imagegen

Generate website visual assets via Codex CLI's built-in image generation tool.

Community
Advanced
openaiopenai
5.3k

remotion-render

Render Remotion videos and stills via CLI with transparent ProRes and WebM output options.

Official
Basic