Canvas UI: efeitos de cinema rodando sobre HTML de verdade

O problema é que, historicamente, você tinha que escolher um dos dois. Ou o conteúdo era HTML “vivo” e sem graça, ou era um efeito visual espetacular que, por baixo, virava só uma imagem morta — sem texto de verdade, sem link que funciona, sem nada.

O Canvas UI é uma biblioteca de código aberto que apareceu para acabar com essa escolha. Ela coloca efeitos de WebGL por cima de HTML real e funcionando. E é uma das coisas mais interessantes que surgiram na web nos últimos tempos.

O que é o Canvas UI

Canvas UI é uma coleção de componentes visuais prontos, criada pelo David Haz — o mesmo desenvolvedor por trás do React Bits, que muita gente da comunidade já conhece. São efeitos como líquido, vidro, chamas, VHS antigo, revelação em partículas e estilhaçamento de vidro, todos rodando sobre a sua página real.

A biblioteca é gratuita, o código é aberto (licença MIT com uma cláusula que só te impede de revender a própria biblioteca como produto), e funciona em qualquer framework: React, Vue, Svelte, Solid, Preact ou JavaScript puro. Você escolhe o efeito, instala, e ele passa a envolver o seu conteúdo.

Antes de mostrar os efeitos em si, vale entender a mágica por trás — porque é aí que está a parte realmente nova.

Como isso funciona por baixo

Para colocar um efeito de GPU (a placa de vídeo do computador) por cima de uma página, historicamente existiam dois caminhos, e os dois eram ruins.

Caminho 1: reconstruir tudo dentro do canvas. Você joga fora o HTML e redesenha cada texto, cada botão, cada campo por conta própria, na mão, dentro da área de pixels. É por isso que empresas como a Figma tiveram que construir praticamente um navegador dentro do navegador, e o Google Docs roda seu próprio motor de layout. O custo disso é alto: acessibilidade, busca na página, tradução e seleção de texto simplesmente param de funcionar, porque o navegador não enxerga mais um “título” ou um “botão” — enxerga só um retângulo colorido.

Caminho 2: tirar uma foto da página. Bibliotecas como a html2canvas fazem isso: batem uma espécie de print do seu HTML e desenham essa imagem no canvas. O problema é que é uma reimplementação incompleta — muita coisa não é suportada, e você acaba com uma foto estática, não com a página viva.

O Canvas UI se apoia numa terceira via, que é uma novidade de verdade: a API HTML-in-Canvas. Em vez de reconstruir ou fotografar, essa API pega um elemento HTML real e o entrega ao canvas como uma “textura” — uma superfície que os efeitos podem distorcer, dobrar e incendiar em tempo real. E aqui está o pulo do gato: o elemento continua sendo um elemento de verdade. O texto segue selecionável, o link segue clicável, o leitor de tela ainda enxerga tudo, e quando a página muda, o efeito acompanha na hora.

A explicação mais curta que já vi para isso é: pense na API HTML-in-Canvas como “shaders para HTML” (shaders são os pequenos programas que a placa de vídeo usa para criar efeitos visuais), ou como uma reencarnação moderna do velho Flash — só que sem os problemas do Flash.

Um detalhe importante e honesto: essa API ainda é experimental. É uma proposta em discussão para virar padrão da web, e hoje (metade de 2026) ela só funciona no Chrome com uma configuração especial ligada — o que se chama de “feature flag” ou “origin trial”. Ou seja, não é algo que todo visitante já tem ativado por padrão. E é justamente aqui que o Canvas UI faz uma escolha inteligente.

Os efeitos não quebram quando não são suportados

Essa é a parte que separa um brinquedo bonito de uma ferramenta usável. Quando o visitante abre a página num navegador que não tem a API HTML-in-Canvas ligada — o Firefox, por exemplo — o efeito não trava e nem estraga a página. Ele simplesmente cai para uma versão mais simples, ou some, e a página continua funcionando como um site normal.

No jargão, isso se chama degradação graciosa: em vez de “ou funciona tudo ou nada funciona”, o site oferece a melhor experiência possível para cada visitante. Além disso, boa parte dos componentes é feita só com WebGL puro e three.js (uma biblioteca famosa para gráficos 3D na web), e esses funcionam em qualquer navegador moderno, sem precisar de flag nenhuma.

Na prática, dá para dividir a biblioteca em dois grupos: os efeitos WebGL, que rodam em todo lugar hoje, e os efeitos HTML-in-Canvas, que brilham no Chrome com a flag ligada e caem para uma versão simples nos demais.

Instalar é copiar, não instalar

O Canvas UI usa o mesmo sistema do shadcn/ui, que já é padrão em muito projeto moderno. Você não instala um pacote fechado que fica escondido nas dependências. Você roda um comando e o código-fonte do componente é copiado direto para dentro do seu projeto.

A diferença é enorme para quem gosta de ter controle: o código é seu desde o primeiro dia. Você pode abrir, ajustar as cores, mudar o comportamento, ou pedir para o Claude reescrever o efeito do jeito que quiser. Nada fica trancado.

E tem um bônus para quem trabalha com IA: a biblioteca tem suporte a MCP (o protocolo que deixa assistentes de IA conversarem com ferramentas). Isso significa que, dentro do Claude Code, do Cursor ou de editores parecidos, você pode simplesmente pedir “adicione o componente Liquid do Canvas UI” e o próprio assistente encontra e instala.

Cinco efeitos que valem a visita

A biblioteca tem mais de duas dúzias de componentes, mas alguns chamam mais atenção:

Decrypt Reveal. O conteúdo aparece embaralhado, como aqueles caracteres de “hacker de filme”, e vai se revelando conforme o mouse passa por cima. Além de bonito, tem um uso prático ótimo: aquela senha ou chave secreta que aparece uma única vez na tela. Você deixa ela embaralhada e o usuário só revela ao passar o mouse para copiar.

Flame Wrap. Cria uma borda de chamas ao redor de um elemento, com direito a distorção de calor. Pense num botão de ação perigosa — tipo “apagar repositório” no GitHub. Já é vermelho, mas cercado por fogo o usuário entende na hora que ali é coisa séria.

Peel. A página se dobra e descasca num canto, como uma folha sendo virada, revelando o que está por baixo. É mais uma demonstração de força da tecnologia do que algo que você usaria todo dia, mas impressiona.

Ripple. A página parece normal até você clicar — e aí surgem ondas de água se espalhando por cima de todo o HTML, como uma pedra jogada num lago. Perfeito para uma página de campanha ou lançamento que quer causar impressão.

Shatter. O efeito mais chamativo: conforme você mexe o mouse, o HTML se despedaça em cacos de vidro 3D. É puro exagero, e é exatamente por isso que funciona numa página de marketing.

Um uso que quase ninguém percebeu

Fora dos sites, existe uma aplicação que já dá para usar hoje e passa despercebida. Ferramentas como Remotion e HyperFrames permitem criar vídeos usando código — em vez de editar num programa tradicional, você programa o vídeo. E os efeitos do Canvas UI funcionam dentro dessas ferramentas.

Na demonstração, o autor pega um efeito de VHS do Canvas UI e pede ao Claude para aplicá-lo a um vídeo de webcam já gravado. Em seguida troca por um efeito de chuva, depois adiciona alguns glitches — tudo por comando, sem abrir editor nenhum. Para quem se vira melhor programando do que editando vídeo, é uma porta interessante: você “codifica” os efeitos e ajusta o vídeo conversando com a IA.

Vale a pena?

Depende de qual metade da biblioteca você olha.

Os efeitos de WebGL, que funcionam em todos os navegadores hoje, dá para colocar numa landing page ou num site de marketing sem medo. Já os efeitos que dependem da API HTML-in-Canvas ainda são mais para demonstração — servem para mostrar o futuro que talvez chegue aos navegadores, mas não para um site que precisa funcionar igual para todo mundo agora. A exceção é justamente o uso em vídeos, onde eles já entregam valor real hoje.

De qualquer forma, o Canvas UI é uma daquelas coisas que vale conhecer só pela ideia por trás: durante décadas a web te obrigava a escolher entre conteúdo útil e visual bonito, e essa nova API está começando a dizer que dá para ter os dois ao mesmo tempo.

Onde encontrar: o site é canvasui.dev e o repositório fica em github.com/DavidHDev/canvas-ui. Todos os efeitos que aparecem na documentação são os componentes reais rodando ao vivo — vale abrir e brincar um pouco.