Canvas UI, uma biblioteca de componentes open source criada por David Haz (criador do React Bits), foi lançada como a primeira biblioteca construída sobre a API experimental HTML-in-Canvas, executando efeitos GPU sobre conteúdo real e interativo da página.
A biblioteca oferece 35 componentes, incluindo fluidos controlados por ponteiro, fogo, lentes de vidro, filtros ASCII, efeito VHS e reveladoras de partículas. Cada efeeto possui uma build WebGL usando GLSL e uma build WebGPU usando WGSL através do vgpu, com wrappers para React, Solid, Preact, Vue, Svelte e TypeScript vanilla sem dependências.
Em vez de pintar um bitmap estático, a maioria dos componentes usa a API html-in-canvas do Chrome para colocar DOM live dentro de um canvas, capturá-lo com drawElementImage, enviá-lo como textura e distorcê-lo em um shader. O texto permanece selecionável, os links continuam clicáveis e o conteúdo mantém-se na árvore de acessibilidade.
Os componentes são distribuídos como código-fonte através de um registro compatível com shadcn, em vez de como um pacote.
Requisitos e Compatibilidade
A experiência completa requer Chrome com a flag canvas-draw-element ativada, ou um token de origin trial, que funciona do Chrome 148 ao 150 e está vinculado a um único domínio. Em outros navegadores, os efeitos html-in-canvas retornam a um overlay GPU simples ou renderizam o conteúdo encapsulado sem alterações, e os componentes de objetos 3D funcionam em qualquer lugar.
Como o código é copiado para o repositório, atualizações significam re-executar o comando de instalação e conciliar edições locais. Trocar de renderizador é principalmente substituir o arquivo instalado pelo item do registro -webgpu, que adiciona vgpu e @webgpu/types. O projeto também documenta que as mudanças do Chrome 150 em texElementImage2D e copyElementImageToTexture não requerem migração, já que a captura acontece através da API 2D e os uploads usam texImage2D padrão ou copyExternalImageToTexture.
Recepção e Boas Práticas
O shadcn chamou de um dos registros mais impressionantes que já viram, e a conta Chrome for Developers disse ser bom ver html-in-canvas capacitando novos frameworks. Em uma análise detalhada, Flavio Copes elogiou a engenharia despretensiosa: o componente Liquid interrompe seu loop com IntersectionObserver quando fora da tela, respeita prefers-reduced-motion e libera texturas, programas e listeners ao desmontar. Seu conselho foi usar um efeito forte em vez de seis, e evitar dashboards, fluxos de checkout e sites de documentação.
No Hacker News, um comentarista respondeu a uma demo com ceticismo sobre uma capacidade exclusiva do Google, questionando se não devemos rejeitar tecnologias que permitem ao Google Abraçar, Estender e Extinguir. A resposta foi que o processo de padronização requer implementações antes da padronização, e os comentários mais recentes na questão WHATWG vêm de Jake Archibald (Mozilla) e Anne van Kesteren (Apple), mostrando que não é um projeto unilateral do Google.
