Bóveda / Cómo está hecho este video
Guía · un poco más a fondo
Cómo está hecho este video
Cada cuadro de los videos de Rasta y Claude es código: las luces, el teclado, la lluvia en la ventana y hasta los dreads. Aquí está el paso a paso completo, con los números reales de un episodio. Si es tu primera vez, empieza por la guía rápida y vuelve aquí.
La idea
No es una grabación, es una escena
En vez de generar un video con IA y esperar que salga bien, armamos una escena 3D con código. La IA escribe el código y las voces; nosotros decidimos qué pasa. Lo bueno: si algo no te gusta, cambias una línea y vuelves a renderizar. Nada queda “a la suerte”.
Las piezas
Qué se usa para cada cosa
| Pieza | Qué hace | Costo |
|---|---|---|
| Claude Code | Escribe y corrige el código de la escena, los personajes y el montaje. | Según tu plan de Claude |
| Three.js | El motor 3D: personajes hechos de cajas y formas simples, luces y cámara. | Gratis |
| HyperFrames | Convierte la página HTML en un MP4, cuadro por cuadro. | Gratis |
| ElevenLabs | Una voz por personaje (también puedes clonar la tuya). | Unos cientos de créditos por episodio; hay créditos gratis para probar |
| ffmpeg | Limpia las voces, mezcla el audio y agrega la música. | Gratis |
Paso a paso
De la idea al MP4
Un guion de líneas cortas
Entre 13 y 24 líneas, una idea por línea y un remate al final. Cada línea es de un personaje. Este episodio tiene 13 líneas y dura 46 segundos.
Personajes con formas simples
Se arman con cajas y formas de pocos triángulos: cabeza, cuerpo, brazos, ojos y boca. Lo reconocible va en los detalles: dreads con anillos, la barba, la mascota cuadrada de color salmón. Menos triángulos significa un render más rápido y un estilo más claro.
Animación con reglas, no a mano
La boca se abre según el audio de cada línea, los ojos parpadean cada cierto tiempo y el cuerpo respira con un movimiento suave. Todo se calcula con el tiempo del video, así que se ve igual cada vez que renderizas.
Una cámara que cambia de plano
Hay una lista de tomas: plano general, primer plano de quien habla, detalle del monitor. La cámara se mueve despacio dentro de cada toma. Un plano de los dreads mientras Claude cuenta los triángulos hace que el dato se sienta.
Las voces
Primero se prueba una línea con cada voz. Cuando suena bien, se generan las demás. Cada línea queda como un archivo; el guion decide cuándo empieza cada una.
Imágenes de prueba antes de renderizar
Se sacan capturas de los momentos clave (el inicio, el detalle, el final) y se revisan. Corregir una imagen toma segundos; corregir un video ya renderizado toma minutos. Aquí, por ejemplo, ajustamos el encuadre del monitor para que se viera completo el contador.
Mezcla de audio y música
Las voces se limpian y se igualan de volumen, y se juntan en una sola pista. La música entra bajita y se apaga sola mientras alguien habla (se llama “ducking”). Al final todo se une con el video.
Render y publicación
Se renderiza el MP4 y se sube desde el celular. Usa siempre la etiqueta de contenido generado con IA: las voces lo son.
Para copiar
Un prompt para empezar
Pégalo en Claude Code dentro de una carpeta vacía y cambia lo que está entre corchetes. Si prefieres rellenar campos, usa el constructor de prompt.
Quiero un video vertical de [40] segundos hecho con código: Three.js para la escena 3D y HyperFrames para renderizarlo a MP4 (1080x1920, 30 fps). Personaje 1: [describe forma, colores y un detalle que lo haga reconocible]. Personaje 2: [describe forma, colores y un detalle que lo haga reconocible]. Escenario: [dónde están y a qué hora]. Guion: líneas cortas, una idea por línea, con un remate al final: [tu idea]. Reglas: - La boca se mueve según el audio de cada línea y los ojos parpadean. - Cambia de plano de cámara según quién habla. - Antes de renderizar, muéstrame imágenes de prueba de 3 momentos y espera mi aprobación. - Avísame cuánto cuesta cada paso que use créditos antes de hacerlo.
Ahórrate dolores
Lo que aprendimos a la mala
Contenido educativo. Los números son de nuestros episodios; los tuyos dependen de tu plan y tu computadora.
Siguiente: el cuaderno de episodio