HTML para vídeo
Transforme animação web, Canvas e código Three.js em MP4
Comece por um modelo
- Janela de live Janela arredondada com selo LIVE e crachá; o som do vídeo vai para a linha do tempo
- Mídia emoldurada Janela com borda branca e brilho, rótulo no canto; entra crescendo e pode aproximar uma área
- Mural de fotos Fotos verticais surgem lado a lado, cada uma com legenda
- Tríptico de closes Imagens lado a lado de ponta a ponta, cada uma com rótulo, e número e título do capítulo embaixo
- Galeria com faixa As miniaturas embaixo se destacam por vez e a imagem grande acompanha
- Storyboard e principal Coluna de quadros à esquerda e janela principal com rótulo à direita
- Explicação dividida Texto grande à esquerda (segunda linha em destaque), mídia à direita e marcador de linha do tempo
- Título preenchido com mídia Seu vídeo ou imagem aparece dentro de letras gigantes, com chapéu e subtítulo
- Mockup de celular Seu vídeo dentro de um celular flutuando
- Marca no canto Seu logo e nome fixos num canto
- Gradiente granulado Gradiente lento de verde-azulado a laranja com grão; use como fundo
- Título pop Título grande com sublinhado e subtítulo
- Palavra a palavra As palavras surgem uma a uma no ritmo
- Crescimento de dados As barras crescem enquanto o número sobe
- Tarja inferior Tarja com nome e função
- Varredura de luz Um feixe de luz atravessa a imagem
- Contagem regressiva 3, 2, 1 aparecem enquanto o anel se esvazia
- Máquina de escrever Digita letra por letra com cursor piscando
- Anel de progresso O anel se enche até a porcentagem e o número sobe
- Círculo de destaque Um círculo à mão envolve o que importa
- Forma 3D girando Um nó metálico gira devagar (Three.js)
- Barras de música As barras pulam com a música da linha do tempo e piscam nas batidas
- Cartões de legenda As legendas do trecho surgem uma por cartão com barra de destaque; oculte a faixa de legendas para ficar só com os cartões
- Título destacado Uma faixa marca-texto cruza o fundo creme enquanto letras grandes caem
- Palavras de impacto Uma palavra por tela entra com impacto enquanto blocos preto, amarelo e creme varrem na diagonal
- Cartão de pergunta Etiqueta pequena e duas linhas grandes, a segunda sobre uma faixa viva
- Etiquetas adesivo Tiras de papel creme entram inclinadas (separe com |)
- Contagem em blocos Números enormes descem e cada um traz um novo bloco de cor
- Etiquetas em pílula Título grande, uma fileira de etiquetas escuras em pílula subindo uma a uma e uma conclusão destacada embaixo
- Cartões de estado Uma coluna de cartões à esquerda rola para focar cada um; à direita, uma comparação em destaque
- Tabela de etiquetas Um painel escuro que lista “etiqueta → significado” linha a linha, com as etiquetas em monoespaçada
- Cartão de citação Um rótulo pequeno no canto superior esquerdo e uma citação longa surgindo linha a linha
Um clique abre o editor com a animação já adicionada. Nos modelos com espaços de mídia, arraste um vídeo ou imagem para o cartão, ou toque em “Usar meus arquivos”, e ele já estará no lugar quando o editor abrir. Os arquivos ficam no seu aparelho; nada é enviado.
Cole uma animação web em Canvas, SVG, GSAP ou Three.js, desenhada quadro a quadro sobre seu vídeo e exportada em MP4 ou GIF. Grátis, sem marca d’água.
Cole um código de animação web ou importe um arquivo .html e ele vira um clipe de animação na linha do tempo: fundo transparente, sobreposto ao seu vídeo ou imagem, e dá para mover, redimensionar, ajustar a opacidade, pôr keyframes e animações de entrada e saída como em qualquer outro clipe.
O editor desenha quadro a quadro conforme o tempo, em vez de gravar a tela: o mesmo instante sempre gera o mesmo quadro, então a prévia é exatamente o que será exportado. Math.random, Date e requestAnimationFrame passam a usar um relógio determinístico; GSAP e Three.js já vêm embutidos, sem precisar de scripts externos.
O código roda num sandbox isolado, sem acesso à internet, então imagens e fontes externas não carregam; se precisar, incorpore-as como endereços data:. Os parâmetros que a animação declara (texto, cores, números) aparecem no painel de ajustes à direita, e é só exportar em MP4 ou GIF.
Perguntas frequentes
- Quais formas de escrever são suportadas?
- Quatro formas comuns funcionam direto: definir window.__seek(t) para desenhar um quadro por valor em segundos; criar uma timeline do GSAP pausada e colocá-la em window.__timelines; posicionar uma cena Three.js conforme o tempo dentro de __seek e renderizar; ou um loop comum de requestAnimationFrame. Se a página tiver um único canvas, ele é capturado diretamente; senão, a página inteira (SVG, CSS, texto) é desenhada como um quadro.
- Posso usar bibliotecas de uma CDN?
- O GSAP (com os plugins CustomEase, MotionPath, MorphSVG, DrawSVG e SplitText) e o Three.js já vêm embutidos, e endereços de CDN que apontam para eles são trocados automaticamente pela cópia embutida. Outras bibliotecas externas não carregam, porque o sandbox não tem acesso à internet.
- O vídeo exportado tem som?
- A animação em si não tem som, e o áudio tocado pelo código não é gravado. Adicione música ou narração separadamente na linha do tempo e exporte junto com a animação.
- E se o código der erro?
- O topo da prévia e o próprio clipe avisam do erro, e a mensagem original aparece na janela do código. Clique em “Pedir à IA para corrigir”: a IA lê seu código, corrige e confere o resultado. Até lá, a prévia fica no último quadro correto, sem afetar os outros clipes.
- Meu código é enviado para algum lugar?
- Não. O código fica salvo com o projeto no seu navegador e é renderizado e exportado no seu aparelho. Ele só é enviado se você decidir salvar o projeto na nuvem.