¿Qué hace Generador de Animaciones?
Crea videos animados y gráficos en movimiento a partir de una descripción en lenguaje natural. Genera un proyecto independiente Vite + React + Framer Motion que se reproduce en el navegador.
Flujo de trabajo
Paso 1: Analizar la solicitud
Divide la descripción del usuario en un plan de escenas:
- 3-7 escenas, cada una de 3-5 segundos
- Identifica el arco narrativo: héroe/intro, problema, solución, características, CTA/outro
- Elige una paleta de colores y tipografía que se ajusten a la marca/ambiente
- Usa
$ARGUMENTSpara la descripción de animación del usuario
Paso 2: Elegir la pila de animación
Detecta automáticamente el mejor enfoque según la solicitud:
| Tipo de solicitud | Pila | Cuándo usarlo |
|---|---|---|
| Intro de producto, presentación, marketing | Framer Motion (por defecto) | Basado en escenas con texto, iconos, transiciones |
| Arte generativo, partículas, patrones | p5.js | Visuales creativos/algorithmicos |
| Objetos 3D, entornos, renders de producto | Three.js + react-three-fiber | Se necesitan escenas 3D |
| Animación simple de texto/logo | Solo animaciones CSS | Mínimo, sin dependencias pesadas |
Elige Framer Motion por defecto a menos que la solicitud requiera claramente otra cosa.
Paso 3: Inicializar el proyecto
- Crea un directorio:
~/animaciones/[nombre-del-proyecto]/ - Ejecuta el script de inicialización:
bash ~/.claude/skills/animate/scripts/scaffold.sh [nombre-del-proyecto] [pila] - Copia los archivos de plantilla desde
~/.claude/skills/animate/assets/template-files/al proyecto
Paso 4: Generar componentes de escena
Lee las referencias de presets de animación y patrones de escena:
references/animation-presets.md— todas las transiciones, springs y easing disponiblesreferences/scene-patterns.md— ejemplos de patrones de código de escena
Para cada escena, crea un componente React en client/src/components/video/video_scenes/:
- Usa
motion.divcon presets de transición de escena (fadeBlur, scaleFade, slideLeft, splitHorizontal, morphExpand, etc.) - Usa
containerVariantseitemVariantspara revelaciones escalonadas de contenido - Usa unidades
vwpara dimensionamiento responsivo (funciona en cualquier resolución) - Usa variables CSS para la tematización (
var(--color-accent),var(--color-bg-dark), etc.) - Usa iconos de Lucide para elementos visuales
- Usa la clase
.glass-panelpara tarjetas de vidrio esmerilado - Usa
.text-gradienty.text-gradient-accentpara texto degradado
Paso 5: Generar el VideoTemplate
Crea client/src/components/video/VideoTemplate.tsx:
- Importa todos los componentes de escena
- Define el objeto
SCENE_DURATIONS(nombre de escena -> milisegundos) - Usa el hook
useVideoPlayerpara gestionar el avance de escenas - Envuelve las escenas con
AnimatePresence mode="wait"para transiciones suaves - Cada escena se renderiza condicionalmente según el índice
currentScene
Paso 6: Personalizar el tema
Actualiza client/src/index.css con los colores adecuados:
- Si el usuario especificó colores de marca, actualiza las variables CSS
- Elige fuentes que coincidan con el ambiente (Space Grotesk para tecnología, Playfair Display para elegante, etc.)
- Actualiza los estilos de degradado y brillo para que coincidan con la paleta
Paso 7: Mejora con Gemini 3.1 Pro (Opcional)
Si la variable de entorno GEMINI_API_KEY está disponible:
- Lee
references/gemini-integration.mdpara detalles de la API - Envía la descripción del usuario a Gemini 3.1 Pro solicitando:
- Desglose de escenas con descripciones y transiciones sugeridas
- Paleta de colores como variables CSS
- Copia/títulos para cada escena
- Gráficos SVG si aplica
- Usa la salida de Gemini para informar la generación de escenas
- Si no hay clave API, omite este paso — Claude maneja todas las decisiones creativas directamente
Paso 8: Construir y previsualizar
cd ~/animaciones/[nombre-del-proyecto]
npm install
npm run dev
Informa al usuario que la animación se está ejecutando en http://localhost:5173 y ábrela en el navegador.
Referencia de transiciones de escena (rápida)
Elige transiciones que coincidan con el ritmo narrativo:
- fadeBlur — Intro/outro suave, revelaciones oníricas
- scaleFade — Revelaciones seguras, presentaciones de productos
- slideLeft/slideRight — Progresión secuencial, flujo de línea de tiempo
- splitHorizontal/splitVertical — Revelaciones dramáticas, antes/después
- morphExpand — Gran final, pantallas de CTA
- clipCircle — Enfocar atención, efecto de foco
- perspectiveFlip — Giro de tarjetas, cambios de perspectiva
- wipe — Transiciones limpias, flujo direccional
- zoomThrough — Inmersivo, impulso hacia adelante
- crossDissolve — Transiciones suaves y emocionales
Referencia de animaciones de elementos (rápida)
- popIn — Entrada con rebote para iconos/insignias
- fadeUp/fadeDown — Revelaciones sutiles de contenido
- slideInLeft/slideInRight — Contenido direccional
- blurIn — Revelaciones con desenfoque suave
- elasticScale — Entradas juguetonas y energéticas
- perspectiveRotateIn — Revelaciones de tarjetas 3D
- pulse — Captador de atención en bucle
- float — Efecto de flotación suave
Reglas importantes
- Siempre usa unidades
vwpara el dimensionamiento para que las animaciones se vean bien en cualquier resolución - Mantén las escenas entre 3-5 segundos cada una — el video total de 15-30 segundos
- Usa
AnimatePresence mode="wait"para que una escena salga antes de que entre la siguiente - Cada escena debe tener un tratamiento de fondo (degradado, imagen o forma animada)
- Usa animaciones escalonadas para listas y cuadrículas (staggerChildren: 0.1-0.2)
- Incluye un estado de carga si los activos son pesados
- El proyecto debe ser completamente autónomo — sin dependencias externas más allá de los paquetes npm
- NO uses emojis en ningún lugar del código generado o contenido