🧩 Qué es / qué hace
Concepto principal
O 3d-animation-creator es un skill que toma un archivo de video (p. ej., deconstrucción/ensamblaje de producto, transformación de antes/después) y crea un sitio production-quality con scroll-driven animation. El video avanza y retrocede según el usuario se desplaza, recreando el efecto «scroll-stop» popularizado por Apple en los lanzamientos del iPhone.
Lo que entrega
- ▸ Sitio HTML/CSS/JS completo, cero dependencias pesadas
- ▸ Canvas con renderizado frame a frame sincronizado con el scroll
- ▸ Starscape animado como fondo (canvas fijo con ~180 estrellas)
- ▸ Cards de anotación con snap-stop (efecto «boom boom boom»)
- ▸ Sección de especificaciones con conteo ascendente animado vía IntersectionObserver
- ▸ Una barra de navegación que se transforma en una píldora con glass-morphism al desplazarte
- ▸ Cargador para precargar los fotogramas antes de mostrarlos
- ▸ Adaptabilidad móvil (diseño diferente, mismo video)
Lo que NO hace
- ✗ No usa reproductores de video (`<video>`): todo el control se hace mediante canvas
- ✗ No procesa el video en runtime: primero hay que extraer frames con FFmpeg
- ✗ No genera el video; solo consume frames ya extraídos
- ✗ No sirve los archivos: necesita un servidor local (no funciona mediante
file://)
🎣 Cuándo se activa
Regla: Claude activa este skill cuando detecta la intención de crear un sitio con video controlado por el scroll, o cuando el usuario menciona alguno de los siguientes activadores. La detección se basa en el texto, no en los archivos adjuntos.
Disparadores que activan el skill
"Animación 3D"
El disparador más directo. Cualquier mención del nombre de la skill o de la técnica de animación 3D controlada por scroll.
"scroll-stop build" / "scroll animation website"
Intención de construir: no solo entender. El usuario quiere el sitio final.
"scroll-driven video" / "build the scroll-stop site"
Variaciones idiomáticas: todas corresponden a la misma skill.
"Animación de desplazamiento al estilo Apple" / "video al desplazarse"
Referencia visual clara al estilo Apple de lanzamiento de productos.
Archivo de video + solicitud de control
El usuario proporciona un .mp4 y pide «controlar con el scroll» o «hacer un scrub interactivo».
📋 Step 0 — The Interview (obligatorio)
Antes de construir, la skill entrevista al usuario para recopilar:
- • Ruta del archivo de video
- • Directorio de output para los frames
- • Número de frames deseados (30–120)
- • Secciones de anotación (texto + momento del video)
- • Especificaciones del producto (para count-up)
- • Paleta de colores preferida
- • Velocidad del desplazamiento (200–800vh)
- • Título y subtítulo del hero
🚀 Cómo mejora tus páginas
✓ HACER — lo que resuelve la skill
- ✓ Transforma un video simple en una experiencia interactiva inmersiva
- ✓ Entrega un sitio completo con loader, navbar, hero, specs y footer
- ✓ Controla la narrativa: el usuario «lee» el producto al desplazarse por la página
- ✓ Rendimiento: canvas + requestAnimationFrame, sin aparición repentina
- ✓ Listo para Retina: usa devicePixelRatio para una imagen nítida en HiDPI
- ✓ Móvil: diseño compacto, cards en una sola fila, posición bottom:1.5vh
✗ EVITAR — cuándo no usar
- ✗ Videos largos (>10s): prefiere 3–6s para que el efecto al desplazarse funcione bien
- ✗ Frames en PNG — usa JPEG <100KB cada uno para evitar lentitud
- ✗ Abrir mediante
file://— los frames no se cargan sin un servidor local - ✗ scroll-behavior: smooth en el CSS — interfiere con el control frame-a-frame
- ✗ Primer frame a color/oscuro: debe ser blanco para que el loader funcione
Consejo de velocidad: La altura del contenedor .scroll-animation controla el ritmo: 200vh = rápido, 500vh = suave, 800vh = cinematográfico. Ajusta según la densidad de información del producto.
📊 Benchmarks realistas
⚙️ Cómo funciona por dentro
Pipeline de 6 pasos (SKILL.md)
Step 0 — The Interview
Recopila la ruta del video, el directorio de salida, el número de frames, las secciones de anotación, las especificaciones para count-up, la paleta, la velocidad del scroll y el título/subtítulo.
Step 1 — Analyze the Video
Extrae metadatos: duración, resolución, fps. Determina cuántos frames extraer (recomendado: duración × 20).
Step 2 — Extract Frames via FFmpeg
Ejecuta el comando FFmpeg para generar frames JPEG numerados en el directorio de output.
Step 3 — Build the Website
Genera el HTML completo con canvas sticky, loader, starscape, navbar, hero, annotation cards, specs, footer.
Step 4 — Patrones clave de implementación
Canvas con devicePixelRatio. Cover-fit en desktop, zoomed contain-fit en mobile. Snap-stop con bloqueo de overflow de ~600ms. Transformación de la navbar pill. Count-up con easeOutExpo escalonado cada 200ms.
Step 5 — Personalizar contenido
Aplica la paleta de colores, los textos, la cantidad de tarjetas y las especificaciones proporcionadas en la entrevista.
Step 6 — Publicar y probar
Indica al usuario que ejecute un servidor local (p. ej.: python -m http.server) para probar el sitio.
// Canvas com suporte a Retina / HiDPI
canvas.width = window.innerWidth * window.devicePixelRatio;
canvas.height = window.innerHeight * window.devicePixelRatio;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
// Mapeamento scroll → frame
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const maxScroll = scrollContainer.scrollHeight - window.innerHeight;
const progress = Math.min(scrollTop / maxScroll, 1);
const frameIdx = Math.floor(progress * (frames.length - 1));
if (frameIdx !== currentFrame) {
currentFrame = frameIdx;
requestAnimationFrame(() => drawFrame(frames[frameIdx]));
}
}, { passive: true });⚠️ Dependencia obligatoria: FFmpeg
El skill detecta si FFmpeg está instalado. Si no lo está, indica al usuario: brew install ffmpeg (macOS) o equivalente. Los frames no se cargan sin un servidor HTTP local — nunca mediante file://.
💬 Ejemplo práctico + PROMPT listo
Escenario: Deconstrucción de un smartwatch
Tienes un video de 4 segundos que muestra un smartwatch desmontándose pieza por pieza (deconstrucción del producto). Quieres un sitio donde el usuario se desplace por la página y el reloj se desmonte en pantalla, con anotaciones que aparezcan en cada componente (batería, pantalla AMOLED, procesador) y una sección final con las especificaciones técnicas animadas.
3D animation
Tenho um vídeo de deconstrução de smartwatch em:
/Users/eu/videos/watch-deconstruct.mp4
Quero um site scroll-stop Apple-style com:
- Frames extraídos em: /Users/eu/site/frames/
- 80 frames totais
- Velocidade: 600vh (cinemática)
- Cor dominante: #a855f7 (roxo)
Anotações (3 cards):
1. "Tela AMOLED 1.4"" — no frame 20
2. "Bateria 300mAh" — no frame 45
3. "Chip Snapdragon W5" — no frame 65
Specs (count-up):
- "1.4"" / tela
- "300mAh" / bateria
- "5 dias" / autonomia
- "IP68" / resistência
Título: "Por dentro do Tempo"
Subtítulo: "Cada componente, revelado"Qué ocurre: Claude inicia la entrevista (Step 0), confirma los parámetros, ejecuta el comando FFmpeg para extraer los 80 frames y entrega un único archivo HTML con todo el sitio: loader, starscape, canvas sticky, 3 annotation cards con snap-stop, sección specs con count-up y navbar pill.
ffmpeg -i /Users/eu/videos/watch-deconstruct.mp4 \
-vf "fps=20,scale=1920:-1" \
-q:v 3 \
/Users/eu/site/frames/frame_%03d.jpg🧬 Combina con / límites
animation-designer
Módulo 3.1Crea las animaciones CSS/GSAP/Framer Motion que después pueden ser renderizadas como video. Usa animation-designer para hacer el video de entrada de 3d-animation-creator.
remotion
Módulo 3.3Genera videos programáticos en React. El MP4 de salida de Remotion es la entrada perfecta para 3d-animation-creator: un video con precisión de fotograma → un sitio que detiene el scroll.
HyperFrames
Módulo 3.4HyperFrames convierte HTML animado → MP4 mediante Chrome headless + FFmpeg. Úsalo para renderizar animaciones HTML complejas y luego alimentar el 3d-animation-creator con el video generado.
✓ COMBINA CON
- ✓ animation-designer para crear el video fuente con animaciones CSS/GSAP
- ✓ remotion cuando el video debe generarse mediante programación en React
- ✓ HyperFrames para convertir animaciones HTML complejas en un MP4 de entrada
- ✓ frontend-design para refinar el HTML final con un acabado visual más pulido
- ✓ impeccable para revisar la calidad del sitio entregado
✗ NO USAR CUANDO
- ✗ El usuario solo quiere una animación CSS sencilla: usa animation-designer
- ✗ El video aún no existe y no hay planes para crearlo antes
- ✗ El entorno no admite FFmpeg y el usuario no puede instalarlo
- ✗ El contenido es texto/datos: usa canvas-design o algorithmic-art
- ✗ Necesitas autoplay de video normal: usa la etiqueta
<video>directamente
Posición en la Trilha 3 🎞️ Medios
📋 Resumen del Módulo 3.2
Qué aprendiste
- ✓ El 3d-animation-creator crea sitios Apple-style que detienen el scroll a partir de videos
- ✓ Usa FFmpeg para extraer frames JPEG y la Canvas API para renderizarlos
- ✓ El skill se activa con "animación 3D", "construcción que detiene el scroll", "animación al desplazarse al estilo Apple"
- ✓ Incluye starscape (~180 estrellas), navbar pill, annotation cards con snap-stop y count-up
- ✓ Step 0 (entrevista) es obligatorio: recopila el recorrido, los frames, las anotaciones y las specs
- ✓ Combina con animation-designer (upstream), remotion y HyperFrames para el video fuente
- ✓ Vanilla JS, cero frameworks pesados, { passive: true }, requestAnimationFrame
Próximo módulo:
3.3 remotion
Renderización programática de video con React — frames controlados por código, output MP4.
Consejo de estudio: Prueba a encadenar el Módulo 3.1 → 3.2: crea una animación CSS con animation-designer, expórtala como video (vía HyperFrames) y aliméntala al 3d-animation-creator. Es el pipeline completo de la Trilha 3.