# Pack Animated: convierte un MP4 en un sitio animado con el scroll
> El Animated Website Creator convierte un vídeo en una página guiada por el scroll en cinco pasos: análisis, extracción, seis secciones, construcción, vista previa. Requisitos, seis ejemplos y límites.
Canonical: https://bmad-plus.rochetta.fr/es/docs/packs/animated/
Language: es
BMAD+ version: 0.23.1
Documentation reviewed: 2026-10-19
Author: Laurent Rochetta
License: MIT
Documentación de BMAD+ › [Packs](https://bmad-plus.rochetta.fr/es/docs/packs/) › Pack Animated: convierte un MP4 en un sitio animado con el scroll
El pack Animated instala el Animated Website Creator, un agente que convierte un MP4 corto en una única página web en la que el vídeo se reproduce fotograma a fotograma al hacer scroll, con secciones de texto que aparecen y desaparecen encima. Es el patrón de las páginas de producto de gama alta. El agente hace toda la cadena: inspecciona el vídeo, extrae imágenes optimizadas, escribe la página con un sistema de diseño integrado y la sirve en local para que la previsualices. Encaja en un lanzamiento de producto, la presentación de un inmueble, un portfolio o cualquier escaparate cuya historia lleve un buen vídeo.
## Cuándo usarlo
- Ya tienes un buen MP4 de 5 a 30 segundos y quieres una página construida a su alrededor, no un sitio generalista.
- Aceptas una página de un solo archivo HTML con estilos y scripts incrustados y una carga de varios megabytes de imágenes.
- No es para sitios con mucho contenido y muchas páginas, ni cuando una política estricta de seguridad de contenido prohíbe el código incrustado.
## Qué se instala
Un pack empaquetado en `.agents/skills/pack-animated/`: el archivo del agente `animated-website-agent.md` (proceso, sistema de diseño, arquitectura del código, lista de calidad, resolución de problemas) y una plantilla de workflow `templates/animated-website-workflow.md`. El agente responde a peticiones como animated website, scroll animation, video to website, convert video to website o luxury website from video.
## El proceso en cinco pasos
1. Analizar el vídeo con `ffprobe` y presentar duración, resolución, fotogramas por segundo, total de fotogramas y códec. El agente recomienda un número de fotogramas y te pide confirmar antes de extraer nada.
2. Extraer y optimizar fotogramas en WebP con dos comandos ffmpeg, uno por tamaño: escritorio 1920 por 1080 y móvil 960 por 540, más un `manifest.json`. El presupuesto de carga es menos de 10 MB en escritorio y menos de 5 MB en móvil.
3. Preparar el contenido de seis secciones superpuestas: Hero (nombre, lema, cifras clave), Vision (una cita), Details (características con iconos), Grid (cuatro a seis tarjetas), Context (lugar o información secundaria) y CTA (llamada a la acción y contacto).
4. Construir el sitio: un único archivo HTML con el sistema de diseño completo, la animación canvas y las secciones.
5. Servir y previsualizar en local, y después iterar sobre velocidad, colores y texto hasta quedar conforme.
**Número de fotogramas recomendado según la duración del vídeo**
| Duración del vídeo | Fotogramas | Altura de scroll |
| --- | --- | --- |
| 0 a 5 s | 60 a 90 | 400vh |
| 5 a 15 s | 100 a 150 | 650vh |
| 15 a 30 s | 150 a 200 | 800vh |
| 30 s o más | tope de 200 | 900vh |
### El sistema de diseño integrado
La página trae un aspecto fijo que el agente adapta a tu tema (inmueble, producto tecnológico, portfolio, restaurante o automóvil cambian el color de acento, el contenido del hero, las cifras clave y la llamada a la acción). Sus ingredientes: una paleta oscura cálida, una tipografía con serifas para títulos y otra sin serifas para el texto, tarjetas con efecto cristal, una capa de grano de película y viñeta, partículas flotantes, un cursor personalizado en escritorio, marcadores de capítulo, una pantalla de carga de marca con barra de progreso y un motor de pausas de scroll: en lugar de asociar linealmente scroll y fotogramas, frena cerca de cada sección de texto para que siga siendo legible. Una sección de galería con paralaje puede usar seis o siete fotogramas del vídeo.
## Inicio rápido
1. **Instalar FFmpeg tú mismo** BMAD+ no lo instala. El agente necesita `ffmpeg` y `ffprobe` en el PATH, con el codificador `libwebp` (`ffmpeg -hide_banner -encoders` debe listarlo). Python 3 solo se usa para el servidor de vista previa local.
```sh
winget install FFmpeg
```
2. **Instalar el pack** Core se añade automáticamente. En macOS instala FFmpeg con `brew install ffmpeg` en lugar de la línea anterior.
```sh
npx bmad-plus install --packs animated
```
3. **Pedir el sitio y dar la ruta del vídeo** Indica el concepto (producto, inmueble, portfolio) y, si los tienes, los colores de marca y los textos de las secciones.
```sh
Convierte product-demo.mp4 en un sitio animado con el scroll para el lanzamiento de una lámpara inteligente.
```
## Ejemplos para copiar
### Construir el sitio completo a partir de un vídeo
La frase de ejemplo del propio instalador es «animated website from hero.mp4». No existe un comando /animated: el agente responde a peticiones como esa.
**En tu asistente de IA**
```text
Convierte product-demo.mp4 en un sitio animado con el scroll. El producto es la lámpara inteligente Lumen, que sale en marzo. Color de acento #2563eb, llamada a la acción «Reservar».
```
**Lo que deberías obtener** El agente muestra el análisis del vídeo, recomienda un número de fotogramas y te pide confirmar. Después extrae los fotogramas WebP (escritorio y móvil con un manifiesto), construye la página con las seis secciones y el sistema de diseño, y la sirve en local para la vista previa. Cuenta con iterar después sobre velocidad y texto.
### Analizar solo el vídeo, sin extraer nada todavía
Úsalo para dimensionar el proyecto antes de comprometerte con una carga.
**En tu asistente de IA**
```text
Analiza hero.mp4 con ffprobe y recomienda un número de fotogramas y una altura de scroll. No extraigas nada hasta que yo confirme.
```
**Lo que deberías obtener** Un bloque con duración, resolución, fotogramas por segundo, total de fotogramas y códec, y luego la recomendación de la tabla anterior (para un vídeo de 12 segundos: 100 a 150 fotogramas y una altura de scroll de 650vh). El agente espera tu visto bueno.
### Adaptar el tema a la presentación de un inmueble
La tabla de temas del agente cubre inmueble, producto tecnológico, portfolio, restaurante y automóvil.
**En tu asistente de IA**
```text
Construye un sitio animado de lujo a partir de villa-tour.mp4 para la venta de un inmueble. Hero: el nombre de la villa y su precio. Barra de cifras: superficie, dormitorios, baños. Llamada a la acción: «Programar una visita». Sección Context: distancias a la playa y al aeropuerto.
```
**Lo que deberías obtener** Las seis secciones se rellenan con tu contenido en el diseño de inmueble: nombre y precio en el Hero con una barra de cifras de cristal, una cita en Vision, la lista de características en Details, una cuadrícula de tarjetas, las distancias en Context y un CTA de reserva de visita con una tarjeta de contacto.
### Ajustar la sensación del scroll
El agente conoce los controles detrás de las peticiones habituales; di lo que sientes y ajusta el parámetro correspondiente.
**En tu asistente de IA**
```text
El scroll va demasiado rápido y las secciones de texto se sienten pegajosas. Haz el scroll más lento y suaviza la pausa.
```
**Lo que deberías obtener** El agente alarga la sección de animación (por ejemplo de 650vh hacia 900vh para un scroll más lento) y baja `DWELL_PEAK` (de 3,5 hacia 2,5) para una pausa menos pegajosa. Para fotogramas más fluidos o más reactivos cambia `LERP_FACTOR` (0,09 hacia 0,05 para más fluido, hacia 0,15 para más reactivo).
### Reducir el peso de los fotogramas
Úsalo cuando los fotogramas de escritorio superan 10 MB o la página tarda en cargar.
**En tu asistente de IA**
```text
Los fotogramas de escritorio pesan 14 MB. Llévalos por debajo del presupuesto de 10 MB con menos calidad o menos fotogramas e indícame qué cambió.
```
**Lo que deberías obtener** El agente vuelve a extraer con menos calidad (por ejemplo 60 en lugar de 80) o menos fotogramas (por ejemplo 90) y luego indica la nueva carga de escritorio y móvil frente a los presupuestos de 10 MB y 5 MB.
### Pasar la lista de calidad antes de entregar
El agente lleva una lista previa a la entrega; pídele que la repase e informe con honestidad de lo que pudo y no pudo verificar.
**En tu asistente de IA**
```text
Antes de que publique, repasa tu lista de calidad sobre el sitio que construiste. Para cada punto, di si lo verificaste ejecutando algo o solo leyendo el código.
```
**Lo que deberías obtener** La lista cubre: animación fluida sin tirones, primer fotograma visible en menos de un segundo, cargador operativo, carga dentro del presupuesto, movimiento reducido resuelto con un fotograma fijo, sin fotogramas en blanco, canvas adaptable, cursor personalizado, partículas, las seis secciones que aparecen y desaparecen, letras del hero animadas, barra de cifras legible, galería con paralaje, pausa de scroll natural y marcadores de capítulo actualizados. Solo una ejecución en un navegador puede confirmar lo visual.
## Qué escribe y dónde
**Salida de una construcción**
| Ruta | Contenido |
| --- | --- |
| `