Catálogo de código abierto y sin inicio de sesión de componentes interactivos de UI para Three.js/WebGL, con renderizadores en vivo y el código fuente completo de React.
7,1 mil+174 esta semana670HTMLMITBien mantenidoActualizado hace 2 meses
DavidHDev/canvas-ui
Biblioteca para copiar al proyecto con 35 efectos de canvas independientes del framework, como líquido, vidrio y fuego, que se superponen a contenido HTML en vivo.
- Estrellas
- 5,346
- Forks
- 273
- Issues abiertos
- 4
- Último commit
- el mes pasado
¿Qué es?
Canvas UI es una colección de componentes visuales creativos dibujados en canvas. Efectos como simulaciones de fluidos, distorsión de vidrio, fuego, glitch y escenas 3D se superponen al HTML interactivo y en vivo de una página, por lo que el texto sigue siendo seleccionable y los enlaces se pueden abrir. Hay componentes para React, Solid, Preact, Vue, Svelte y JavaScript sin framework.
Cada componente se instala con el CLI de shadcn, que copia el código fuente en la carpeta de componentes del propio proyecto para que puedas editarlo, en lugar de añadirlo como dependencia de un paquete. Cada efecto incluye una versión para WebGL (WebGL2 sin abstracciones, con GLSL, y three.js para los efectos 3D) y otra para WebGPU, que usa vgpu y WGSL. Cuando no está disponible HTML-in-canvas, los efectos HTML usan superposiciones de GPU y el contenido envuelto sigue mostrándose.
El proyecto también incluye un registro MCP para que los asistentes de IA puedan explorar e instalar componentes, y un sitio de documentación con un entorno de pruebas interactivo.
Funciones clave
- 0135 efectos que abarcan fluidos, fuego, vidrio, glitch retro, partículas y objetos 3D
- 02Componentes para React, Solid, Preact, Vue, Svelte y JavaScript sin framework
- 03Versiones de renderizado para WebGL (GLSL) y WebGPU (WGSL mediante vgpu)
- 04El código fuente se copia en el proyecto mediante un registro compatible con shadcn
- 05El contenido envuelto sigue activo e interactivo bajo el efecto
- 06Compatibilidad con MCP para que los asistentes de IA puedan encontrar e instalar componentes
Casos de uso
- Añadir un efecto de líquido o vidrio a la sección principal de una página de marketing
- Dar un acabado visual interactivo a un portafolio o sitio centrado en el diseño
- Aplicar un efecto glitch retro o una lente ASCII a un proyecto web creativo
- Renderizar un modelo GLB o SVG como escena 3D dentro de una aplicación React o Vue
Inicio rápido
- 1
Ejecuta shadcn init si todavía no has configurado shadcn
npx shadcn@latest init - 2
Añade un componente, como Liquid for React
npx shadcn@latest add @canvas-ui/liquid-react - 3
Envuelve tu página con el componente en el código
Antes de usarlo
- El README indica que la licencia es MIT más Commons Clause, lo que restringe la venta del software, mientras que los metadatos no muestran ninguna licencia detectada.
- La mayoría de los efectos dependen de la API experimental HTML-in-canvas, con alternativas de superposición GPU en otros casos.
- Las compilaciones de WebGPU requieren navegadores recientes, como Chrome o Edge 113 o posterior, Safari 26 o posterior, o Firefox 141 o posterior.
En colecciones
Temas
Preguntas frecuentes
- ¿Qué es canvas-ui?
- Biblioteca para copiar al proyecto con 35 efectos de canvas independientes del framework, como líquido, vidrio y fuego, que se superponen a contenido HTML en vivo. Canvas UI es una colección de componentes visuales creativos dibujados en canvas. Efectos como simulaciones de fluidos, distorsión de vidrio, fuego, glitch y escenas 3D se superponen al HTML interactivo y en vivo de una página, por lo que el texto sigue siendo seleccionable y los enlaces se pueden abrir. Hay componentes para React, Solid, Preact, Vue, Svelte y JavaScript sin framework.
- ¿canvas-ui es gratuito? ¿Qué licencia tiene?
- canvas-ui es open source bajo la licencia Other. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿canvas-ui sigue mantenido?
- Actualizado en los últimos 6 meses. El último commit de canvas-ui fue el 3 oct 2026.
- ¿Para qué puedo usar canvas-ui?
- Añadir un efecto de líquido o vidrio a la sección principal de una página de marketing Dar un acabado visual interactivo a un portafolio o sitio centrado en el diseño Aplicar un efecto glitch retro o una lente ASCII a un proyecto web creativo Renderizar un modelo GLB o SVG como escena 3D dentro de una aplicación React o Vue
- ¿Cómo se instala canvas-ui?
- Ejecuta shadcn init si todavía no has configurado shadcn: npx shadcn@latest init Añade un componente, como Liquid for React: npx shadcn@latest add @canvas-ui/liquid-react Envuelve tu página con el componente en el código
- ¿Dónde consigo canvas-ui?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/DavidHDev/canvas-ui
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
Shaders de canvas con estilo WebGL y sin dependencias para fondos y texturas web, disponibles mediante npm (React o JavaScript sin frameworks) o diseñados visualmente en Paper.
3,9 mil+54 esta semana174TypeScriptApache-2.0Bien mantenidoActualizado anteayer
Efectos de shaders WebGPU empaquetados como componentes listos para usar en React, Vue, Svelte, Solid y JavaScript puro.
5,8 mil+145 esta semana272TypeScriptMITBien mantenidoActualizado hace 20 horas
Biblioteca de componentes de UI para React basada en React Aria y Tailwind CSS v4, antes conocida como NextUI.
31,1 mil+77 esta semana2,2 milTypeScriptApache-2.0Actualizado hace 3 días
Biblioteca de más de 215 componentes y fondos animados y personalizables para React y Next.js, instalables con shadcn o jsrepo.
51,4 mil+629 esta semana2,6 milJavaScriptOtherActualizado hace 8 días
Biblioteca de componentes de React y Tailwind CSS con componentes, efectos y bloques de interfaz animados basados en Framer Motion, distribuida con una configuración al estilo de shadcn.
3,8 mil+10 esta semana235TypeScriptMITActualizado hace 7 días