Remotion vs HyperFrames: el mismo reel en cinco estilos

¿Comentaste CONTEÚDO? Aquí tienes la diferencia entre mis ediciones de la misma toma y los cinco estilos de nicho, ahora en una sola skill gratis en GitHub: bolo de camadas ("pastel de capas"). Yo grabé la voz. Claude Code, un agente que escribe código, hizo los diseños, subtítulos, gráficos y señales de efectos de sonido con Remotion. Yo dirigí y revisé el resultado. El cambio de ropa con un chasquido se generó aparte mediante Seedance 2.5 video-edit en la API de pago de Higgsfield. No es una función gratuita de los editores.

Dos herramientas de vídeo programable

Remotion convierte componentes React en vídeo, calculando cada fotograma. HyperFrames, de HeyGen, convierte HTML y CSS con una línea de tiempo GSAP en vídeo y se presenta como “built for agents”. Un agente puede escribir proyectos con ambas herramientas; tú proporcionas material y tiempos de las palabras, revisas la vista previa y apruebas el MP4. El 06/10/2026, Remotion tenía 62.096 estrellas en GitHub y npm 4.0.533 (mi reel usó 4.0.523); HyperFrames tenía 57.507 estrellas y npm 0.8.137. Son cifras fechadas, no una clasificación de calidad.

Diferencias en este reel

Misma toma, corte, audio y cinco segmentos temáticos en ambas versiones. Notas del 06/10/2026:

Mi opinión: elegiría Remotion si ya trabajo en React y quiero seguir el rostro fotograma a fotograma. HyperFrames me sirve para iterar diseños HTML rápidamente con comprobaciones automáticas. Su check encontró un problema que en mi flujo Remotion precisaba una prueba adicional. En ambos revisaría todo el vídeo.

Prueba vertical de diez segundos en Remotion

1. Instala Node.js. En una carpeta limpia, ejecuta el creador oficial y elige la plantilla vacía TypeScript cuando lo pida; el menú puede cambiar.

npx create-video@latest

2. Entra en la carpeta creada. En src/Composition.tsx, configura width={1080}, height={1920}, fps={30}, durationInFrames={300}. Son 10 segundos. La composición en la plantilla probada se llama MyComp; comprueba la tuya.

cd CARPETA_DEL_PROYECTO && npm install

npx remotion compositions src/index.ts

npx remotion render src/index.ts MyComp prueba-10s.mp4 --codec h264 --concurrency 2

Prueba vertical de diez segundos en HyperFrames

1. Instala Node.js 22+ y FFmpeg. Inicializa el proyecto y lee sus archivos de instrucciones para agentes.

npx hyperframes@0.8.137 init mi-video --resolution portrait

cd mi-video

2. En el index.html generado, pon data-duration="10" en composición y escena, confirma data-width="1080" y data-height="1920". Verifica los 30 fps en el MP4 con ffprobe. check también revisa el diseño y el contraste.

npm run check

DO_NOT_TRACK=1 npm run render -- --output prueba-10s.mp4

Ambos MP4 fueron renderizados y comprobados con ffprobe. En Windows cmd, usa set DO_NOT_TRACK=1 en lugar del prefijo de shell. Estas son pruebas pequeñas; tu toma real requiere material y tiempos de las palabras.

Pide a Claude Code que edite tu toma (prompts de ejemplo, no probados en la app)

Instala la skill bolo de camadas (abajo) e incluye tu toma y una transcripción con tiempos en el proyecto. Usa solo material autorizado. En Remotion:

Usa la skill bolo-de-camadas con el estilo corretor y lee este proyecto Remotion. Edita mi toma hablada como vídeo vertical 1080x1920. Sincroniza subtítulos palabra a palabra y gráficos según los tiempos de mi transcripción. Mantén rostro y texto dentro de las zonas seguras. Usa solo imágenes autorizadas y datos del inmueble confirmados. Muéstrame una vista previa, ejecuta comprobaciones y renderiza MP4 solo después de mi revisión.

En HyperFrames, también respeta los archivos generados por init:

Lee AGENTS.md y CLAUDE.md en este proyecto HyperFrames y usa la skill bolo-de-camadas con el estilo corretor. Edita mi toma con transcripción cronometrada en 1080x1920. Sincroniza gráficos y subtítulos, respeta las zonas seguras y usa solo mis archivos autorizados. Ejecuta lint y check, genera capturas de revisión y renderiza MP4 solo después de mi aprobación. No generes cambios de ropa automáticamente.

Cambia corretor por personal, ingles, chef o financas. Si no dices el estilo, la skill pregunta; para otra profesión, crea un estilo nuevo contigo. Son instrucciones visuales compatibles con los dos motores, no plugins instalados automáticamente.

Las cinco skills, ahora en una: bolo de camadas

El 14/10/2026 los cinco estilos se convirtieron en una sola skill, abierta en GitHub: pcauhi/bolo-de-camadas (licencia MIT, versión 1.0.0, escrita en portugués). Al usarla, Claude pregunta el nicho: inmobiliaria (corretor), entrenador personal, profesor de inglés, chef o finanzas, o crea el estilo de tu profesión. Cada estilo incluye colores, fuentes de Google, fondo, encuadre del locutor, gráficos por frase, subtítulos, los efectos nuevos (texto que se mueve, una forma que se convierte en otra, cámara en movimiento, 3D) y las zonas seguras. Funciona con Remotion y HyperFrames. Las imágenes son fotogramas reales de los cinco segmentos temáticos del reel aprobado; no incluye el formato personal del creador.

En Claude Code, instálala con:

git clone https://github.com/pcauhi/bolo-de-camadas ~/.claude/skills/bolo-de-camadas

En claude.ai, descarga el ZIP de abajo y súbelo en Configuración → Capacidades → Skills (para renderizar el vídeo necesitas Claude Code en tu ordenador).

Abrir la skill en GitHubDescargar el ZIP (claude.ai)

Preguntas frecuentes

¿Tengo que programar? Puedes dirigir a un agente en lugar de escribir React o GSAP. Necesitas ordenador, configuración, archivos y revisión. No es un botón automático en el móvil.

¿Cuesta algo? El 06/10/2026, la licencia de Remotion permitía el uso gratuito a particulares, organizaciones con fines de lucro con hasta 3 empleados y organizaciones sin fines de lucro; las demás empresas con fines lucrativos requieren licencia comercial. HyperFrames es Apache-2.0. Claude Code y los modelos pueden tener coste. El cambio de ropa usó Seedance 2.5 video-edit con la API de pago de Higgsfield; factura segundos de entrada y salida. Consulta el precio actual antes de usarla.

¿Sirve un vídeo grabado con el teléfono? Sí. Entrega el archivo y la transcripción, cuida el audio y revisa el recorte. Asegúrate de tener derechos de uso.

¿Cuánto tarda el render? El 06/10/2026, mi reel HyperFrames de 115,7 s tardó 3 min 52 s en ese Mac. La versión Remotion no se cronometró. Tu equipo y los efectos cambian el tiempo: prueba primero con 10 s.

Fuentes y límites, consultados el 06/10/2026.