Um guia direto para entender o que cada ferramenta faz, quando usar, como combiná-las com a stack da web e quais caminhos fazem sentido para criar sites visuais, experimentais e autorais.
Você não está errado por ficar em dúvida entre “biblioteca”, “framework” e “engine”.
No discurso de marketing e na documentação, esses nomes se misturam o tempo todo.
Para não complicar:
Na prática, para quem quer criar um site artístico, dá para chamar todas de ferramentas de programação visual para a web. Esse é o nome menos pedante e mais útil.
Muita gente se empolga com a biblioteca e esquece o principal: nenhuma dessas ferramentas substitui a própria web.
Mesmo nos sites mais experimentais, a base continua sendo:
É a estrutura do site: títulos, texto, links, imagens, seções, botões, navegação, metadados, acessibilidade básica e SEO.
É o acabamento visual estrutural: grid, layout, tipografia, responsividade, estados de hover/focus, contraste, temas, composição, camadas e ritmo visual.
É a cola comportamental: eventos, animação, scroll, interatividade, troca de estado, carregamento de assets, sincronização com áudio e integração entre DOM e canvas/WebGL.
O elemento <canvas> cria uma superfície de desenho de tamanho fixo e expõe contextos de renderização, como o 2D e também contextos usados para 3D/WebGL. Em outras palavras: é onde boa parte dessas ferramentas desenha.
Sem entender ao menos o básico de canvas, você vira usuário dependente de abstração.
Se a ideia envolve GPU, efeitos pesados, shaders, 3D, partículas em grande escala ou visuais mais “premium”, o terreno passa a ser WebGL. É ele que permite renderização 2D/3D acelerada por hardware dentro do navegador.
Se o projeto for audio-reactive, musical, performático ou imersivo, você provavelmente vai tocar na Web Audio API ou em alguma abstração sobre ela, como Tone.js.
Resumo simples:
Essas bibliotecas não substituem HTML/CSS/JS. Elas se encaixam em cima dessa base.
O p5.js se define como uma ferramenta amigável para aprender a programar e fazer arte, uma biblioteca JavaScript open source feita para artistas, designers, iniciantes, educadores e qualquer pessoa interessada em sketching com código.
O grande valor do p5.js é a fricção baixa.
Você escreve pouco, vê resultado rápido e entra num ciclo bom de tentativa, erro e descoberta.
Ele funciona muito bem para:
A própria documentação ressalta que ele suporta trabalhos audiovisuais, interativos e experimentais para a web, e que seus projetos podem integrar HTML, CSS e JavaScript para dar vida ao sketch.
A combinação mais sensata costuma ser:
Se você ainda está descobrindo sua linguagem visual, p5.js é uma porta de entrada excelente.
Não porque seja “o melhor de todos”, mas porque é o que mais te deixa produzir sem sofrer cedo demais.
three.js é a ferramenta clássica para 3D na web.
A própria documentação mostra que uma aplicação three.js gira em torno de objetos conectados entre si, especialmente renderer, scene e camera.
É a escolha natural quando o site precisa de:
Além disso, a documentação recomenda usar npm e um build tool para projetos reais, principalmente quando você depende de assets como texturas, áudio e modelos 3D.
Esse é o erro clássico: o desenvolvedor descobre three.js e acha que tudo tem que virar túnel, esfera, distorção, neblina e pós-processamento.
O resultado costuma ser um site visualmente exibido e funcionalmente irritante.
Se a sua ideia central depende de espaço, profundidade e presença, three.js é melhor que p5.js.
Se não depende, usar three.js pode ser apenas uma forma mais complicada de fazer uma coisa que 2D resolveria melhor.
PixiJS se apresenta como um HTML5 Creation Engine e um renderer 2D rápido e flexível.
A documentação o descreve não só como renderizador, mas como um caminho para “creative freedom”.
PixiJS é forte quando você quer 2D rápido, polido e com cara profissional.
Ele funciona muito bem para:
Se você quer um site artístico 2D com cara mais premium, suave e controlada, eu olharia para PixiJS antes de p5.js.
p5.js é mais amigável; PixiJS costuma entregar uma sensação mais “engine”.
Paper.js é um framework/biblioteca open source para gráficos vetoriais sobre HTML5 Canvas.
A documentação destaca um Scene Graph / Document Object Model limpo e poderoso para lidar com vetores e curvas Bézier.
Paper.js é uma ótima escolha quando a sua estética é mais:
Ele não é “só um wrapper de canvas”; a própria documentação insiste que ele oferece mais do que isso: organização de itens gráficos, grupos, paths, símbolos, rasters e ferramentas específicas para curvas e manipulação vetorial.
Também oferece integração no navegador com PaperScript ou JavaScript direto, o que ajuda tanto iniciantes quanto usuários mais avançados.
Se o seu olhar é mais de designer gráfico, ilustrador, diretor de arte ou tipógrafo, Paper.js pode ser mais interessante do que p5.js.
Ele é menos “caderno de sketch” e mais “ferramenta para composição vetorial programável”.
Hydra se descreve como um live code-able video synth que roda direto no navegador.
Ele é escrito em JavaScript e compila para WebGL, com sintaxe inspirada em síntese analógica modular.
Hydra é excelente para:
A documentação também enfatiza que ele pode usar fontes externas como webcam, vídeos, imagens, canvas HTML e streams.
Hydra não é “melhor que p5.js” em geral.
Ele é melhor para uma família específica de estética: performance, synth, feedback, glitch, visual vivo e modulação.
| Ferramenta | Melhor para | Curva de entrada | Tipo de renderização | Vibe predominante | Quando evitar |
|---|---|---|---|---|---|
| p5.js | aprender, prototipar, arte generativa, interação | baixa | canvas 2D e também recursos ligados a WebGL no ecossistema p5 | sketch, laboratório, descoberta | quando o projeto exigir 3D robusto ou performance 2D mais pesada |
| three.js | 3D, profundidade, espaço, cenas imersivas | alta | WebGL | instalação digital, cinema, presença espacial | quando 3D não for parte central da ideia |
| PixiJS | 2D performático e polido | média | 2D acelerado por GPU | produto visual, fluidez, acabamento | quando a meta for exploração didática ou desenho vetorial fino |
| Paper.js | vetor, curvas, composição gráfica | média | canvas com foco vetorial | design gráfico, ilustração, precisão | quando precisar de sprites massivos, 3D ou vídeo synth |
| Hydra | live coding, glitch, feedback, audiovisual | média | WebGL | performance, caos controlado, synth visual | quando o site pedir estrutura previsível e UI tradicional |
Aqui está a parte que mais importa no mundo real.
Se você quer começar sem inventar moda:
Isso já resolve muita coisa.
Vite existe justamente para oferecer uma experiência de desenvolvimento moderna, rápida e leve, com servidor de desenvolvimento, build de produção e ecossistema de plugins.
Se o site tiver texto, páginas, portfolio, manifesto, estudos, projeto editorial, blog ou documentação visual:
Astro foi desenhado para sites content-driven, com foco em conteúdo, abordagem server-first e pouco JavaScript no cliente por padrão.
Isso combina muito com portfólios, landing pages, blogs e sites artísticos que precisam de presença visual sem virar SPA pesada.
Se o projeto tiver estados complexos, muitos componentes, painel, filtros, lógica de interface rica ou arquitetura mais parecida com app:
React, pela própria documentação, pode ser adotado gradualmente e adicionado a uma página existente.
Mas a própria equipe do React também deixa claro que React é uma biblioteca, não uma solução completa de roteamento e data fetching; para aplicação inteira, faz sentido usar um framework como Next.js.
Muita gente usa React onde bastaria HTML/CSS/JS + uma boa biblioteca visual.
Isso não é sofisticação. É sobrecarga.
Se você quer componente, reatividade e menos peso mental do que React:
Svelte se descreve como um framework de UI compilado, usando HTML, CSS e JavaScript com pouco trabalho no navegador.
Para alguns projetos autorais, isso pode ser uma alternativa elegante.
Mesmo escolhendo uma biblioteca gráfica, você talvez queira animar:
Para isso, GSAP continua sendo uma ferramenta muito forte.
A documentação diz explicitamente que ele pode animar praticamente qualquer coisa que JavaScript consiga tocar, incluindo UI, SVG, componentes React e até cenas com Three.js.
Se o projeto for musical, responsivo a som, performático ou sinestésico:
A Web Audio API permite escolher fontes de áudio, aplicar efeitos, criar visualizações e montar rotas modulares de áudio.
Tone.js, por sua vez, foi criado justamente como um framework de Web Audio para música interativa no navegador, com transporte global, sintetizadores e efeitos prontos.
Para site artístico, a resposta sincera é:
Tailwind gera CSS estático a partir das classes encontradas em seus arquivos e funciona bem com estados, breakpoints e composição utilitária.
Melhor combinação: - Astro - CSS puro ou Tailwind - p5.js - GSAP opcional
Por quê:
Você ganha conteúdo rápido, páginas leves e um canvas generativo sem transformar o site em um monstro.
Melhor combinação: - Vite - three.js - GSAP - shaders/GLSL se necessário - Astro ou HTML puro na casca
Por quê:
O foco aqui é experiência espacial. O resto do site deve servir a isso, não competir com isso.
Melhor combinação: - Vite - PixiJS - GSAP - CSS enxuto - Astro se houver bastante conteúdo
Por quê:
PixiJS costuma entregar melhor quando o 2D precisa parecer controlado, rápido e refinado.
Melhor combinação: - Vite - Paper.js - CSS puro - GSAP opcional
Por quê:
Você fica com uma base boa para curvas, composição, formas, ferramentas de desenho e linguagem gráfica mais precisa.
Melhor combinação: - HTML/CSS/JS - Hydra - Tone.js ou Web Audio API - Vite se o projeto crescer
Por quê:
Essa combinação favorece performance, improviso, modulação e comportamento audiovisual.
Se o seu objetivo for...
p5.js
three.js
PixiJS
Paper.js
Hydra
Astro + a biblioteca visual certa
A pior decisão é escolher biblioteca por hype.
A segunda pior é escolher pela demo mais chamativa.
Você deve escolher pela natureza da imagem que quer produzir:
E quase sempre, para site de verdade, a casca ideal continua sendo algo como:
HTML + CSS + JavaScript + Vite,
ou
Astro + a biblioteca visual escolhida.
Isso é o centro do jogo. O resto é ferramenta.
Este texto foi escrito com base principalmente em documentação oficial das ferramentas e em documentação de plataforma (MDN), para evitar opinião vazia e comparação inventada.
As avaliações práticas e recomendações de stack foram inferências editoriais minhas em cima dessas fontes.