Converter HTML para vídeo, quadro a quadro no navegador

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.

1. <style>

   h1 { animation: rise 1.2s }

   @keyframes rise { … }

   </style>

   <h1>Hello</h1>

   HTMLanimation.html
   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.

2. 16:9

   9:16

   1:1

   ⏱ 4.5 s · auto
   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ê.

3. 142 / 180

   →

   MP4GIF60 fps
   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.

O que funciona

Tudo o que o navegador anima

Se se mexe numa aba do navegador, pode virar vídeo: a ferramenta controla o tempo do CSS, da Web Animations API, dos timers e do requestAnimationFrame, que é a base de todas as bibliotecas de animação.

• Animações e transições CSS

  Keyframes, transições, @property e filtros, no tempo exato do código.

• GSAP e anime.js

  Timelines e tweens de um CDN; a duração de uma timeline GSAP é detectada para você.

• Animações SVG

  Desenho de linhas com stroke-dashoffset, morphs e gradientes animados.

• Desenho em Canvas

  Desenho em canvas 2D e sistemas de partículas movidos por requestAnimationFrame.

• Three.js e WebGL

  Cenas 3D e shaders, quadro a quadro, em qualquer tamanho.

• p5.js e creative coding

  Sketches generativos e creative coding, exportados sem perder quadros.

• Tailwind e mockups de interface

  Heros de produto e telas de app animados com classes, timers e a Web Animations API.

• Páginas feitas por IA

  Animações, explicações e gráficos que o Claude, o ChatGPT ou o Gemini escreveram em um único arquivo HTML.

Formatos

Todos os formatos a partir de uma colagem

Escolha o arquivo pelo destino. A mesma página renderiza em qualquer um deles, em qualquer uma das três proporções.

• MP4

  H.264 · 720p, 1080p ou 4K · 24/30/60 fps

  Para redes sociais, apresentações e editores de vídeo. Toca em qualquer lugar.

• GIF animado

  De 360p a 720p · 10/15/25 fps · em loop

  Para um README, uma mensagem no Slack, um e-mail ou documentação.

• WebM transparente

  VP9 com canal alfa · de 720p a 4K

  Sem o fundo da página: uma sobreposição para Premiere, DaVinci Resolve, Final Cut ou CapCut.

• Imagem PNG

  1080p ou 4K · qualquer momento · transparente

  Um quadro como imagem estática: um pôster, uma thumbnail ou uma imagem de slide.

Usos

Para onde as pessoas levam suas animações

• Redes

  Posts e stories

  16:9 para X e LinkedIn, 9:16 para TikTok, Reels e Shorts, 1:1 para o feed. As plataformas aceitam vídeo, não HTML.

• Apresentações

  PowerPoint, Keynote e Google Slides

  Apresentações tocam MP4 ou GIF; uma animação HTML, não.

• Edição

  Títulos e sobreposições no editor de vídeo

  Um lettering inferior ou uma vinheta de logo em WebM transparente, por cima das imagens.

• Documentação

  Arquivos README e documentação

  Um GIF de um componente ou gráfico, bem onde as pessoas leem.

• Portfólio

  Dribbble, Behance e estudos de caso

  Trabalhos de motion do CodePen ou do seu próprio projeto como um vídeo limpo e nítido.

• Produto

  Lançamentos e demos

  O hero de um produto ou uma tela de app animada em HTML, como clipe para o post de lançamento.

De um chat com IA

Transforme uma animação do Claude, ChatGPT ou Gemini em vídeo

1. 01

   Peça um único arquivo HTML

   Peça “um único arquivo HTML independente, com o CSS e o JavaScript dentro”, ocupando a janela toda. Diga a duração que você quer, para a animação ter fim.

2. 02

   Copie o código ou baixe o arquivo

   Copie a página inteira do chat ou baixe o arquivo .html. Se a sua ferramenta exporta uma pasta ou um .zip (como o Claude Design), fique com o .zip.

3. 03

   Cole ou solte aqui e renderize

   A prévia toca a animação; escolha MP4, GIF ou WebM e renderize. Para mudar algo, peça à IA, cole a nova versão e renderize de novo.

Por que quadro a quadro

Fluido em qualquer computador, e privado

Uma gravação de tela guarda o que o seu computador conseguiu mostrar, incluindo os quadros perdidos. Aqui o tempo da página fica parado até cada quadro ser desenhado.

• Quadro a quadro exato

  Cada quadro é desenhado no seu próprio momento, então 60 fps são 60 quadros diferentes por segundo, mesmo num notebook lento.

• Nada é enviado

  A página roda em um frame isolado no seu navegador e o arquivo é codificado ali. Seu código nunca chega a um servidor.

• Grátis e sem marca d'água

  Sem conta, sem créditos, sem logo no seu vídeo.

Formas de transformar HTML em vídeo

Próximo

Indo além