Ferramentas para sites artísticos na web: p5.js, three.js, PixiJS, Paper.js e Hydra

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.

1) Antes de tudo: como chamar essas coisas?

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:

p5.js: biblioteca de creative coding para desenhar, animar e interagir no navegador.
three.js: biblioteca para 3D na web, estruturando cena, câmera, renderer, materiais, luz e objetos.
PixiJS: engine/rendering engine 2D focado em performance e acabamento visual.
Paper.js: framework/biblioteca para gráficos vetoriais e curvas Bézier em cima do canvas.
Hydra: ambiente e linguagem de live coding / video synth para visuais generativos e experimentais.

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.

2) A base real de qualquer site artístico

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:

HTML

É a estrutura do site: títulos, texto, links, imagens, seções, botões, navegação, metadados, acessibilidade básica e SEO.

CSS

É o acabamento visual estrutural: grid, layout, tipografia, responsividade, estados de hover/focus, contraste, temas, composição, camadas e ritmo visual.

JavaScript

É 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.

WebGL

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.

Web Audio

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.

3) p5.js

O que é

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 que ele faz bem

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:

arte generativa;
animação 2D;
reações a mouse e teclado;
instalações visuais simples;
protótipos rápidos;
estudos tipográficos e visuais;
experiências educacionais;
sketches audiovisuais e experimentais.

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.

Onde ele brilha

quando você quer começar rápido;
quando a estética pode nascer da experimentação;
quando o processo importa tanto quanto o resultado;
quando você quer um site mais “sketchbook”, “caderno visual”, “lab”, “obra” ou “portfólio vivo”.

Onde ele não é a melhor escolha

quando você precisa de 3D sério;
quando o site exige muita disciplina arquitetural;
quando performance 2D extrema é prioridade;
quando a experiência precisa parecer menos “sketch” e mais “produto polido”.

Stack recomendada com p5.js

A combinação mais sensata costuma ser:

HTML + CSS + JavaScript/TypeScript
Vite para desenvolvimento e build
p5.js para o canvas/interação principal
GSAP se você quiser animar elementos do DOM com mais precisão
Astro se o site for portfólio, landing page, blog autoral ou site orientado a conteúdo

Julgamento honesto

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.

4) three.js

O que é

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.

O que ele faz bem

É a escolha natural quando o site precisa de:

profundidade espacial real;
câmera;
luz;
materiais;
modelos 3D;
partículas;
ambientes;
objetos navegáveis;
cenas mais cinematográficas;
experiências imersivas.

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.

Onde ele brilha

hero sections 3D;
portfólios imersivos;
sites que parecem instalação digital;
cenas navegáveis;
produtos ou identidades com volume, luz e espaço;
experiências premium com sensação de profundidade.

Onde ele cobra caro

curva de aprendizado maior;
mais complexidade mental;
gestão de assets;
mais pontos de falha de performance;
tentação constante de exagerar e destruir usabilidade.

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.

Stack recomendada com three.js

HTML + CSS + JavaScript/TypeScript
Vite como base padrão
three.js
GSAP para sincronizar DOM, câmera e scroll
React apenas se você realmente quiser componentização complexa
Next.js só quando o projeto for mais “app” do que “site”
Astro pode ser ótimo para casca de conteúdo + ilha interativa 3D
GLSL/WebGL shaders quando quiser sair do básico e ir para linguagem visual mais própria

Julgamento honesto

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.

5) PixiJS

O que é

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”.

O que ele faz bem

PixiJS é forte quando você quer 2D rápido, polido e com cara profissional.

Ele funciona muito bem para:

motion graphics 2D;
interfaces altamente visuais;
camadas com blend, filtros e efeitos;
sprites, partículas e composição;
experiências gráficas mais intensas;
sites que precisam de acabamento melhor que um sketch cru.

Onde ele brilha

projetos 2D com muitos elementos;
composições ricas e suaves;
experiências que precisam manter boa fluidez;
interfaces visuais que parecem produto, não experimento escolar.

Onde ele não é o ideal

se a sua busca é “aprender arte com código” do zero;
se você quer desenho vetorial autoral com curvas como primeira prioridade;
se a obra é mais sobre lógica procedural simples do que sobre renderização 2D refinada.

Stack recomendada com PixiJS

HTML + CSS + JavaScript/TypeScript
Vite
PixiJS
GSAP para animação do DOM e sincronização com scroll
Astro para sites mais editoriais/portfólio
React ou Svelte se houver interface rica em componentes ao redor do canvas

Julgamento honesto

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”.

6) Paper.js

O que é

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.

O que ele faz bem

Paper.js é uma ótima escolha quando a sua estética é mais:

vetorial;
desenhada;
geométrica;
editorial;
ilustrativa;
baseada em curvas;
caligráfica;
precisa em composição.

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.

Onde ele brilha

tipografia experimental;
linhas, formas, células, diagramas e composições vetoriais;
ferramentas de desenho;
experiências com interações mais gráficas que “gameificadas”;
projetos que precisam exportar ou conversar com SVG.

Onde ele perde

quando a ambição é 3D;
quando você quer engine 2D de alta performance para muitos sprites;
quando a linguagem visual pede vídeo synth, feedback ou glitch pesado.

Stack recomendada com Paper.js

HTML + CSS + JavaScript/TypeScript
Vite
Paper.js
GSAP se houver transições mais complexas no restante do site
Astro ou HTML/CSS/JS puro se o projeto for mais enxuto

Julgamento honesto

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”.

7) Hydra

O que é

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.

O que ele faz bem

Hydra é excelente para:

glitch;
feedback visual;
loops vivos;
vídeo processado;
texturas psicodélicas;
modulação;
performances ao vivo;
experiências audiovisuais;
visuais que parecem uma máquina sendo tocada ao vivo.

A documentação também enfatiza que ele pode usar fontes externas como webcam, vídeos, imagens, canvas HTML e streams.

Onde ele brilha

homepages performáticas;
sites que parecem instrumento;
experiências VJ / live coding;
instalações visuais online;
estéticas experimentais, sujas, mutantes e não-lineares.

Onde ele não é a escolha óbvia

sites corporativos;
layouts complexos orientados a conteúdo;
interações finas de interface;
projetos em que legibilidade e previsibilidade são prioridade.

Stack recomendada com Hydra

HTML + CSS + JavaScript
Hydra
Tone.js ou Web Audio API, se você quiser sincronizar som e visual
Vite para organizar o projeto se ele sair do protótipo
Astro ou uma casca HTML simples para envolver a experiência

Julgamento honesto

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.

8) Comparação rápida

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

9) As stacks que realmente acompanham esses sites

Aqui está a parte que mais importa no mundo real.

9.1 Stack mínima universal

Se você quer começar sem inventar moda:

HTML
CSS
JavaScript
Vite

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.

Quando essa stack mínima basta

landing pages autorais;
portfólios experimentais;
sites de uma página;
projetos visuais com pouca lógica de aplicação.

9.2 Stack ideal para site artístico orientado a conteúdo

Se o site tiver texto, páginas, portfolio, manifesto, estudos, projeto editorial, blog ou documentação visual:

Astro
HTML/CSS/JS
a biblioteca visual escolhida (p5.js, three.js, PixiJS, Paper.js ou Hydra)
GSAP se você quiser motion no DOM e no scroll

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.

Quando usar Astro

portfólio de artista;
site de projeto autoral;
página de filme/obra/livro/ensaio;
home experimental + páginas de conteúdo;
site bonito que ainda precisa carregar rápido.

9.3 Stack para site mais “app”, com interface complexa

Se o projeto tiver estados complexos, muitos componentes, painel, filtros, lógica de interface rica ou arquitetura mais parecida com app:

React
possivelmente Next.js
a biblioteca visual escolhida
GSAP ou Motion para animação
Vite se não usar Next

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.

Quando usar React / Next.js

quando o site é quase uma aplicação;
quando existe muito estado de interface;
quando o conteúdo depende de login, dados dinâmicos ou estrutura mais complexa;
quando você precisa de uma base de componentes robusta.

Quando não usar

quando o projeto é essencialmente um site artístico simples e você só está adicionando React por reflexo.

Muita gente usa React onde bastaria HTML/CSS/JS + uma boa biblioteca visual.
Isso não é sofisticação. É sobrecarga.

9.4 Stack para UI mais enxuta

Se você quer componente, reatividade e menos peso mental do que React:

Svelte ou SvelteKit
biblioteca visual escolhida
Vite (ou SvelteKit, que é baseado em Vite)

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.

9.5 Stack de animação complementar

Mesmo escolhendo uma biblioteca gráfica, você talvez queira animar:

texto;
headers;
overlays;
menus;
transições de página;
scroll;
camadas do DOM fora do canvas.

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.

Quando GSAP faz sentido

quando o canvas/WebGL não precisa cuidar de toda a animação;
quando você quer sincronizar interface e cena;
quando scroll e tempo são parte do design.

9.6 Stack de áudio

Se o projeto for musical, responsivo a som, performático ou sinestésico:

Web Audio API
ou Tone.js como abstração mais amigável

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.

Quando isso entra no jogo

Hydra com áudio reativo;
p5.js com visualizações musicais;
sites-experiência que respondem a frequência e amplitude;
obras interativas que misturam som, espaço e imagem.

9.7 CSS: puro, utilitário ou framework?

Para site artístico, a resposta sincera é:

CSS puro é ótimo quando a identidade visual é muito própria.
Tailwind CSS é ótimo quando você quer velocidade, consistência e responsividade sem cair num framework visual engessado.

Tailwind gera CSS estático a partir das classes encontradas em seus arquivos e funciona bem com estados, breakpoints e composição utilitária.

Minha leitura prática

se a estética é autoral e delicada, CSS puro ou CSS Modules muitas vezes são melhores;
se você quer velocidade e disciplina, Tailwind é útil;
se você nem sabe o layout ainda, não enfie Tailwind porque “todo mundo usa”.

10) Combinações prontas por tipo de projeto

A) Portfólio artístico minimalista

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.

B) Site imersivo 3D

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.

C) Site 2D premium e fluido

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.

D) Site vetorial / tipográfico / ilustrativo

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.

E) Site glitch / live / synth visual

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.

11) Qual eu escolheria em cada caso?

Se o seu objetivo for...

“Quero começar e descobrir minha estética”

p5.js

“Quero 3D de verdade”

three.js

“Quero 2D mais profissional e performático”

PixiJS

“Quero desenho vetorial, formas, curvas e tipografia”

Paper.js

“Quero uma coisa viva, glitchada, performática e audiovisual”

Hydra

“Quero um site com conteúdo e uma camada artística por cima”

Astro + a biblioteca visual certa

12) Conclusão brutalmente honesta

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:

se pensa em desenho, estudo, experimento e descoberta, vá de p5.js;
se pensa em espaço, luz, câmera e presença, vá de three.js;
se pensa em 2D rápido, bonito e controlado, vá de PixiJS;
se pensa em vetor, forma, curva e design gráfico, vá de Paper.js;
se pensa em vídeo synth, feedback, performance e caos modular, vá de Hydra.

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.

13) Fontes principais

14) Nota final

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.

Related documents