ruucm/shadergradient

O que é?

Recursos principais

• 01Renderiza gradientes 3D animados com malhas plane, sphere e waterPlane.
• 02Permite configurar cores, velocidade da animação, intensidade e frequência da distorção por meio de props.
• 03Carrega configurações de uma URL copiada do customizador online.
• 04Oferece suporte a Vue 3 e Nuxt por meio de @shadergradient/vue, com um canvas compatível com SSR.
• 05Inclui um plugin para Figma e um componente para Framer, para uso em ferramentas de design.

Casos de uso

• Adicionar um fundo de gradiente animado à seção principal de uma landing page em React ou Next.js.
• Reutilizar em um app Vue ou Nuxt um gradiente criado no site.
• Criar elementos visuais com gradientes em designs no Figma ou Framer.

Início rápido

1. 1

   Instale o renderer do React e suas peer dependencies

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

   Instale as definições de tipos do Three.js

   npm i -D @types/three
3. 3

   Renderize ShaderGradient dentro de ShaderGradientCanvas no seu app, como mostrado no exemplo de uso do README

Antes de usar

• !O projeto não declara uma licença, então os direitos de reutilização não estão claros.
• !O Next.js 15 App Router requer React 19 e @react-three/fiber v9, pois a v8 não é compatível.

Tópicos

Perguntas frequentes

O que é shadergradient?

Renderizador personalizável de gradientes 3D animados para React, baseado em Three.js e React Three Fiber, com versões para Vue, Framer e Figma. Shader Gradient é um conjunto de componentes para renderizar planos de fundo com gradientes 3D animados. O pacote principal, @shadergradient/react, oferece um renderizador ShaderGradient e um wrapper ShaderGradientCanvas, baseados em React Three Fiber e Three.js. A aparência do gradiente é controlada por props, como tipo de malha (plane, sphere, waterPlane), cores, velocidade da animação, intensidade, frequência, iluminação e configurações da câmera.

shadergradient é gratuito? Qual é a licença?

shadergradient não declara licença. O código é público, mas sem licença você não tem permissão explícita para reutilizá-lo; fale com o autor antes de depender dele.

shadergradient ainda é mantido?

Atualizado nos últimos 6 meses. O último commit de shadergradient foi em 23 de set. de 2026.

Para que posso usar shadergradient?

Adicionar um fundo de gradiente animado à seção principal de uma landing page em React ou Next.js. Reutilizar em um app Vue ou Nuxt um gradiente criado no site. Criar elementos visuais com gradientes em designs no Figma ou Framer.

Como instalar shadergradient?

Instale o renderer do React e suas peer dependencies: npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls Instale as definições de tipos do Three.js: npm i -D @types/three Renderize ShaderGradient dentro de ShaderGradientCanvas no seu app, como mostrado no exemplo de uso do README

Onde consigo shadergradient?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/ruucm/shadergradient