Repolode
Enviar
paper-design

paper-design/shaders

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.

Ver en GitHubSitio web
Estrellas
3,919
Forks
174
Issues abiertos
14
Último commit
anteayer

¿Qué es?

Paper Shaders es un conjunto de componentes de shader basados en canvas para añadir texturas animadas o estáticas a sitios web, como fondos degradados, o para aplicar efectos de shader a formas y texto. Se distribuye en dos paquetes de npm: @paper-design/shaders para JavaScript sin frameworks y @paper-design/shaders-react para React, y el proyecto no tiene dependencias en tiempo de ejecución.

La biblioteca incluye shaders como MeshGradient y DotOrbit, que aceptan opciones como colores, distorsión, remolino, velocidad y escala. Los ajustes se pueden escribir directamente en el código o diseñar visualmente en Paper y luego exportar como código ligero para cualquier base de código. La animación es opcional.

El proyecto está dirigido a diseñadores que quieren incorporar a sus diseños estilos de shader habituales y a desarrolladores que buscan fondos personalizables y de alto rendimiento. Vue y otros frameworks aún no son compatibles, aunque en el futuro se aceptarán contribuciones de la comunidad. Los mantenedores recomiendan fijar las versiones, ya que la serie 0.0.x puede incluir cambios incompatibles.

Funciones clave

  • 01Componentes de shader para canvas sin dependencias
  • 02Disponible como paquetes de npm para React y JavaScript sin frameworks
  • 03Diseño visual en Paper con exportación a código
  • 04Colores, distorsión, remolino, velocidad y escala personalizables
  • 05Animación opcional

Casos de uso

  • Añadir fondos degradados animados a un sitio web de marketing
  • Aplicar texturas de shader a formas o texto
  • Prototipar estilos visuales en Paper y publicarlos como código

Inicio rápido

  1. 1

    Instala el paquete de React

    npm i @paper-design/shaders-react
  2. 2

    O instala el paquete de vanilla JS

    npm i @paper-design/shaders
  3. 3

    Fija la versión de la dependencia, ya que con el versionado 0.0.x pueden publicarse cambios incompatibles

  4. 4

    Importa un componente de shader, como MeshGradient, y úsalo con las props colors y style

Antes de usarlo

  • El proyecto usa el versionado 0.0.x, por lo que puede haber cambios incompatibles entre versiones. Se recomienda fijar la versión.
  • Solo se admiten React y vanilla JS; Vue aún no está disponible.

Temas

#webgl#shaders#react#canvas#animation#design

Preguntas frecuentes

¿Qué es shaders?
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. Paper Shaders es un conjunto de componentes de shader basados en canvas para añadir texturas animadas o estáticas a sitios web, como fondos degradados, o para aplicar efectos de shader a formas y texto. Se distribuye en dos paquetes de npm: @paper-design/shaders para JavaScript sin frameworks y @paper-design/shaders-react para React, y el proyecto no tiene dependencias en tiempo de ejecución.
¿shaders es gratuito? ¿Qué licencia tiene?
shaders es open source bajo la licencia Apache-2.0. 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 5 nov 2026.
¿Para qué puedo usar shaders?
Añadir fondos degradados animados a un sitio web de marketing Aplicar texturas de shader a formas o texto Prototipar estilos visuales en Paper y publicarlos como código
¿Cómo se instala shaders?
Instala el paquete de React: npm i @paper-design/shaders-react O instala el paquete de vanilla JS: npm i @paper-design/shaders Fija la versión de la dependencia, ya que con el versionado 0.0.x pueden publicarse cambios incompatibles Importa un componente de shader, como MeshGradient, y úsalo con las props colors y style
¿Dónde consigo shaders?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/paper-design/shaders

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

Proyectos relacionados