Canvas UI

25 efectos WebGL y html-in-canvas que se copian a tu repo con el CLI de shadcn.

Para qué reto sirve

Cuando un héroe o una sección necesita un momento visual que no sale de CSS: fluido que sigue al cursor, reveal por partículas, cristal líquido, ascii, shatter, VHS. Evita montar una escena de Three.js desde cero y deja el código dentro de tu repo, editable desde el día uno.

Qué es

25 componentes de efectos creativos —WebGL y HTML dibujado sobre canvas— que se copian a tu repo con el CLI de shadcn. Cada efecto viene en seis versiones: React, Solid, Preact, Vue, Svelte y TypeScript sin dependencias. Se inicializan al montarse, se pausan fuera de pantalla y respetan prefers-reduced-motion.

Cuándo no usarla

Los componentes que dibujan HTML vivo sobre canvas necesitan Chrome con el flag canvas-draw-element, o un token de origin trial registrado para tu dominio. Sin eso el contenido se renderiza como HTML normal y el efecto no corre. Tampoco es UI funcional: no hay botones, formularios ni tablas.

Mi veredicto

En uso en este sitio. Liquid en el fondo del héroe y Blaze en el borde inferior del viewport. El CLI de shadcn los instaló sin fricción y los efectos WebGL corren en cualquier navegador, como prometía. Tres cosas que costaron y que no están en la documentación. Una, los colores no pueden ser props estáticas en Astro: el tema se decide en cliente y las props se congelan en build, así que hubo que montar un hook con useSyncExternalStore y MutationObserver sobre el data-tema. Dos, el lienzo se monta encima del contenido y no hereda el border-radius: hay que recortar el contenedor o el efecto desborda por las esquinas. Tres, el componente vive dentro de un astro-island con display:contents, así que en CSS hay que alcanzarlo como descendiente y no como hijo directo. Los apago con prefers-reduced-motion y por debajo de 768px. Sigue sin probar la familia html-in-canvas, que es la que necesita el flag de Chrome.

Usada en: biblioteca-ia

Las dos familias

No todos los componentes corren en todas partes, y la diferencia decide si puedes usarlo en producción.

Los de WebGL puro —Liquid, Ripple, Grid, Laser, Clouds, Droplets, Glass, Magnify, Bubble— dibujan una capa sobre tu HTML y funcionan en cualquier navegador moderno.

Los de html-in-canvas —Asciify, Shatter, Particle Reveal, VHS, Glitch, Peel, Bend, Cloth, Frost— redibujan tu HTML vivo dentro del canvas. Eso depende de una API experimental: hace falta Chrome con el flag canvas-draw-element, o registrar tu dominio en el origin trial de Chrome y servir el token. Sin eso, el visitante ve HTML normal sin efecto y sin errores.

Cómo llegó a esta biblioteca

Buscaba un momento visual para la cabecera de este mismo sitio sin escribir shaders. El efecto de la cabecera de esta ficha es Liquid, instalado desde el registry.