Repolode
Enviar
shader-effects-inc

shader-effects-inc/shaders

Efectos de shaders WebGPU empaquetados como componentes listos para usar en React, Vue, Svelte, Solid y JavaScript puro.

Ver en GitHubSitio web
Estrellas
5,108
Forks
228
Issues abiertos
5
Último commit
hace 11 días

¿Qué es?

Shaders es una biblioteca de componentes que convierte efectos visuales de WebGPU, como degradados, ruido, vidrio, distorsiones, transiciones, desenfoques y efectos de cursor, en componentes para distintos frameworks. Un elemento Shader renderiza un canvas y sus componentes hijos se superponen de arriba abajo y se combinan en la GPU. Las mismas props funcionan en React, Vue, Svelte, Solid y las integraciones con JavaScript puro.

Además de la biblioteca de código, el proyecto se integra con un editor visual de diseño en shaders.com. Los efectos se pueden combinar en un canvas, ajustar mediante controles de props y exportar como código de componentes para distintos frameworks. Una CLI vincula una base de código con un proyecto de Shaders y escribe los componentes seleccionados en el proyecto como archivos, cuyo seguimiento se mantiene en un archivo de bloqueo. También incluye una agent skill y un servidor MCP para que los asistentes de programación con IA puedan buscar, instalar y editar efectos.

El motor y las integraciones con frameworks tienen licencia MIT. Es posible crear efectos personalizados definiendo un componente con código WGSL para generar la salida de cada píxel.

Funciones clave

  • 01Más de 200 componentes de efectos WebGPU, como degradados, ruido, vidrio y transiciones
  • 02Las mismas props y API en React, Vue, Svelte, Solid y JavaScript
  • 03Editor visual de diseño que exporta código de componentes para distintos frameworks
  • 04CLI para sincronizar los componentes seleccionados con una base de código y un archivo de bloqueo
  • 05Servidor MCP y agent skill para asistentes de programación con IA
  • 06Componentes personalizados definidos con código WGSL para los píxeles

Casos de uso

  • Añadir fondos animados con degradados o efecto de vidrio a un sitio de marketing o una landing page
  • Crear prototipos de efectos visuales en un editor basado en navegador y exportarlos a una aplicación de React o Vue
  • Permitir que un agente de programación con IA encuentre e instale efectos de shaders en un proyecto existente
  • Crear efectos interactivos de cursor o hover en un frontend de Svelte o Solid

Inicio rápido

  1. 1

    Instala el paquete

    npm install shaders
  2. 2

    Importa Shader y los componentes en tu framework (por ejemplo, React) y renderízalos

Antes de usarlo

  • Los presets Pro, las secciones y algunas funciones del editor requieren un plan Pro de pago.
  • El editor de diseño y las exportaciones están vinculados a una cuenta de shaders.com, independiente del paquete con licencia MIT.
  • Los efectos dependen de WebGPU, por lo que el navegador debe ser compatible.

Temas

#webgpu#shaders#react#vue#svelte#solid#animation#visual-effects#cli#javascript

Preguntas frecuentes

¿Qué es shaders?
Efectos de shaders WebGPU empaquetados como componentes listos para usar en React, Vue, Svelte, Solid y JavaScript puro. Shaders es una biblioteca de componentes que convierte efectos visuales de WebGPU, como degradados, ruido, vidrio, distorsiones, transiciones, desenfoques y efectos de cursor, en componentes para distintos frameworks. Un elemento Shader renderiza un canvas y sus componentes hijos se superponen de arriba abajo y se combinan en la GPU. Las mismas props funcionan en React, Vue, Svelte, Solid y las integraciones con JavaScript puro.
¿shaders es gratuito? ¿Qué licencia tiene?
shaders es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿shaders sigue mantenido?
Mantenimiento activo. El último commit de shaders fue el 9 oct 2026.
¿Para qué puedo usar shaders?
Añadir fondos animados con degradados o efecto de vidrio a un sitio de marketing o una landing page Crear prototipos de efectos visuales en un editor basado en navegador y exportarlos a una aplicación de React o Vue Permitir que un agente de programación con IA encuentre e instale efectos de shaders en un proyecto existente Crear efectos interactivos de cursor o hover en un frontend de Svelte o Solid
¿Cómo se instala shaders?
Instala el paquete: npm install shaders Importa Shader y los componentes en tu framework (por ejemplo, React) y renderízalos
¿Dónde consigo shaders?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/shader-effects-inc/shaders

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados