Repolode
Enviar
paper-design

paper-design/shaders

Shaders para canvas no estilo WebGL, sem dependências, para planos de fundo e texturas na web; use via npm (React ou JavaScript puro) ou crie visualmente no Paper.

Ver no GitHubSite
Estrelas
3,919
Forks
174
Issues abertas
14
Último commit
anteontem

O que é?

Paper Shaders é um conjunto de componentes de shader baseados em canvas para adicionar texturas animadas ou estáticas a sites, como planos de fundo em gradiente, ou para mascarar formas e textos com efeitos de shader. O projeto é distribuído em dois pacotes npm: @paper-design/shaders para JavaScript puro e @paper-design/shaders-react para React, e não tem dependências em tempo de execução.

A biblioteca inclui shaders como MeshGradient e DotOrbit, que aceitam opções como cores, distorção, swirl, velocidade e escala. As configurações podem ser escritas diretamente no código ou criadas visualmente no Paper e, em seguida, exportadas como código leve para qualquer codebase. A animação é opcional.

O projeto é voltado a designers que querem incluir estilos de shader comuns em seus designs e a desenvolvedores que buscam planos de fundo personalizáveis e de alto desempenho. Vue e outros frameworks ainda não são compatíveis, mas contribuições da comunidade poderão ser bem-vindas no futuro. Os mantenedores recomendam fixar as versões, pois a linha 0.0.x pode incluir mudanças incompatíveis.

Recursos principais

  • 01Componentes de shader para canvas sem dependências
  • 02Disponível em pacotes npm para React e JavaScript puro
  • 03Criação visual no Paper com exportação para código
  • 04Cores, distorção, swirl, velocidade e escala personalizáveis
  • 05Animação opcional

Casos de uso

  • Adicionar planos de fundo animados em gradiente a um site de marketing
  • Mascarar formas ou textos com texturas de shader
  • Prototipar estilos visuais no Paper e entregá-los como código

Início rápido

  1. 1

    Instale o pacote do React

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

    Ou instale o pacote de vanilla JS

    npm i @paper-design/shaders
  3. 3

    Fixe a versão da dependência, pois mudanças incompatíveis podem ser lançadas com o versionamento 0.0.x

  4. 4

    Importe um componente de shader, como MeshGradient, e use-o com as props colors e style

Antes de usar

  • O projeto usa o versionamento 0.0.x, então mudanças incompatíveis podem ser lançadas entre versões. Fixe a versão.
  • Há suporte apenas para React e vanilla JS; Vue ainda não está disponível.

Tópicos

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

Perguntas frequentes

O que é shaders?
Shaders para canvas no estilo WebGL, sem dependências, para planos de fundo e texturas na web; use via npm (React ou JavaScript puro) ou crie visualmente no Paper. Paper Shaders é um conjunto de componentes de shader baseados em canvas para adicionar texturas animadas ou estáticas a sites, como planos de fundo em gradiente, ou para mascarar formas e textos com efeitos de shader. O projeto é distribuído em dois pacotes npm: @paper-design/shaders para JavaScript puro e @paper-design/shaders-react para React, e não tem dependências em tempo de execução.
shaders é gratuito? Qual é a licença?
shaders é open source sob a licença Apache-2.0. Confira os termos da licença antes de usá-lo em produtos comerciais.
shaders ainda é mantido?
Manutenção ativa. O último commit de shaders foi em 5 de nov. de 2026.
Para que posso usar shaders?
Adicionar planos de fundo animados em gradiente a um site de marketing Mascarar formas ou textos com texturas de shader Prototipar estilos visuais no Paper e entregá-los como código
Como instalar shaders?
Instale o pacote do React: npm i @paper-design/shaders-react Ou instale o pacote de vanilla JS: npm i @paper-design/shaders Fixe a versão da dependência, pois mudanças incompatíveis podem ser lançadas com o versionamento 0.0.x Importe um componente de shader, como MeshGradient, e use-o com as props colors e style
Onde consigo shaders?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/paper-design/shaders

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados