Converter HTML para GIF, quadro a quadro no navegador
Cole uma animação HTML, CSS ou SVG e salve como GIF em loop para um README, uma mensagem no Slack, um e-mail ou documentação. Cada quadro é desenhado no seu computador; nada é enviado.
- ✓Loop infinito
- ✓De 360p a 720p, até 25 fps
- ✓Grátis, sem marca d'água
- ✓Nada é enviado
GIF em 854×480, desenhado quadro a quadro no seu computador: fluido seja qual for a velocidade dele, e nada é enviado.
Ou comece por um exemplo
Cada um é um único arquivo HTML. Carregue, altere e exporte.
Como funciona
Três passos, tudo no navegador
A ferramenta assume o relógio da página, avança um quadro por vez e desenha cada um, então um notebook lento gera o mesmo vídeo que um rápido.
- 01
Cole ou solte um arquivo
Uma página inteira com CSS e JavaScript, um arquivo .html ou um .zip exportado com imagens e fontes. Bibliotecas de um CDN carregam normalmente.
- 02
Escolha o formato e o tamanho
MP4, GIF, WebM ou um quadro em PNG; 16:9, 9:16 ou 1:1; de 720p a 4K a 24, 30 ou 60 fps. Quando as animações têm fim, a duração é definida para você.
- 03
Renderize e baixe
Cada quadro é desenhado e codificado no seu computador, e o arquivo fica pronto para baixar. Sem pedido de compartilhar a tela, sem upload.
GIFs leves e nítidos
Seja breve
De 2 a 6 segundos é suficiente; o tamanho de um GIF cresce a cada quadro.
Faça loop de um ciclo
Defina a duração como um ciclo completo da animação para o loop emendar sem pulo.
15 fps e 480p
O padrão serve para a maioria das documentações e chats; 25 fps para movimento rápido, 720p para detalhes.
Cores chapadas ficam melhores
Um GIF tem 256 cores por quadro; gradientes longos e fotos ficam com faixas. Para esses casos, um MP4 é menor e mais nítido.
Além desta ferramenta
Uma animação é o começo. Uma skill faz o vídeo inteiro.
Esta ferramenta transforma em vídeo o HTML que você já tem. Uma Motion Skill começa um passo antes: no Claude Code, no Codex ou no Cursor, seu agente lê seu produto ou suas anotações, planeja as tomadas, escreve cada cena, coloca a trilha e renderiza o MP4 final.
- ✓A partir do seu próprio material, não de um prompt em branco
- ✓Várias cenas, montadas com música
- ✓Renderizado no seu computador e seu para usar
Skills que continuam daqui
Cada uma faz um tipo diferente de vídeo. A primeira é a mais próxima desta página.
Você faz mais de um tipo de vídeo?
Comece grátis com o Motion Director. Uma skill custa $4.90; um plano libera todas as skills, e as novas conforme chegam.
Mensal
$9.90/ mês
- ✓Todas as skills de vídeo completo, estilos incluídos
- ✓Novas skills assim que saem
- ✓Atualizações das skills existentes
- ✓Uso comercial do que você renderiza
Anual
Economize 34%$79/ ano
- ✓Todas as skills de vídeo completo, estilos incluídos
- ✓Novas skills assim que saem
- ✓Atualizações das skills existentes
- ✓Uso comercial do que você renderiza
Fundador vitalício
Oferta de fundador$169pagamento único
- ✓Todas as skills de vídeo completo, estilos incluídos
- ✓Novas skills assim que saem
- ✓Atualizações das skills existentes
- ✓Uso comercial do que você renderiza
- ✓Um pagamento, sem renovação
Baixar o Motion Director (grátis) →Uma skill $4.90 · Escolha uma skill →
Perguntas
Como converter uma animação CSS em GIF?
Cole a página (HTML com o CSS), escolha GIF, defina a duração como um ciclo e renderize. O GIF é desenhado quadro a quadro, então fica fluido e com exatamente a duração definida.
Por que meu GIF ficou grande?
Cada quadro é salvo com sua própria paleta de 256 cores. Encurte, reduza a taxa de quadros ou o tamanho, ou use MP4, que muitas vezes tem um décimo do tamanho.
O GIF tem fundo transparente?
Não: a transparência do GIF é uma cor ligada ou desligada, o que deixa bordas suaves serrilhadas. Para transparência, use WebM ou PNG na mesma ferramenta.
Algo é enviado?
Não. A página roda e o GIF é codificado no seu navegador.