Canvas UI lanza 35 componentes con shaders WebGL y WebGPU sobre DOM vivo
La biblioteca open source de David Haz, autor de React Bits, aplica efectos de GPU sobre contenido DOM que sigue siendo seleccionable y clicable, pero exige Chrome con la API html-in-canvas.
Canvas UI es una librería de componentes open source que aplica efectos de GPU sobre contenido DOM que sigue vivo: el texto se puede seleccionar, los enlaces se pueden pulsar y todo permanece en el árbol de accesibilidad. Detrás está David Haz, autor de React Bits, y es la primera biblioteca construida sobre la API experimental HTML-in-Canvas.
El paquete incluye 35 componentes: fluido que responde al puntero, fuego, lentes de cristal, filtros ASCII, grano de VHS y revelados de partículas. Cada efecto tiene una versión WebGL escrita en GLSL y otra WebGPU escrita en WGSL a través de vgpu, con envoltorios para React, Solid, Preact, Vue, Svelte y TypeScript sin dependencias.
La clave técnica es que no pintan un bitmap muerto. La mayoría usa la API html-in-canvas de Chrome para maquetar el DOM vivo dentro de un canvas, capturarlo con drawElementImage, subirlo como textura y deformarlo en un shader. De ahí que el contenido siga siendo contenido y no una imagen.
Dónde funciona y dónde no
La experiencia completa necesita Chrome con el flag canvas-draw-element o un token de origin trial, que va de Chrome 148 a Chrome 150 y queda atado a un único dominio. Fuera de ahí, los efectos html-in-canvas caen a una capa GPU superpuesta o renderizan el contenido envuelto sin más; los componentes de objetos 3D funcionan en cualquier navegador. Safari y Firefox no implementan la característica.
La distribución es como código fuente a través de un registro compatible con shadcn, no como paquete: npx shadcn@latest add @canvas-ui/liquid-react copia los archivos al repositorio. Eso tiene consecuencias operativas. Actualizar significa volver a ejecutar el comando e integrar a mano los cambios locales. Cambiar de renderizador es, en la práctica, sustituir el archivo instalado por el ítem -webgpu del registro, que añade vgpu y @webgpu/types. El proyecto documenta que los cambios de Chrome 150 en texElementImage2D y copyElementImageToTexture no exigen migración, porque la captura va por la API 2D y la subida usa texImage2D o copyExternalImageToTexture estándar.
La licencia es MIT con Commons Clause: se puede usar en productos comerciales, pero no revender los componentes. El repositorio supera las 4.600 estrellas y el registro está preparado para MCP, de modo que un asistente puede explorar e instalar componentes a través del servidor MCP de shadcn.
El debate
shadcn lo ha calificado como uno de los registros más logrados que ha visto. Flavio Copes, en su análisis, elogió la ingeniería poco vistosa: el componente Liquid detiene su bucle con IntersectionObserver cuando sale de pantalla, respeta prefers-reduced-motion y libera texturas, programas y listeners al desmontarse. Su consejo: usar un efecto potente en lugar de seis, y no meter esto en paneles de control, flujos de pago ni documentación.
En Hacker News apareció la objeción de siempre: una capacidad que solo implementa Chrome. La respuesta habitual es que el proceso de estandarización exige implementaciones antes de estandarizar, y los comentarios recientes en el issue del WHATWG son de Jake Archibald (Mozilla) y Anne van Kesteren (Apple). La discusión sobre accesibilidad en el explainer del WICG sigue abierta, incluido cómo se exponen los subárboles dibujables sin geometría actualizada.
Queda por ver si la API sale del origin trial y la adoptan otros motores. Mientras tanto, Canvas UI es la única opción que usa la página misma como entrada del shader. Paper Shaders instala shaders de canvas sin dependencias desde npm, pero se colocan detrás o alrededor del contenido como textura, y React Bits anima el DOM directamente.
