Repolode
Enviar
ruucm

ruucm/shadergradient

Renderizador personalizable de gradientes 3D animados para React, basado en Three.js y React Three Fiber, con variantes para Vue, Framer y Figma.

Ver en GitHubSitio web
Estrellas
3,086
Forks
181
Issues abiertos
17
Último commit
el mes pasado

¿Qué es?

Shader Gradient es un conjunto de componentes para renderizar fondos de gradientes 3D animados. El paquete principal, @shadergradient/react, proporciona un renderizador ShaderGradient y un contenedor ShaderGradientCanvas, basados en React Three Fiber y Three.js. La apariencia del gradiente se controla mediante props como el tipo de mesh (plane, sphere, waterPlane), los colores, la velocidad de animación, la intensidad, la frecuencia, la iluminación y los ajustes de la cámara.

También se pueden cargar ajustes desde una URL generada por el personalizador online del proyecto, lo que permite reutilizar en el código una configuración diseñada en el sitio web. Un paquete independiente, @shadergradient/vue, ofrece la misma idea para Vue 3 y Nuxt, con un canvas compatible con SSR. El proyecto también incluye un plugin de Figma y un componente de Framer.

La versión 2 del paquete para React incluye intencionalmente solo el renderizador; los controles de UI sin estado están en @shadergradient/ui, que se usa internamente para las integraciones con Framer y Figma.

Funciones clave

  • 01Renderiza gradientes 3D animados con meshes plane, sphere y waterPlane.
  • 02Permite configurar colores, velocidad de animación, intensidad de distorsión y frecuencia mediante props.
  • 03Carga ajustes desde una URL copiada del personalizador online.
  • 04Ofrece compatibilidad con Vue 3 y Nuxt mediante @shadergradient/vue, con un canvas compatible con SSR.
  • 05Incluye un plugin de Figma y un componente de Framer para usar en herramientas de diseño.

Casos de uso

  • Añadir un fondo animado de gradiente a la sección principal de una landing page hecha con React o Next.js.
  • Reutilizar en una aplicación Vue o Nuxt un gradiente diseñado en el sitio web.
  • Crear elementos visuales con gradientes en diseños de Figma o Framer.

Inicio rápido

  1. 1

    Instala el renderer de React y sus peer dependencies

    npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
  2. 2

    Instala las definiciones de tipos de Three.js

    npm i -D @types/three
  3. 3

    Renderiza ShaderGradient dentro de ShaderGradientCanvas en tu app, como se muestra en el ejemplo de uso del README

Antes de usarlo

  • El proyecto no declara ninguna licencia, por lo que los derechos de reutilización no están claros.
  • Next.js 15 App Router requiere React 19 y @react-three/fiber v9, ya que v8 no es compatible.

Temas

#react#threejs#gradient#webgl#glsl-shaders#animation#vue#figma-plugin#framer#reactjs

Preguntas frecuentes

¿Qué es shadergradient?
Renderizador personalizable de gradientes 3D animados para React, basado en Three.js y React Three Fiber, con variantes para Vue, Framer y Figma. Shader Gradient es un conjunto de componentes para renderizar fondos de gradientes 3D animados. El paquete principal, @shadergradient/react, proporciona un renderizador ShaderGradient y un contenedor ShaderGradientCanvas, basados en React Three Fiber y Three.js. La apariencia del gradiente se controla mediante props como el tipo de mesh (plane, sphere, waterPlane), los colores, la velocidad de animación, la intensidad, la frecuencia, la iluminación y los ajustes de la cámara.
¿shadergradient es gratuito? ¿Qué licencia tiene?
shadergradient no declara ninguna licencia. Su código es público, pero sin licencia no tienes permiso explícito para reutilizarlo; consulta al autor antes de depender de él.
¿shadergradient sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de shadergradient fue el 23 sept 2026.
¿Para qué puedo usar shadergradient?
Añadir un fondo animado de gradiente a la sección principal de una landing page hecha con React o Next.js. Reutilizar en una aplicación Vue o Nuxt un gradiente diseñado en el sitio web. Crear elementos visuales con gradientes en diseños de Figma o Framer.
¿Cómo se instala shadergradient?
Instala el renderer de React y sus peer dependencies: npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls Instala las definiciones de tipos de Three.js: npm i -D @types/three Renderiza ShaderGradient dentro de ShaderGradientCanvas en tu app, como se muestra en el ejemplo de uso del README
¿Dónde consigo shadergradient?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/ruucm/shadergradient

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

Proyectos relacionados