Convertir HTML a GIF, fotograma a fotograma en tu navegador
Pega una animación HTML, CSS o SVG y guárdala como GIF en bucle para un README, un mensaje de Slack, un email o documentación. Cada fotograma se dibuja en tu ordenador; no se sube nada.
- ✓Bucle infinito
- ✓De 360p a 720p, hasta 25 fps
- ✓Gratis, sin marca de agua
- ✓No se sube nada
GIF de 854×480, dibujado fotograma a fotograma en tu ordenador: fluido sea cual sea su velocidad, y no se sube nada.
O empieza con un ejemplo
Cada uno es un único archivo HTML. Cárgalo, cámbialo y expórtalo.
Cómo funciona
Tres pasos, todo en tu navegador
La herramienta toma el control del reloj de la página, lo avanza fotograma a fotograma y dibuja cada uno, así que un portátil lento crea el mismo vídeo que uno rápido.
- 01
Pega el código o suelta un archivo
Una página completa con su CSS y JavaScript, un archivo .html o un .zip exportado con sus imágenes y fuentes. Las librerías de un CDN cargan como siempre.
- 02
Elige formato y tamaño
MP4, GIF, WebM o un fotograma PNG; 16:9, 9:16 o 1:1; de 720p a 4K a 24, 30 o 60 fps. Si las animaciones tienen final, la duración se ajusta sola.
- 03
Renderiza y descarga
Cada fotograma se dibuja y codifica en tu ordenador, y el archivo queda listo para descargar. Sin pedirte compartir pantalla, sin subir nada.
GIF ligeros y nítidos
Que sea corto
De 2 a 6 segundos es suficiente; el peso de un GIF crece con cada fotograma.
Un solo ciclo en bucle
Ajusta la duración a un ciclo completo de la animación para que el bucle encaje sin saltos.
15 fps y 480p
Los valores por defecto sirven para casi cualquier documentación o chat; 25 fps para movimiento rápido, 720p para detalle.
Los colores planos funcionan mejor
Un GIF tiene 256 colores por fotograma; los degradados largos y las fotos muestran bandas. Para eso, un MP4 es más ligero y nítido.
Más allá de esta herramienta
Una animación es el comienzo. Una skill hace el vídeo entero.
Esta herramienta convierte en vídeo el HTML que ya tienes. Una Motion Skill empieza un paso antes: en Claude Code, Codex o Cursor, tu agente lee tu producto o tus notas, planifica los planos, escribe cada escena, pone la música y renderiza el MP4 terminado.
- ✓A partir de tu propio material, no de un prompt en blanco
- ✓Varias escenas, montadas con música
- ✓Renderizado en tu ordenador y tuyo para usarlo
Skills que siguen desde aquí
Cada una hace un tipo de vídeo distinto. La primera es la más cercana a esta página.
¿Haces más de un tipo de vídeo?
Empieza gratis con Motion Director. Una skill cuesta $4.90; un plan desbloquea todas las skills y las nuevas a medida que llegan.
Mensual
$9.90/ mes
- ✓Todas las skills de vídeo completo, estilos incluidos
- ✓Nuevas skills en cuanto salen
- ✓Actualizaciones de las skills existentes
- ✓Uso comercial de lo que renderizas
Anual
Ahorra 34%$79/ año
- ✓Todas las skills de vídeo completo, estilos incluidos
- ✓Nuevas skills en cuanto salen
- ✓Actualizaciones de las skills existentes
- ✓Uso comercial de lo que renderizas
Fundador de por vida
Oferta fundador$169pago único
- ✓Todas las skills de vídeo completo, estilos incluidos
- ✓Nuevas skills en cuanto salen
- ✓Actualizaciones de las skills existentes
- ✓Uso comercial de lo que renderizas
- ✓Un solo pago, sin renovaciones
Obtener Motion Director (gratis) →Una sola skill $4.90 · Elige una skill →
Preguntas
¿Cómo convierto una animación CSS en GIF?
Pega la página (HTML con su CSS), elige GIF, ajusta la duración a un ciclo y renderiza. El GIF se dibuja fotograma a fotograma, así que sale fluido y con la duración exacta que pusiste.
¿Por qué pesa tanto mi GIF?
Cada fotograma se guarda con su propia paleta de 256 colores. Acórtalo, baja los fps o el tamaño, o usa MP4, que a menudo pesa una décima parte.
¿El GIF tiene fondo transparente?
No: la transparencia del GIF es un color activado o no, y los bordes suaves quedan dentados. Para transparencia, usa WebM o PNG desde la misma herramienta.
¿Se sube algo?
No. La página se ejecuta y el GIF se codifica en tu navegador.