HTML a vídeo
Convierte animaciones web y código Canvas o Three.js en MP4
Empieza con una plantilla
- Ventana de directo Ventana redondeada con insignia LIVE y rótulo; el sonido del vídeo va a la línea de tiempo
- Medio enmarcado Ventana con borde blanco y brillo, etiqueta en la esquina; entra escalando y puede acercarse a una zona
- Mural de fotos Fotos verticales aparecen en fila, cada una con su texto
- Tríptico de primeros planos Imágenes lado a lado a sangre, cada una con su etiqueta, y número y título de capítulo abajo
- Galería con tira Las miniaturas de abajo se resaltan por turnos y la imagen grande cambia
- Guion y principal Columna de viñetas a la izquierda y ventana principal con etiqueta a la derecha
- Explicación dividida Texto grande a la izquierda (segunda línea en color), medio a la derecha y marca de línea de tiempo abajo
- Título relleno de imagen Tu vídeo o imagen se ve dentro de letras gigantes, con antetítulo y subtítulo
- Maqueta de móvil Tu vídeo dentro de un móvil que flota suavemente
- Marca de esquina Tu logo y nombre fijos en una esquina
- Degradado granulado Degradado lento de verde azulado a naranja con grano; ponlo abajo como fondo
- Título emergente Título grande con subrayado y subtítulo
- Palabra a palabra Las palabras aparecen una a una al ritmo
- Crecimiento de datos Las barras crecen mientras el número sube
- Rótulo inferior Rótulo con nombre y cargo
- Barrido de luz Un haz de luz cruza la imagen
- Cuenta atrás 3, 2, 1 aparecen mientras el anillo se vacía
- Máquina de escribir Escribe letra a letra con cursor parpadeante
- Anillo de progreso El anillo se llena hasta tu porcentaje y el número sube
- Círculo destacado Un círculo a mano rodea lo importante
- Figura 3D giratoria Un nudo metálico gira despacio (Three.js)
- Barras de música Las barras saltan con la música de la línea de tiempo y destellan en los golpes
- Tarjetas de subtítulos Los subtítulos del tramo aparecen uno por tarjeta con barra de acento; oculta la pista de subtítulos para dejar solo las tarjetas
- Título resaltado Una barra fluorescente cruza un fondo crema mientras caen letras grandes
- Palabras de impacto Una palabra por pantalla entra de golpe mientras bloques negro, amarillo y crema barren en diagonal
- Tarjeta de pregunta Etiqueta pequeña y dos líneas grandes, la segunda sobre una banda brillante
- Etiquetas pegatina Tiras de papel crema entran inclinadas (separa con |)
- Cuenta atrás en bloques Números enormes bajan y cada uno trae un nuevo bloque de color
- Etiquetas cápsula Título grande, una fila de etiquetas cápsula oscuras que suben una a una y una conclusión destacada abajo
- Tarjetas de estado Una columna de tarjetas a la izquierda se desplaza para enfocar cada una; a la derecha, una comparación en grande
- Tabla de etiquetas Un panel oscuro que lista «etiqueta → significado» fila a fila, con las etiquetas en monoespaciada
- Tarjeta de cita Una etiqueta pequeña arriba a la izquierda y una cita larga que aparece línea a línea
Un clic abre el editor con la animación ya añadida. En las plantillas con huecos de medios, arrastra un vídeo o una imagen a la tarjeta, o pulsa «Usar mis archivos», y ya estará en su sitio cuando se abra el editor. Los archivos se quedan en tu dispositivo; no se sube nada.
Pega una animación web de Canvas, SVG, GSAP o Three.js: se dibuja fotograma a fotograma sobre tu vídeo y sale en MP4 o GIF. En el navegador, gratis, sin marca de agua.
Pega el código de una animación web o importa un archivo .html y se convierte en un clip de animación en la línea de tiempo: fondo transparente, encima de tu vídeo o imagen, y como cualquier otro clip puedes moverlo, escalarlo, cambiar su opacidad y ponerle fotogramas clave y animaciones de entrada y salida.
El editor lo dibuja fotograma a fotograma según el tiempo en lugar de grabar la pantalla: el mismo instante siempre da el mismo fotograma, así que lo que ves en la vista previa es lo que se exporta. Math.random, Date y requestAnimationFrame pasan a usar un reloj determinista; GSAP y Three.js vienen integrados, sin necesidad de scripts externos.
El código se ejecuta en un entorno aislado sin conexión a la red, así que las imágenes y fuentes externas no se cargan; si las necesitas, incrústalas como direcciones data:. Los parámetros que declara la pieza (texto, colores, números) aparecen en el panel de ajustes de la derecha, y al terminar exportas directamente en MP4 o GIF.
Preguntas frecuentes
- ¿Qué formas de escribir el código se admiten?
- Funcionan tal cual las cuatro más habituales: definir window.__seek(t) para dibujar el fotograma del segundo t; crear una línea de tiempo GSAP en pausa y ponerla en window.__timelines; colocar una escena de Three.js según el tiempo dentro de __seek y renderizarla; o un bucle normal de requestAnimationFrame. Si la página tiene un solo lienzo, se toma directamente ese lienzo; si no, toda la página (SVG, CSS, texto) se dibuja como un fotograma.
- ¿Puedo usar librerías desde un CDN?
- GSAP (con los plugins CustomEase, MotionPath, MorphSVG, DrawSVG y SplitText) y Three.js vienen integrados, y las direcciones de CDN que apuntan a ellos se cambian solas por la copia integrada. Otras librerías externas no se cargan, porque el entorno aislado no tiene conexión a la red.
- ¿El vídeo exportado tiene sonido?
- Las animaciones no tienen sonido propio y el audio que reproduzca el código no se graba. Añade música o una locución aparte en la línea de tiempo y se exportará junto con la animación.
- ¿Y si mi código da un error?
- En la parte superior de la vista previa y en el propio clip se avisa del error, y el mensaje original aparece en el cuadro de código. Pulsa «Pedir a la IA que lo arregle»: la IA lee tu código, lo corrige y vuelve a comprobar el resultado. Mientras tanto, la vista previa se queda en el último fotograma correcto y los demás clips no se ven afectados.
- ¿Se sube mi código?
- No. El código se guarda con el proyecto en tu navegador y se renderiza y exporta en tu dispositivo. Solo se sube, junto con el proyecto, si tú decides guardar el proyecto en la nube.