🎞️ Medios y video

Una skill especializada en crear animaciones web con Framer Motion y CSS. Incluye fade-in, listas escalonadas, estados hover, modales animados, transiciones de página, animaciones activadas por scroll y parallax, todo en React/TypeScript o CSS puro.

Sin el skill, recibes código de animación genérico. Con él, Claude sigue patrones de rendimiento (transform + opacity, nunca top/left), la duración recomendada (150–400ms) y reduce automáticamente el movimiento para mejorar la accesibilidad.

Framer Motion, CSS keyframes, diseño de movimiento, microinteracciones, accesibilidad (prefers-reduced-motion).

La skill se activa cuando pides una animación, transición, diseño de movimiento, Framer Motion, animación al desplazarse, animación de carga, efecto hover, microinteracción o efecto visual en un componente de React.

Conocer los disparadores ayuda a formular la solicitud adecuada. «Crea un fade-in» la activa; «agrega una transición CSS» también la activa.

Palabras desencadenantes: animación, transición, motion, hover, scroll, loading, microinteracción.

La skill ofrece patrones listos: Fade In on Mount, Staggered List, Button Hover, Modal con AnimatePresence, Page Transition, Scroll Progress Indicator y Parallax — todos con buen rendimiento y accesibles.

Las animaciones bien hechas reducen la carga cognitiva, guían la mirada y transmiten calidad. Las animaciones mal hechas (que usan top/left, sin reduced-motion) perjudican el rendimiento y la accesibilidad.

Rendimiento percibido, UI pulida, compatible con GPU (transform/opacity), AnimatePresence para montar y desmontar.

Usa framer-motion (npm install framer-motion) como biblioteca principal, con motion.*, AnimatePresence, useScroll, useTransform e useSpring. Para CSS puro, genera @keyframes y clases de Tailwind (animate-*). Sigue reglas de easing (ease-out para entradas, ease-in para salidas) y duración (micro 150ms, standard 200–300ms, complex 400ms).

Entender el stack permite ajustar parámetros (damping, stiffness en spring animations) y saber cuándo usar CSS frente a Framer Motion.

framer-motion, useScroll, useTransform, AnimatePresence, spring vs tween, Tailwind animate.

Un ejemplo clásico: una lista de tarjetas que aparecen en cascada (stagger) cuando se carga la página, cada tarjeta con hover lift y shadow. La skill genera el componente completo con Framer Motion y variants.

Ver un ejemplo real muestra cómo la skill interpreta la solicitud y qué props define de forma predeterminada.

staggerChildren, variants, whileHover, exit animations.

Combina muy bien con canvas-design (UI base) y 3d-animation-creator (video fuente para scroll). No cubre video real (usa remotion o hyperframes), ni animaciones 3D Three.js.

Saber cuáles son los límites evita frustraciones: para exportar un MP4, usa remotion; para un video con scroll en un sitio web, usa 3d-animation-creator.

Frontera: animación web vs. video exportado; complementario a 3d-animation-creator.

Una skill que recibe un video MP4/MOV y construye un sitio HTML/CSS/JS completo donde el scroll controla el video. La posición del scroll determina qué frame se muestra: el video avanza o retrocede según tú bajes o subas por la página.

Es el mismo efecto que usa Apple en las páginas del iPhone. Con fotogramas extraídos y un canvas, creas la ilusión de un video 3D sin WebGL.

Animación basada en el scroll, extracción de fotogramas, renderizado en canvas, narrativa al estilo Apple.

Se activa cuando pides "crea un sitio como Apple", "scroll-driven video", "video que se reproduce al desplazarse", "animation scroll" o "extrae fotogramas del video para el scroll". La skill empieza con una entrevista obligatoria: nombre del producto, color, estilo, secciones.

La entrevista inicial reúne todas las decisiones de diseño antes de construir, lo que evita retrabajo. Sin ella, la skill no avanza.

Step 0 obligatorio: entrevista de diseño; palabra clave "Apple-style".

Transforma cualquier video en una landing page premium donde el producto se revela mientras haces scroll. Las tarjetas de anotación aparecen en momentos específicos del video, y las secciones de funciones y especificaciones se integran en la narrativa visual.

Una landing page con video controlado por scroll genera más conversiones al crear inmersión. Con esta skill, el costo de producción bajó de semanas a horas.

Inmersión, storytelling visual, conversión, landing page premium.

Paso 1: analiza los FPS y la duración del video. Paso 2: extrae frames con FFmpeg (ffmpeg -i video.mp4 frames/frame_%04d.jpg -q:v 85). Paso 3: construye HTML con <canvas> sticky, una altura de scroll de 350vh y JavaScript que asigna scrollY para obtener el índice del cuadro correcto mediante requestAnimationFrame. En mobile usa 250vh.

El motor real es FFmpeg para la extracción y canvas para el renderizado. Saberlo permite ajustar la calidad (-q:v), la tasa de frames y resolver errores de rutas.

FFmpeg, canvas, requestAnimationFrame, scroll height, frame index mapping.

Crea una landing page estilo Apple para un producto tecnológico. El video produto.mp4 está en /tmp/. Extrae los frames con FFmpeg, construye el sitio con scroll-driven animation, agrega 3 cards de anotación en los frames 30, 90 y 150, y una sección de specs debajo.

El prompt completo incluye la ubicación del video, la cantidad de tarjetas y las secciones; estos detalles evitan la entrevista interactiva.

Ubicación del video, fotogramas objetivo para las tarjetas, secciones de contenido.

Combina con animation-designer para animar las tarjetas y secciones alrededor del video. Para generar el video fuente, usa remotion o seedance-loop-prompt. No sirve para páginas sin video; en ese caso, usa solo animation-designer.

El stack completo es: seedance genera un loop → 3d-animation-creator usa el loop como fuente → animation-designer anima las secciones de texto alrededor.

Requiere video fuente; stack: seedance → 3d-animation-creator → animation-designer.

Remotion es un framework para crear videos programáticamente en React. En lugar de una timeline visual, escribes componentes React que reciben frame e fps como props y representan el estado de ese instante. El resultado se convierte en MP4 mediante renderizado headless.

Video con control de versiones en Git, datos dinámicos de API, tipado TypeScript y composición de escenas como componentes: es Motion Canvas/After Effects, pero en tu editor.

Composition, useCurrentFrame, interpolate, spring, Sequence, AbsoluteFill.

Se activa cuando mencionas Remotion, "crea un video en React", "composición de video programática", "exportar MP4 mediante código" o "animar datos para video". También se activa con pedidos de Shorts/Reels programáticos.

Saber cuáles son los desencadenantes te ayuda a orientar la solicitud: menciona "Remotion" explícitamente si quieres la skill; de lo contrario, Claude puede usar una animación CSS genérica.

Palabra desencadenante: Remotion, video de React, composición programática, MP4 mediante código.

Con Remotion generas videos de presentación, intros animadas, visualizaciones de datos y publicaciones para redes sociales directamente desde tu codebase — sin Adobe, sin Lottie y sin diseño manual. Cada video es un componente de React reutilizable.

El video producido se puede usar directamente en la página (mediante <video>), integrado como hero o publicado en YouTube/Instagram: todo desde el mismo código.

Video como componente, datos dinámicos, reutilización, CI/CD para video.

Usa @remotion/core, @remotion/player y opcionalmente @remotion/media-utils. Las composiciones se registran en Root.tsx, cada escena es un componente con useCurrentFrame(). Exportación mediante npx remotion render o Remotion Lambda. La animación usa interpolate(frame, [0,30], [0,1]) e spring({frame, fps, config}).

Entender interpolate y spring es clave: interpolate asigna frames a valores, spring crea una física natural. Ambos hacen que la animación sea predecible y ajustable.

@remotion/core, Root.tsx, useCurrentFrame, interpolate, spring, npx remotion render.

Crea una composición de Remotion de 30s (30fps) con: una intro animada (texto que aparece con spring), 3 escenas de características de 5s cada una y un outro con CTA. Usa Sequence para organizar escenas. Colores: fondo #0f0f0f, acento #a855f7.

Especificar la duración, los fps, el número de escenas y la paleta en el prompt ahorra iteraciones.

Especificar la duración total, los fps, el número de Sequences y la paleta de colores.

El MP4 generado por Remotion alimenta el 3d-animation-creator (video fuente para scroll) y el HyperFrames (pipeline HTML→MP4). No lo uses para animaciones web en tiempo real: usa animation-designer. No usa FFmpeg directamente (eso es HyperFrames).

Remotion es el creador de contenido; 3d-animation-creator y HyperFrames son los consumidores del MP4 generado.

Remotion crea MP4 → 3d-animation-creator consume → HyperFrames distribuye.

seedance-loop-prompt: genera prompts estructurados para IA de video (Seedance), creando loops de fondo sin cortes: el inicio y el final del video se conectan perfectamente. HyperFrames (video explicativo): skill que graba una página HTML animada cuadro a cuadro con Chrome headless y crea el MP4 con FFmpeg: transforma HTML en un video exportable.

Juntos cubren ambos sentidos: seedance crea video para incorporarlo a la web; HyperFrames convierte la web en video para exportarlo. FFmpeg es el motor compartido.

Loop sin cortes, prompt estructurado para IA de video, HTML→MP4, Chrome headless, FFmpeg.

seedance-loop-prompt se activa cuando pides "crea un prompt para video en bucle", "fondo sin cortes", "looping video prompt" o mencionas Seedance. HyperFrames se activa con "crea un video explicativo", "graba HTML en video", "HTML a MP4", "Shorts animado" o "video para INEMA.CLUB".

Los desencadenantes son distintos: seedance = prompt para una IA generadora; HyperFrames = grabar la propia página animada.

seedance: "loop sin cortes"; HyperFrames: "video explicativo", "HTML→MP4".

seedance entrega un prompt listo en 7 bloques (SCENE, CAMERA, ACTION ARC, TEXT, LIGHTING, LOOP SEAL, TECHNICAL) que pegas en la IA de video y obtienes un loop cinematográfico. HyperFrames entrega un MP4 de alta calidad de cualquier página HTML animada — ideal para Shorts, intros y demos.

Con seedance tienes fondos premium sin un banco de videos. Con HyperFrames transformas cualquier curso HTML en un video listo para publicar en YouTube.

Prompt estructurado en 7 bloques, loop cinematográfico, HTML→MP4 para redes sociales.

seedance-loop-prompt es solo texto: interpreta tu briefing y arma el prompt en los 7 bloques con reglas estrictas (sin texto en pantalla, inicio=fin para el loop, sin cortes). HyperFrames usa: Chrome headless para capturar cada frame de la animación → FFmpeg para ensamblar los frames en MP4 (ffmpeg -framerate 30 -i frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4). Requisitos previos ya instalados: Chrome, FFmpeg, Python.

FFmpeg aparece en casi todos los módulos de esta ruta: extrae frames (3.2), ensambla frames (3.4), renderiza (3.3). Es la herramienta central de video en la línea de comandos.

Chrome headless, ffmpeg -framerate, libx264, yuv420p, requisitos previos instalados.

Dos prompts listos: (1) Para seedance: "Crea el prompt para un loop de fondo: bosque de datos neón, cámara orbital lenta, atmósfera cyberpunk púrpura y cian, 6 segundos, sin texto en pantalla." (2) Para HyperFrames: "Graba la página /tmp/intro.html en un video de 15 segundos, 30fps, resolución 1080x1920 para Shorts. Usa Chrome headless y FFmpeg."

Ver los dos prompts lado a lado deja clara la diferencia de propósito: uno genera un prompt para una IA externa; el otro graba la página local.

Briefing visual para seedance; path + resolución + fps para HyperFrames.

seedance alimenta el fondo de las páginas grabadas por HyperFrames. HyperFrames combina con animation-designer (una página animada más rica = un video más impactante) y remotion (alternativa cuando quieres un video versionable en React). El curso hermano HyperFrames (skill-hyperframes-videos) profundiza todo este pipeline en 4 rutas.

Seedance no genera el video: genera el prompt. Necesitas una IA de video (Seedance, Sora, etc.) para ejecutarlo. HyperFrames no edita videos existentes: graba páginas HTML.

Curso complementario de HyperFrames; seedance ≠ generador de video; HyperFrames ≠ editor de video.