Scroll animation con AI en 4 fases

Las scroll animations frame-by-frame (esas donde un objeto se transforma o gira mientras scrolleas) solían requerir animador serio y semanas de trabajo. Este stack las arma con IA en menos de una hora — el costo total ronda los $5 si ya tienes suscripciones activas.

El stack

Fase	Tool	Para qué
1	Whisk (Google AI Labs)	Generar marco inicial + marco final
2	Google Flow (usa el modelo Veo)	Animar la transición entre marcos como video
3	EZGif	Convertir el video a 240 frames a 30fps
4	Cursor / Claude Code / Windsurf	Integrar como animación scroll-driven

Fase 1 · Whisk — los dos marcos

Abres Whisk y generas el marco inicial (estado A del objeto) y el marco final (estado B). El truco para que la transición se vea limpia: mantén iluminación, fondo y framing idénticos entre los dos marcos — solo cambia el objeto o su orientación.

Prompt base que funciona para producto premium estilo Apple/Wallpaper:

Fotografía editorial ultra-premium de [tu producto], acabado negro
mate con detalles de aluminio cepillado, iluminación ambiental
suave desde arriba-izquierda, flotando sobre superficie negra mate.
Fondo negro profundo con gradiente sutil, iluminación de estudio,
render 3D hiperrealista, profundidad de campo reducida, calidad
cinemática 4K, sin texto, sin logos, estética tech de lujo, foco
preciso en el producto, composición minimalista moderna.

Cambias [tu producto] por lo que quieras animar (audífonos, gadget, herramienta, cualquier objeto). Genera el marco A primero, después modifica el prompt sutilmente para el marco B (e.g. “vista explotada”, “rotado 90 grados”, “con cubierta abierta”).

Nota del idioma: este prompt funciona mejor en inglés por el vocabulario fotográfico técnico. Si la calidad sale baja en español, traduce y vuelve a generar con el mismo seed.

Fase 2 · Google Flow — animar entre marcos

Abres Google Flow (el producto consumer que usa el modelo Veo) y eliges “Frames to Video” (no “Text to Video”). Subes el marco inicial y el final. Flow genera un video que morphea suavemente entre los dos.

Tips:

• Duración del video: 5-8 segundos funciona bien para scroll (más largo necesita más frames y vuelve la animación pesada)
• Quality: alta — la calidad del video define la calidad de cada frame extraído después
• Si el morphing entre marcos se ve raro (objeto que cruza el frame, partes que aparecen de la nada), regenera ambos marcos manteniendo composiciones más similares

Fase 3 · EZGif — extraer frames individuales

EZGif es un convertidor gratis online. No requiere cuenta.

1. Subes el video de Flow
2. Eliges la herramienta “Video to JPG” o “Video to PNG”
3. Ajustas el frame rate a 30 fps
4. Conviertes — te devuelve unas 240 imágenes individuales
5. Descargas el ZIP

Si el video pesa más de 50MB EZGif puede tirar error. En ese caso, comprime el video primero con HandBrake u otra herramienta similar antes de subirlo.

Fase 4 · AI de coding — integrar al sitio

Descomprimes el ZIP y mueves la carpeta a public/frames/ de tu proyecto. Los archivos deben estar nombrados secuencialmente (frame-001.jpg, frame-002.jpg, etc.).

Después, en tu IA de coding (Cursor agent mode, Claude Code, Windsurf) pegas un prompt como este:

Actúa como desarrollador creativo senior. Vas a construir una sección
hero con scrollytelling: una animación scroll-driven donde un producto
se transforma frame-by-frame mientras el usuario scrollea.

Stack:
- Framework: [Next.js / Astro / React]
- Estilos: Tailwind CSS
- Animación: Canvas + scroll listener nativo (sin librerías pesadas
  tipo Framer Motion)
- Frames: 240 imágenes JPG en /public/frames/ (frame-001.jpg a
  frame-240.jpg)

Requerimientos:
- La animación debe responder al scroll del viewport, no al tiempo
- Performance: precargar los primeros 60 frames, lazy load del resto
- Smooth en mobile (target 60fps) sin jank
- Sin librerías externas para la animación — solo Canvas y un scroll
  listener con requestAnimationFrame
- Responsive: 100% del ancho del viewport, height = 100vh
- Pin del scroll por la duración de la animación, después el contenido
  siguiente

Devuélveme el componente completo + el CSS necesario + el código de
precarga de frames.

Tu IA de coding te devuelve el componente listo. Lo pegas, lo ajustas a tu sitio, y deploy.

Lo que conviene saber

Tiempo real: 10 minutos es optimista. Realista: 30-60 minutos la primera vez (regenerando marcos hasta que queden bien, ajustando el prompt de coding) y 15-20 minutos las siguientes.

Costo: si ya tienes Cursor/Claude Code y créditos en Google AI Labs, el experimento cuesta solo lo que consumas en créditos (unos $2-5 USD). Sin suscripciones, súmale el costo mensual de Cursor (unos $20) o de Claude Pro (unos $20).

Optimización del peso: 240 frames JPG pueden pesar 30-60MB total. Antes de deploy, conviértelos a WebP — bajan a cerca del 40% del tamaño sin pérdida visible. Usa cwebp o ImageMagick por batch.

Cuándo NO funciona

• Marcos con composiciones muy distintas — el morphing de Veo necesita marcos similares. Si el objeto cambia de posición o tamaño drástico, sale raro.
• Videos largos (>10s) — 240 frames no alcanzan a cubrir suavidad. Súbele a 480 frames si necesitas más duración (pero el peso se duplica).
• Sitios estáticos sin JavaScript — esta técnica requiere JS para escuchar el scroll. Si tu stack no lo permite, no aplica.
• Mobile de gama baja — animaciones Canvas con 240 frames pueden hacer jank en dispositivos con poca RAM. Hazlo opcional con prefers-reduced-motion o solo para desktop.

---

Si replicas el flujo y montas algo decente, mándame el link por Instagram — quiero verlo.