Recursos CSS e JavaScript para criar um site IndieWeb extraordinário

Um site IndieWeb não precisa parecer um blog pronto ou um portfólio de agência. Ele pode ser uma casa digital com jardim, terminal, mapa, jukebox, mascote, constelação de links, zine, arquivo vivo e pequenas surpresas. Esta pesquisa reúne 230 recursos que entregam CSS, JavaScript, geradores, exemplos ou matéria-prima realmente utilizável para construir essa personalidade sem abandonar HTML semântico, velocidade e controle sobre o próprio endereço.

A lista não é um convite para instalar tudo. É uma caixa de ferramentas: escolha uma linguagem visual, adote poucas dependências e combine detalhes autorais. Quando o recurso serve apenas como inspiração, isso está indicado; copiar o código ou a arte de uma demonstração continua dependendo da licença publicada pelo autor.

Resumo executivo

Os melhores resultados para um site pessoal criativo vieram de quatro famílias de recursos:

• comunidades da web pessoal, como IndieWeb, 32-Bit Cafe, MelonLand e Neocities, que ensinam soluções pequenas e incentivam autoria;
• CSS nativo e geradores, que resolvem fundos, formas, tipografia, animações e layouts sem carregar uma aplicação inteira;
• bibliotecas focadas, como Motion, Anime.js, p5.js, Rough.js e Webamp, capazes de criar um elemento memorável sem tomar conta do site;
• ferramentas de qualidade, como Lighthouse, axe-core e WebPageTest, que impedem a criatividade de virar lentidão, enjoo ou inacessibilidade.

Minha recomendação é começar com HTML semântico + Open Props ou CSS próprio, produzir um detalhe visual autoral com SVG/CSS e adicionar apenas uma biblioteca JavaScript principal. Para um caminho muito IndieWeb, uma combinação especialmente boa é: Open Props, Utopia, Fontsource, Rough.js, Swup ou View Transitions, webmention.js e uma pequena cena em p5.js carregada sob demanda.

Metodologia e critérios

A seleção foi montada a partir de documentação oficial, páginas dos projetos e repositórios mantidos pelos autores. Foram priorizados recursos que atendem a pelo menos um destes critérios:

1. fornecem código CSS/JavaScript, assets ou parâmetros exportáveis;
2. resolvem um efeito específico melhor que um framework grande;
3. combinam com sites pessoais, experimentais, retrô, editoriais ou artísticos;
4. permitem auto-hospedagem ou uso sem prender o site a uma plataforma;
5. possuem documentação, demonstrações ou exemplos suficientes para aprender;
6. ajudam a preservar acessibilidade, desempenho e melhoria progressiva.

Como ler os rótulos: Código significa que existe implementação reutilizável; gerador entrega CSS/SVG/valores; inspiração é uma referência visual, não uma licença para copiar; cuidado sinaliza peso, manutenção incerta, efeito potencialmente intrusivo ou licença que merece conferência. Situação de manutenção e licenças podem mudar; confirme o repositório antes de adotar uma dependência.

Antes da lista: uma regra para não criar um parque de diversões cansativo

Escolha uma metáfora central para o site. Pode ser “observatório”, “terminal lunar”, “arquivo botânico”, “quarto dos anos 1990” ou “zine xerocada”. A metáfora decide cores, textura, tipografia, navegação e o tipo de movimento. Um cursor especial, seis partículas, três fontes e rolagem artificial usados ao mesmo tempo não formam identidade; formam ruído.

Mantenha o conteúdo utilizável sem JavaScript, carregue experiências pesadas apenas quando entram na tela, respeite prefers-reduced-motion, não esconda foco do teclado e teste em celular barato. A personalidade deve sobreviver mesmo quando animações são desligadas.

1. Comunidades e mapas da web pessoal

1. IndieWeb Wiki

Comunidade e documentação. É o ponto central para identidade própria, microformats, Webmention, IndieAuth e padrões da web pessoal. Use a galeria de exemplos de cada verbete para descobrir implementações reais em sites pequenos.

2. IndieWebify.Me

Código e validadores. Guia progressivo para transformar uma página comum em um site IndieWeb, incluindo rel=me, h-card, h-entry e autenticação. É útil para manter a decoração apoiada em HTML compreensível por pessoas e máquinas.

3. 32-Bit Cafe

Comunidade e recursos. Coletivo dedicado à web pessoal, com eventos, desafios, tutoriais e uma lista comunitária de recursos. Excelente lugar para ver soluções criativas que não seguem a estética de SaaS.

4. MelonLand

Comunidade e inspiração. Rede de webmasters, webring, fórum e projetos sobre a “web doméstica”. Explore o MelonLand Forum para encontrar código, layouts e pequenos experimentos compartilhados por autores independentes.

5. Sadgrl.online Resources

Código e tutoriais. Explica HTML/CSS para sites pessoais e oferece layouts, geradores e componentes com estética retrô. É uma das pontes mais amigáveis entre “não sei por onde começar” e uma página realmente personalizada.

6. Neocities Tutorials

Tutoriais e comunidade. Diretório de guias escritos por usuários da plataforma. A qualidade e a licença variam por autor, mas é uma fonte incomum de efeitos simples, layouts e soluções feitas sem frameworks.

7. HTML Energy

Manifesto e inspiração. Celebra HTML escrito por pessoas como meio expressivo. Não é biblioteca; use os sites e entrevistas como antídoto à ideia de que criatividade depende de uma pilha enorme de JavaScript.

8. Personalsit.es

Diretório de inspiração. Catálogo de sites pessoais enviados pelos próprios autores. Observe padrões de navegação, páginas “uses”, blogrolls, jardins digitais e detalhes que revelam personalidade; não copie código sem permissão.

9. IndieWeb Webring

Descoberta e componente. Um webring da comunidade IndieWeb cuja navegação por setas pode virar parte visual do rodapé. Além de decorar, cria caminhos reais entre sites independentes.

10. Webring

Documentação e ideias. Verbete do IndieWeb sobre anéis de sites, com implementações e exemplos. Bom ponto de partida para criar seu próprio círculo temático em vez de apenas exibir uma lista estática.

11. Wiby

Descoberta. Buscador orientado a páginas simples e à web clássica. Use-o para estudar soluções pequenas, fundos, botões, mapas de site e páginas feitas à mão que raramente aparecem nos buscadores convencionais.

12. Marginalia Search

Descoberta. Motor independente que favorece partes menos comerciais da web. É especialmente útil para localizar blogs, zines e arquivos pessoais com estética própria; trate os resultados como inspiração.

13. Search My Site

Diretório e busca. Pesquisa conteúdo em sites pessoais e independentes cadastrados. Ajuda a encontrar exemplos contemporâneos de IndieWeb sem depender de galerias de landing pages corporativas.

14. 512KB Club

Galeria e disciplina de peso. Lista sites que cabem em até 512 KB, com faixas ainda menores. Demonstra que uma identidade forte pode vir de CSS, tipografia e composição, não de megabytes de bibliotecas.

15. 1MB Club

Galeria de desempenho. Coleção de sites com menos de 1 MB. Use-a para comparar como autores equilibram imagens, fontes e scripts dentro de um orçamento explícito.

16. Low-tech Magazine — Solar Website

Estudo de caso e código. O site solar mostra como compressão, imagens tramadas e design coerente podem ser parte da narrativa. O projeto mantém código no GitHub para estudo.

17. The Handmade Web

Ensaios e inspiração. Reúne textos e exemplos sobre a web feita à mão. É útil para pensar imperfeição, autoria e intimidade como decisões de design, não como falta de acabamento.

18. Web Design Museum

Arquivo de inspiração. Capturas históricas de sites, softwares e interfaces. Use-o para reconstruir convenções visuais antigas com CSS moderno, sem copiar marcas ou assets proprietários.

19. Brutalist Websites

Galeria de inspiração. Mostra sites deliberadamente crus, tipográficos e anti-genéricos. Funciona melhor como estudo de composição; cada site possui direitos próprios.

20. Hover States

Galeria de inspiração interativa. Curadoria de sites experimentais em que movimento e interação importam. Analise ritmo, resposta ao ponteiro e transições; depois reproduza a ideia com sua própria linguagem e código.

2. Galerias, laboratórios e exemplos com código

21. Codrops

Código e tutoriais. Uma das fontes mais consistentes de navegação experimental, tipografia cinética, WebGL, transições e efeitos de imagem. Os artigos ligam demonstração, explicação e repositório; confira a licença de cada laboratório.

22. Codrops Playground

Laboratório. Coleção de experiências menores e mais rápidas que os artigos longos. Boa para estudar um efeito isolado e entender qual parte é CSS, canvas, shader ou JavaScript.

23. CodePen

Laboratório comunitário. Permite executar e bifurcar HTML, CSS e JS no navegador. Use busca e coleções para prototipar, mas verifique a licença de cada “pen”: estar publicamente visível não transforma automaticamente o código em domínio público.

24. CSS-Tricks Almanac

Referência com exemplos. O arquivo do CSS-Tricks continua valioso para propriedades, seletores, layouts e técnicas específicas. Prefira artigos recentes e confirme compatibilidade no MDN.

25. Smashing Magazine — CSS

Tutoriais aprofundados. Publica padrões de layout, acessibilidade, SVG, tipografia e animação com explicações técnicas. Excelente para entender o porquê de uma técnica antes de incorporá-la.

26. MDN CSS Guides

Documentação primária. Guias de Grid, animações, formas, filtros, nesting, scroll snap e recursos modernos. É a melhor base para trocar plugins pequenos por CSS nativo quando a plataforma já resolve o problema.

27. web.dev Patterns

Código testado. Receitas de layout, componentes, animações, temas, imagens e acessibilidade construídas sobre recursos da plataforma. Use como esqueleto robusto e aplique sua direção de arte por cima.

28. CSS Zen Garden

Experimento histórico e inspiração. Muitas folhas de estilo transformam o mesmo HTML, demonstrando quanto CSS sozinho pode alterar narrativa e atmosfera. Os designs têm direitos dos autores; o aprendizado está no método.

29. A Single Div

CSS art. Lynn Fisher desenha objetos inteiros a partir de um único elemento e pseudo-elementos. É uma aula de gradientes, sombras, bordas e composição; estude o código e respeite os termos da autora.

30. Lynn and Tonic

Experimento responsivo. Site que muda de cena conforme a largura da janela. Mostra como breakpoints podem contar histórias, e não apenas reorganizar colunas.

31. CSSBattle

Jogo e laboratório. Desafios para reproduzir imagens com HTML/CSS mínimo. É excelente treinamento para criar emblemas, ornamentos e ilustrações próprias sem assets externos.

32. 100 Days CSS

Desafios com código. Cem composições e animações curtas, com soluções da comunidade. Bom para desmontar microinterações em partes pequenas e depois redesenhá-las.

33. CSS Art

Galeria de inspiração. Reúne ilustrações feitas com CSS e links aos autores. Use para descobrir técnicas e pessoas; a licença depende de cada obra.

34. Frontend Mentor

Exercícios. Briefings visuais para implementar interfaces e comparar soluções. Embora o foco seja mais convencional, serve para praticar fundamentos antes de partir para uma composição experimental.

35. StackBlitz

Laboratório executável. Abre projetos web completos no navegador e facilita compartilhar protótipos com dependências. Use para testar uma biblioteca antes de colocá-la no site real.

36. CodeSandbox

Laboratório executável. Ambiente para exemplos, forks e protótipos front-end. É especialmente útil quando a demonstração usa bundler, módulos ou framework e não cabe em um pen simples.

37. JSFiddle

Laboratório leve. Ótimo para testar um único efeito de HTML/CSS/JS sem criar projeto. Mantenha uma cópia local dos experimentos importantes.

38. Glitch

Arquivo e remix. A hospedagem de projetos mudou ao longo do tempo, mas o acervo de experiências e tutoriais ainda é fonte de estudo. Confira o estado atual antes de depender da plataforma.

39. Creative Coding Club

Cursos e inspiração. Conteúdo orientado a animação criativa, especialmente GSAP e SVG. Parte é paga; use os exemplos públicos para aprender composição e timing, não para copiar uma identidade.

40. The Coding Train

Tutoriais com código. Explica p5.js, física, partículas, autômatos, áudio e arte generativa de maneira acessível. Os desafios têm código associado e são uma ótima ponte para criar cenas autorais.

3. CSS base, microframeworks e estéticas prontas

41. Open Props

Código, modular. Conjunto de propriedades CSS para cores, escalas, sombras, easing e animações, importáveis por módulo. Dá vocabulário visual consistente sem impor componentes ou aparência final.

42. Pico CSS

Framework semântico. Estiliza HTML nativo com poucas classes e oferece temas claro/escuro. É uma base limpa para páginas de texto; personalize variáveis em vez de aceitar a aparência padrão.

43. Simple.css

Framework classless. Torna páginas semânticas apresentáveis sem sistema de componentes. Bom para arquivos, notas e páginas secundárias onde seu CSS autoral pode ficar concentrado em detalhes.

44. Water.css

Framework classless. Uma folha pequena que melhora HTML simples e respeita tema do sistema. Útil como fallback ou base de protótipo; não cria identidade sozinho.

45. MVP.css

Framework classless. Oferece componentes razoáveis usando elementos semânticos, sem classes obrigatórias. Funciona bem para lançar a estrutura e depois substituí-la gradualmente.

46. new.css

Framework classless. CSS enxuto para documentos HTML, com variáveis fáceis de alterar. Adequado para um site textual que precisa ficar agradável antes da direção de arte final.

47. Sakura

Framework classless. Tema mínimo e legível com variantes de cor. Bom para artigos e páginas independentes, desde que você acrescente detalhes próprios.

48. Tufte CSS

Estética editorial. Reproduz princípios tipográficos de Edward Tufte, incluindo notas laterais e margens generosas. Excelente para ensaios longos, diários de pesquisa e páginas que tratam leitura como experiência.

49. Terminal CSS

Estética de terminal. Framework documentado para páginas monocromáticas e componentes em estilo CLI. Use como ponto de partida e crie sua própria paleta, símbolos e voz para evitar um “tema terminal” genérico.

50. 98.css

Estética Windows 98. CSS para botões, janelas, menus e controles retrô com HTML acessível. Ideal para uma área específica, como guestbook ou player, em vez de transformar todo o conteúdo em falsa janela.

51. XP.css

Estética Windows XP. Componentes visuais inspirados no Luna, sem JavaScript. Ótimo para criar painel, caixa de diálogo ou seção “Meu Computador”; verifique legibilidade em telas pequenas.

52. 7.css

Estética Windows 7. Recria Aero e seus controles com CSS. Transparências podem custar desempenho; teste e forneça uma versão simples para dispositivos fracos.

53. NES.css

Estética 8-bit. Componentes pixelados, balões, ícones e containers inspirados em jogos. Use com fontes legíveis e reserve a fonte pixel para títulos ou rótulos curtos.

54. RPGUI

Estética RPG. Framework para painéis, botões e barras com aparência de inventário de jogo. O projeto é mais antigo; baixe, fixe uma versão e audite assets/licença antes de incorporar.

55. PaperCSS

Estética desenhada à mão. Bordas imperfeitas, sombras, formulários e componentes que lembram papel. Combina bem com diário, sketchbook ou zine e exige pouco JavaScript.

56. Wired Elements

Web components desenhados à mão. Elementos com traço irregular construídos sobre Rough.js. Use alguns controles como acento; a coleção tem escopo limitado e deve complementar HTML normal.

57. Pattern.css

Padrões CSS. Classes para listras, pontos, diagonais e outras texturas aplicáveis a qualquer elemento. Uma forma leve de criar capas, fitas e divisores sem imagens.

58. Pure.css

Microframework modular. Grades, formulários, botões e tabelas em módulos pequenos. Útil quando você quer estrutura previsível sem adotar uma linguagem visual enorme.

59. Spectre.css

Framework de componentes. Compacto, responsivo e sem JavaScript próprio. Tem mais peças que um classless CSS, mas permite importar só o necessário; confira atividade do projeto antes de apostar nele a longo prazo.

60. Chota

Microframework. Grade, utilitários e componentes em uma folha pequena. É fácil de sobrescrever e adequado a páginas pessoais que não precisam de um ecossistema de componentes.

61. Milligram

Microframework. Base tipográfica e componentes mínimos com foco em simplicidade. O visual neutro pede customização, mas o baixo peso é bom para experiências que gastarão bytes em outra parte.

62. Basscss

Utilitários CSS. Classes funcionais pequenas para compor layout sem um framework visual. Útil para controlar ritmo e espaçamento enquanto a personalidade fica em classes autorais.

63. Tachyons

Utilitários CSS. Sistema funcional maduro, especialmente interessante para prototipar no HTML. Pode poluir marcação se usado sem disciplina; crie componentes ou parciais para padrões repetidos.

64. Beer CSS

Framework temático. Componentes baseados em Material Design com sintaxe direta. Não é uma estética IndieWeb por natureza, mas serve para ferramentas internas e páginas funcionais que depois receberão uma pele autoral.

65. Cirrus

Framework modular. Utilitários e componentes com documentação visual. Importe apenas módulos usados; empilhar o pacote inteiro com outras bibliotecas contraria a proposta de um site pessoal leve.

4. Animações e microinterações principalmente em CSS

66. Animate.css

Código. Coleção conhecida de animações por classes. Use uma compilação reduzida ou copie só os keyframes necessários; entradas em todos os blocos rapidamente ficam repetitivas.

67. Animista

Gerador. Permite ajustar duração, direção, easing e baixar apenas as animações CSS escolhidas. É uma das opções mais eficientes para criar movimento sem carregar biblioteca em produção.

68. Hover.css

Código. Efeitos de hover e foco para links, botões e imagens. Sempre preserve um estado de foco de teclado equivalente e não dependa de hover para revelar informação essencial.

69. Magic Animations

Código. Keyframes teatrais como puff, vanish e perspectiva. São bons para uma surpresa pontual; o repositório merece verificação de atividade e o efeito precisa de alternativa reduzida.

70. WickedCSS

Código. Animações CSS excêntricas e fáceis de aplicar. Use como biblioteca de estudo ou extraia uma classe, pois o projeto é pequeno e não substitui uma estratégia de movimento.

71. CSShake

Código. Variações de tremor em CSS. Adequado para erro, suspense ou microefeito lúdico, mas evite repetição contínua e respeite usuários sensíveis a movimento.

72. Hamburgers

Código. Muitas animações para ícones de menu, distribuídas em Sass e CSS. Escolha uma variante e compile só ela; o botão ainda precisa de rótulo acessível e estado aria-expanded.

73. SpinKit

Código. Loaders feitos apenas com CSS. Prefira indicadores discretos e associe-os a texto ou atributos ARIA para que espera não seja comunicada só visualmente.

74. Loaders.css

Código. Conjunto de indicadores CSS com demonstração clara. Extraia apenas o loader usado e mantenha a interface funcional caso a animação seja removida.

75. CSS Loaders

Código e gerador. Coleção de loaders modernos de Temani Afif, muitos com um único elemento. Excelente fonte para aprender gradientes, máscaras e propriedades customizadas.

76. Whirl

Código. Grande coleção de animações de carregamento em CSS. A variedade é útil para encontrar um motivo alinhado ao tema, mas copiar só uma receita evita uma folha desnecessária.

77. Motion UI

Código. Biblioteca Sass da Foundation para transições e animações de interface. Faz sentido quando você já usa Sass ou Foundation; para um único efeito, CSS nativo será mais simples.

78. AnimXYZ

Código composável. Utilitários para montar animações declarativas a partir de variáveis CSS, com integrações para frameworks. Bom para manter uma linguagem de movimento coerente entre muitos componentes.

79. Micron.js

Código CSS/JS. Microinterações acionadas por atributos no HTML. É prático para protótipos; verifique manutenção e acessibilidade antes de depender dele em navegação essencial.

80. Balloon.css

Código. Tooltips feitos em CSS e atributos aria-label. Use apenas para informação complementar, pois conteúdo crítico deve continuar visível e acessível por toque e teclado.

81. Hint.css

Código. Outra coleção modular de tooltips em CSS. Escolha entre ela e Balloon.css, nunca as duas; valide comportamento em telas touch.

82. transition.style

Gerador. Galeria de transições CSS copiáveis, baseada em propriedades customizadas. Excelente para overlays, cartões e estados de entrada/saída sem biblioteca JavaScript.

83. Cubic-Bezier.com

Gerador. Editor visual de curvas de easing. Crie duas ou três curvas como tokens do site para que todos os movimentos pareçam pertencer ao mesmo mundo.

84. Easing Wizard

Gerador. Ferramenta de Adam Argyle para criar easings CSS expressivos, incluindo curvas e springs representáveis na plataforma. Use com parcimônia e teste a sensação em dispositivos reais.

85. Keyframes.app

Gerador. Editores visuais para animações, sombras e cores em CSS. É útil para desenhar o movimento e exportar a base, que depois deve ser limpa e incorporada aos seus tokens.

5. Fundos, padrões, formas, cores e layout gerados

86. Haikei

Gerador SVG. Cria ondas, blobs, pilhas, grades, manchas e cenas abstratas exportáveis como SVG ou PNG. O SVG pode ser editado, comprimido e hospedado localmente; confira os termos para o uso pretendido.

87. BGJar

Gerador SVG. Produz fundos como circuitos, meteoros, polígonos e padrões geométricos com cores ajustáveis. Exporte o SVG e remova metadados ou elementos invisíveis antes de publicar.

88. SVG Backgrounds

Gerador e catálogo. Oferece fundos vetoriais personalizáveis, alguns gratuitos e outros ligados a planos pagos. É especialmente útil para hero, cartões e separadores sem carregar fotografias grandes.

89. Hero Patterns

Gerador CSS/SVG. Padrões repetíveis em SVG codificados como background-image. Ajuste contraste e opacidade para que a textura não dispute com o texto.

90. Pattern Monster

Gerador SVG. Biblioteca de padrões personalizáveis e exportáveis. Bom para criar papéis de parede temáticos e pequenas faixas sem desenhar do zero.

91. PatternPad

Editor de padrões. Monta composições repetíveis a partir de formas e parâmetros. Exporte, simplifique o arquivo e documente a origem do asset no projeto.

92. MagicPattern CSS Backgrounds

Gerador CSS. Cria padrões com gradientes CSS, copiáveis sem imagem. Funciona bem para um fundo discreto e adapta cores por tema usando variáveis.

93. CSS Pattern

Receitas CSS. Coleção de padrões modernos de Temani Afif, com código e controles. Muitos exemplos exploram gradientes de forma engenhosa e dispensam assets externos.

94. Doodad Pattern Generator

Gerador. Editor visual de padrões SVG com formas, cores, rotação e escala. Útil para fabricar uma textura exclusiva em minutos e depois refiná-la manualmente.

95. Trianglify

Gerador JavaScript. Produz fundos triangulados determinísticos a partir de parâmetros e paletas. Gere no build ou congele uma saída SVG; não é preciso recalcular a cada visita.

96. Blobmaker

Gerador SVG. Cria formas orgânicas ajustando complexidade e contraste. Use blobs como máscaras, molduras ou manchas decorativas e não como substituto de hierarquia visual.

97. FrontendBaba Blob Generator

Gerador SVG. Alternativa para produzir formas orgânicas com complexidade, cor e gradiente ajustáveis. Copie o SVG, salve seus parâmetros e simplifique o markup antes de publicar.

98. Get Waves

Gerador SVG. Faz ondas simples para separar seções. Exporte o vetor em vez de uma captura e use currentColor ou variáveis para integrar o divisor ao tema.

99. Shape Divider

Gerador CSS/SVG. Monta divisores responsivos com ondas, curvas, setas e inclinações. Revise o posicionamento absoluto gerado para não cortar conteúdo em zoom alto.

100. Clippy

Gerador CSS. Editor visual de clip-path com polígonos e formas prontas. Excelente para recortes de fotos, selos e cartões, com fallback retangular natural.

101. Fancy Border Radius

Gerador CSS. Cria formas orgânicas explorando os oito valores de border-radius. Uma técnica extremamente leve para avatares, molduras e ilhas de conteúdo.

102. CSS Portal Generators

Coleção de geradores. Reúne ferramentas para sombras, bordas, filtros, triângulos, ribbons e outros detalhes. Use o resultado como rascunho e retire prefixos ou propriedades desnecessárias após conferir no MDN.

103. Neumorphism.io

Gerador CSS. Produz sombras e cores para relevo suave. A estética costuma gerar baixo contraste; use apenas em decoração ou controles que continuam claros sem a sombra.

104. Glassmorphism Generator

Gerador CSS. Ajusta transparência, blur, borda e fundo para cartões vítreos. backdrop-filter pode ser caro e precisa de fundo sólido/fallback com contraste adequado.

105. CSS Gradient

Gerador. Editor direto de gradientes lineares e radiais, com código CSS. Salve as cores em tokens e teste banding em telas diferentes.

106. Gradient.style

Catálogo e código. Coleção de gradientes complexos prontos para copiar, incluindo composições multicamadas. Trate as receitas como ponto de partida e altere paleta, direção e escala.

107. Gradient Hunt

Paletas e inspiração. Galeria de gradientes com valores copiáveis. Como a autoria das combinações pode variar, use para explorar cores e construa sua própria combinação final.

108. ColorSpace

Gerador de paleta. Cria gradientes e famílias de cores a partir de uma cor inicial. Depois valide contraste e converta cores de interface para espaços modernos quando fizer sentido.

109. OKLCH Color Picker

Ferramenta de cor. Editor para OKLCH, espaço que facilita variações perceptualmente consistentes. Use fallback se seu público inclui navegadores muito antigos e sempre avalie gamut/contraste.

110. Leonardo

Gerador de sistema de cores. Cria escalas adaptativas guiadas por relações de contraste. É ótimo para derivar temas claro/escuro que mantêm legibilidade sem perder a paleta autoral.

111. Accessible Palette

Gerador de paleta. Ajuda a criar escalas em que diferenças e contraste sejam previsíveis. Use como verificação, não como licença para comunicar estado apenas por cor.

112. Layoutit Grid

Gerador CSS Grid. Editor visual para linhas, colunas, gaps e áreas nomeadas. O código exportado é legível e funciona como ponto de partida para layouts editoriais assimétricos.

113. CSS Grid Generator

Gerador. Ferramenta simples para desenhar uma grade e copiar CSS. Útil para rascunhar homepages em mosaico sem aprender toda a sintaxe antes.

114. Grid Garden

Jogo educativo. Ensina CSS Grid por tarefas curtas. Não entrega um tema, mas dá autonomia para criar layouts que não parecem templates.

115. Flexbox Froggy

Jogo educativo. Ensina Flexbox visualmente. Dominar alinhamento e fluxo reduz a necessidade de frameworks só para posicionamento.

6. Tipografia, ícones e matéria-prima visual aberta

116. Fontsource

Fontes auto-hospedáveis. Empacota fontes open source para npm e download, com subsets e pesos. É uma ótima alternativa a chamar um serviço externo: hospede WOFF2 localmente e carregue só o necessário.

117. Google Fonts

Catálogo de fontes. Grande coleção com filtros e licenças indicadas por família. Baixar e auto-hospedar melhora controle e privacidade; confirme a licença no repositório da fonte.

118. Velvetyne Type Foundry

Fontes livres experimentais. Encontrará tipos expressivos, estranhos e ideais para títulos autorais. Cada família traz licença e arquivos; combine uma fonte excêntrica com uma fonte de leitura calma.

119. Collletttivo

Fontes abertas. Coletivo com famílias contemporâneas e visual marcante. Leia a licença específica e use os espécimes como estudo de direção tipográfica.

120. The League of Moveable Type

Fontes open source. Foundry histórica da tipografia aberta, com famílias bem documentadas. Boa fonte de tipos de texto e display que podem ser auto-hospedados.

121. Open Foundry

Catálogo de fontes abertas. Permite experimentar e descobrir famílias livres de diferentes autores. Verifique a licença no projeto de origem antes de redistribuir os arquivos.

122. Use & Modify

Catálogo curado. Seleciona fontes livres e aponta licença e fonte de download. É especialmente útil para fugir do conjunto mais repetido de fontes de interface.

123. Omnibus-Type

Foundry open source. Famílias variadas, incluindo tipos de display e leitura. Os repositórios facilitam auto-hospedagem e inspeção da licença.

124. Variable Fonts

Aprendizado e demonstrações. Guia de Mandy Michael para entender e explorar eixos variáveis. Use peso, largura ou inclinação com moderação e evite animar texto longo continuamente.

125. V-Fonts

Catálogo de fontes variáveis. Permite testar eixos no navegador e descobrir arquivos. A licença pertence a cada família; confirme antes de baixar ou servir.

126. Utopia

Gerador de tipografia e espaço fluidos. Produz escalas com clamp() que crescem entre telas sem dezenas de breakpoints. Excelente fundação para um layout expressivo que continua confortável no celular.

127. Type Scale

Gerador. Compara escalas modulares e gera valores CSS. Use a escala como limite: contraste de tamanho consistente deixa efeitos mais ousados parecerem intencionais.

128. Font Style Matcher

Ferramenta. Ajusta a fonte fallback para reduzir salto quando a webfont carrega. Útil para preservar layout e Core Web Vitals em sites tipograficamente ambiciosos.

129. Glyphhanger

Ferramenta de build. Descobre caracteres usados e cria subsets de fontes. Pode reduzir bastante arquivos, mas mantenha os glifos necessários para acentos, símbolos e conteúdo futuro.

130. Lucide

Ícones open source. Conjunto SVG consistente, utilizável como arquivos, sprite ou componentes. Prefira SVG inline ou um subset local em vez de carregar toda a coleção.

131. Tabler Icons

Ícones open source. Milhares de ícones em SVG com traço configurável. Baixe só os usados e ajuste stroke-width para combinar com sua tipografia.

132. Phosphor Icons

Ícones open source. Família flexível com vários pesos e estilos para o mesmo pictograma. Essa variação permite diferenciar navegação, ações e decoração sem misturar coleções.

133. Iconoir

Ícones open source. Coleção ampla de SVGs leves, também disponível em pacotes. O desenho menos onipresente ajuda a evitar a aparência de dashboard genérico.

134. Simple Icons

Logotipos SVG. Marcas de serviços e tecnologias com cores e slugs documentados. Use somente para referenciar a marca correspondente e siga suas diretrizes; a licença do projeto não substitui direitos marcários.

135. Remix Icon

Ícones open source. Conjunto com variantes lineares e preenchidas. É prático para ações de blog e mídia; gere um subset para evitar fontes de ícones gigantes.

136. Boxicons

Ícones open source. Biblioteca amigável com SVG, webfont e componentes. SVG local oferece melhor controle, acessibilidade e cache que a webfont completa.

137. Bootstrap Icons

Ícones open source. Coleção independente do framework Bootstrap, distribuída como SVG e sprite. Pode ser usada em qualquer site sem importar o CSS do Bootstrap.

138. Heroicons

Ícones open source. Conjunto SVG enxuto com estilos outline, solid e mini. Bom para interface funcional; personalize tamanho e cor, não redesenhe a marca do site ao redor deles.

139. OpenMoji

Emojis abertos. Conjunto colorido e preto e branco com arquivos SVG e licença aberta explícita. É excelente para selos, mapas e reações, desde que a atribuição exigida seja cumprida.

140. Twemoji

Emoji SVG. Continuação comunitária do conjunto Twemoji, com imagens vetoriais consistentes. Confira licença e atribuição, e hospede apenas os símbolos realmente usados.

7. Movimento, rolagem, texto e transições em JavaScript

141. GSAP

Motor de animação. Timelines, SVG, scroll, morph e controle fino para experiências complexas. É poderoso demais para um simples fade; consulte licença e termos atuais antes do projeto e carregue módulos sob demanda.

142. Motion

Motor de animação. Biblioteca moderna sobre APIs da plataforma, com versões para JavaScript e frameworks. A API pequena atende microinterações e layout animations sem obrigar uma aplicação inteira.

143. Anime.js

Motor de animação. Timelines, SVG, motion paths, transforms e valores JavaScript em uma API direta. A versão atual é modular; importe apenas os recursos necessários e respeite movimento reduzido.

144. Popmotion

Motor funcional. Primitivas de animação, springs, inertia e mixers. É mais uma caixa de peças que uma coleção de efeitos, adequada a uma interação realmente personalizada.

145. Velocity.js

Motor de animação. API de animação de DOM com longa história e sintaxe próxima de jQuery. Confira o repositório e a manutenção atual antes de escolher; projetos novos podem preferir WAAPI, Motion ou Anime.js.

146. mo.js

Motion graphics. Toolkit para bursts, formas, timelines e efeitos gráficos. Combina com botões, celebrações e pequenos “easter eggs”; o projeto teve períodos de menor atividade, portanto fixe uma versão.

147. KUTE.js

Motor modular. Tweens de CSS, SVG, texto, atributos e morph. Importe os componentes usados e teste morphs em diferentes navegadores.

148. Rekapi

Animação por keyframes. API para coordenar cenas canvas e DOM com timeline. É interessante quando o site precisa de uma sequência controlável, não apenas transições isoladas.

149. AOS

Animação ao rolar. Adiciona entradas via atributos e Intersection Observer. Use em poucos marcos, configure once quando adequado e desative sob prefers-reduced-motion.

150. ScrollReveal

Animação ao rolar. Biblioteca focada em revelar elementos com configuração simples. O uso comercial pode envolver condições específicas; confira a licença atual e garanta conteúdo visível sem JS.

151. AutoAnimate

Animação de layout. Uma linha de código suaviza inserção, remoção e reordenação dos filhos de um elemento. Ótimo para tags, filtros, galerias e listas de posts sem criar timelines manuais.

152. Swup

Transições entre páginas. Intercepta navegação e substitui conteúdo com hooks, cache e plugins. Preserve URLs, foco, histórico e fallback de navegação normal; para um efeito simples, considere a View Transitions API nativa.

153. Barba.js

Transições entre páginas. Oferece ciclo de vida para animar a saída e a entrada de documentos. É indicado para transições elaboradas; exige cuidado com scripts reinicializados, analytics, foco e memória.

154. Taxi.js

Navegação e transições. Biblioteca pequena para roteamento de páginas e animações customizadas. É uma opção menos conhecida, mas a arquitetura deve continuar funcional quando o script falha.

155. View Transitions API

API nativa. Permite transições entre estados e, em navegadores compatíveis, entre documentos do mesmo site. Ofereça fallback natural: sem suporte, a página apenas navega normalmente.

156. Lenis

Rolagem suavizada. Biblioteca da Darkroom Engineering para controlar sensação e sincronizar animações. Rolagem artificial é uma escolha forte: teste teclado, touch, âncoras e redução de movimento antes de manter.

157. Locomotive Scroll

Rolagem e observação. Popular em sites editoriais animados. Pode alterar comportamento esperado e a situação de versões mudou; verifique a documentação atual e só adote se a narrativa exigir.

158. Rellax

Parallax leve. Move camadas em velocidades diferentes durante a rolagem. Use amplitudes pequenas, desligue para movimento reduzido e não aplique em texto longo.

159. Parallax.js

Parallax por orientação/ponteiro. Cria profundidade em cenas com camadas. O efeito funciona bem em uma capa ou mascote; precisa de fallback estático e limites para não causar enjoo.

160. lax.js

Animação reativa à rolagem. Liga propriedades a scroll, mouse e outros drivers com presets ou fórmulas. Bom para experiências peculiares, mas exige orçamento de desempenho e alternativa reduzida.

161. Splitting.js

Segmentação de texto. Divide texto em palavras, caracteres, linhas ou células e expõe índices em CSS. Use em títulos curtos; preserve o texto acessível e não anime parágrafos inteiros.

162. SplitType

Segmentação de texto. Alternativa moderna para separar linhas, palavras e caracteres antes da animação. Recalcule em mudanças de layout e reverta a fragmentação quando não for mais necessária.

163. Typed.js

Efeito de digitação. Biblioteca conhecida para texto digitado e apagado. Reserve para um título ou terminal decorativo e ofereça o conteúdo completo a leitores de tela.

164. TypeIt

Efeito de digitação. API expressiva para sequências, pausas, HTML e controle. Há condições de licença conforme o uso; confirme antes de instalar e não esconda informação atrás da animação.

165. Rough Notation

Anotações animadas. Sublinha, circula, risca e destaca elementos com traço manual. Excelente para criar voz editorial em textos sem adotar uma estética inteira.

166. Atropos

Efeito 3D de cartão. Parallax e inclinação com camadas para mouse e touch. Use em um cartão especial ou capa e mantenha controles/links estáveis durante o movimento.

167. VanillaTilt.js

Inclinação 3D. Aplica tilt, glare e perspectiva a elementos sem framework. Desligue em dispositivos sem ponteiro fino e quando a preferência for reduzir movimento.

168. Shifty

Tweening. Pequena biblioteca de interpolação usada como base por outras ferramentas. É adequada para animar valores ou estados que CSS sozinho não representa bem.

169. Theatre.js

Direção visual de animação. Editor e biblioteca para coreografar cenas, propriedades e 3D com timeline. Muito mais pesado que uma transição CSS; reserve para uma cena central e carregue-a sob demanda.

170. Lottie Web

Animação vetorial. Renderiza arquivos Lottie exportados de ferramentas de motion. Otimize o JSON, verifique direitos do asset e não use uma animação pesada onde SVG/CSS simples bastaria.

8. Canvas, WebGL, física e arte generativa

171. p5.js

Creative coding. Biblioteca acessível para desenho, animação, interação, imagem e som no canvas. É a melhor primeira escolha para um iniciante criar uma constelação, jardim procedural, mascote ou visualização realmente própria.

172. Three.js

3D e WebGL/WebGPU. Ecossistema completo para cenas, materiais, câmeras, modelos e shaders. O potencial é enorme, assim como o peso e a complexidade; carregue a cena apenas quando necessária e ofereça imagem fallback.

173. PixiJS

Renderizador 2D. Motor acelerado para sprites, filtros, partículas e interfaces ricas. Excelente para uma sala virtual ou mapa interativo, mas exagerado para um pequeno ornamento.

174. Paper.js

Gráficos vetoriais. Trabalha com paths, curvas, operações booleanas e interação no canvas. Muito bom para desenho procedural, letras distorcidas e ilustrações que respondem ao ponteiro.

175. Two.js

Desenho 2D. API de formas e animação capaz de renderizar em SVG, Canvas ou WebGL. Permite prototipar gráficos simples sem escolher uma implementação de renderização cedo demais.

176. Zdog

Pseudo-3D. Motor pequeno para formas arredondadas e ilustrações “flat” em 3D. A estética própria combina com mascotes e objetos giratórios; não é um motor 3D geral.

177. Rough.js

Desenho manual. Renderiza linhas, polígonos e preenchimentos com aparência desenhada à mão em Canvas ou SVG. É uma maneira ótima de unificar gráficos, mapas e bordas em uma linguagem autoral.

178. Pts.js

Creative coding. Biblioteca compacta para visualização e arte generativa baseada em pontos, formas e espaço. A documentação visual facilita adaptar exemplos em vez de começar com canvas cru.

179. OGL

WebGL minimalista. Biblioteca pequena e explícita para quem quer shaders e 3D sem a abrangência do Three.js. Exige mais conhecimento gráfico, mas mantém o pacote e as abstrações sob controle.

180. regl

WebGL funcional. Simplifica comandos, buffers e estado de WebGL de maneira declarativa. Excelente para arte generativa e visualização técnica; confira manutenção e compatibilidade do projeto antes de uma adoção longa.

181. TWGL.js

Auxiliares WebGL. Reduz o código repetitivo de shaders, buffers, texturas e uniforms sem esconder WebGL. Serve para aprender a plataforma enquanto ainda se constrói algo prático.

182. Babylon.js

Motor 3D. Plataforma robusta para cenas, materiais, física, áudio e XR. Só faz sentido para uma experiência central, como museu virtual; um blog não deveria pagar esse custo em todas as páginas.

183. PlayCanvas

Motor e editor 3D. Editor visual colaborativo e runtime web para experiências 3D. É útil para prototipar uma “sala” do site, mas avalie dependência do editor e forma de auto-hospedar a exportação.

184. Phaser

Motor de jogos 2D. Cenas, sprites, input, física e áudio para jogos de navegador. Use para um pequeno game ou exploração separada; não transforme a navegação principal em um jogo obrigatório.

185. tsParticles

Partículas. Motor configurável para pontos, links, confete, polígonos e interações. Importe o preset ou bundle mínimo, limite densidade no celular e desligue para movimento reduzido.

186. Vanta.js

Fundos animados. Efeitos WebGL prontos como ondas, névoa, rede e células. São visualmente fortes e dependem de Three.js em muitos casos; carregue só na capa e inclua fundo CSS estático.

187. Granim.js

Gradientes animados. Controla transições de gradiente em canvas, estados e máscaras de imagem. Uma alternativa focada quando animar background via CSS não entrega a composição desejada.

188. Matter.js

Física 2D. Corpos rígidos, colisões, gravidade e restrições em JavaScript. Permite criar objetos de navegação que caem, um mural magnético ou brinquedo escondido; mantenha uma interface convencional paralela.

189. Planck.js

Física 2D. Reimplementação JavaScript inspirada no Box2D, adequada a simulações mais estruturadas. Requer um renderizador separado e é mais técnica que Matter.js.

190. Rapier

Física WebAssembly. Motor 2D/3D escrito em Rust com bindings JavaScript. Ótimo para uma experiência física séria, mas o WASM e a complexidade não se justificam para decoração pequena.

191. Fabric.js

Canvas interativo. Modelo de objetos, seleção, transformação, texto e exportação. É indicado para um mural, criador de cartões, editor de colagem ou ferramenta que o visitante realmente manipula.

192. Konva

Canvas interativo. Cena em camadas, eventos, drag-and-drop, transforms e filtros. Boa base para mapas visuais e pinboards; considere a versão sem framework para um site simples.

193. Curtains.js

WebGL ligado ao DOM. Transforma imagens e vídeos HTML em planos WebGL para shaders e transições. É poderoso para galeria editorial, mas exige fallback e cuidado com GPU/memória.

194. canvas-sketch

Workflow de arte generativa. Ferramentas para sketches, exportação e animações em Canvas/WebGL. É mais adequado para gerar arte no desenvolvimento e exportar assets do que para obrigar todo visitante a renderizar.

195. Hydra

Sintetizador visual. Ambiente de live coding inspirado em síntese de vídeo analógica, executado no navegador. Use para produzir uma textura ou página experimental separada; flashes e movimento intenso exigem aviso e controles.

196. Shader Park

Creative coding 3D. Linguagem/ambiente para esculpir shaders com funções JavaScript. É uma entrada amigável em ray marching e formas vivas, mas o resultado requer GPU e fallback visual.

197. D3.js

Visualização orientada a dados. Primitivas para escalas, formas, hierarquias, transições e manipulação do DOM. Use para transformar arquivo, blogroll, tags ou linha do tempo em mapa explorável, sem sacrificar uma lista HTML equivalente.

198. c2.js

Creative coding. Biblioteca para geometria, física, evolução e visualização no canvas. Menos conhecida que p5.js e particularmente boa para padrões orgânicos e sistemas generativos.

199. lil-gui

Painel de parâmetros. Interface pequena para ajustar números, cores e opções em experiências visuais. Use o painel no modo laboratório ou desenvolvimento; visitantes comuns podem receber controles simplificados.

200. dat.GUI

Painel de parâmetros, legado. Projeto que popularizou controles rápidos para demos gráficas. Está arquivado; prefira lil-gui em código novo, mas estude exemplos antigos que ainda dependem dele.

9. Áudio, terminal, jogos e componentes lúdicos

201. Howler.js

Áudio web. API robusta para reprodução, sprites, volume e fallback. Ideal para jukebox ou efeitos opt-in; nunca inicie som automaticamente e forneça pausa/volume persistentes.

202. Tone.js

Síntese e música. Abstrações de instrumentos, efeitos, transporte e agendamento sobre Web Audio. Permite criar uma identidade sonora de verdade, mas precisa de gesto do usuário para iniciar áudio.

203. wavesurfer.js

Forma de onda e player. Renderiza waveform navegável e aceita plugins para regiões, timeline e espectrograma. Excelente para podcasts, gravações e diário sonoro.

204. Meyda

Análise de áudio. Extrai características como energia, espectro e centroid em tempo real. Pode dirigir cores ou formas a partir da música, desde que o processamento seja opcional e eficiente.

205. p5.sound

Extensão de áudio. Integra reprodução, análise e síntese ao ambiente p5.js. É o caminho mais simples para uma cena audiovisual quando p5 já é a biblioteca central.

206. Webamp

Player retrô. Reimplementa o Winamp 2 no navegador, com skins e playlists. É uma peça memorável para uma página musical; hospede arquivos legalmente e carregue o player apenas quando solicitado.

207. xterm.js

Terminal no navegador. Componente usado por consoles web reais, com addons e acessibilidade em evolução. Pode sustentar uma interface CLI lúdica, mas não use um terminal falso para esconder navegação básica.

208. AnsiUp

ANSI para HTML. Converte sequências de cor ANSI em HTML seguro. Bom para publicar logs, poesia em terminal ou arte textual; sanitize qualquer entrada não confiável e preserve uma versão em texto.

209. js-dos

Emulação DOS. Executa programas DOS no navegador via WebAssembly com API e componentes. Use somente software que você tem direito de distribuir e isole a experiência do conteúdo principal.

210. EmulatorJS

Frontend de emulação. Integra vários cores de emuladores em páginas web. A ferramenta não fornece licença para ROMs; é apropriada para homebrew, demos autorizadas e acervos próprios.

211. Ruffle

Emulador Flash. Reproduz muito conteúdo SWF com Rust/WebAssembly. Pode restaurar sua própria animação antiga ou conteúdo autorizado; compatibilidade varia e direitos continuam valendo.

212. littlefoot

Notas de rodapé interativas. Converte footnotes semânticas em popovers elegantes, mantendo os links originais. Perfeito para ensaios e zines que querem densidade sem mandar o leitor ao fim da página o tempo todo.

213. medium-zoom

Zoom de imagens. Biblioteca pequena e sem dependências para ampliar imagens. Funciona bem em diários visuais; preserve alt, dimensões e navegação por teclado.

214. PhotoSwipe

Galeria/lightbox. Visualizador moderno, responsivo e modular, com zoom e gestos. É a escolha forte para fotografia; forneça links reais para imagens e legendas fora do JavaScript.

215. GLightbox

Lightbox. Suporta imagens, vídeo e conteúdo inline com configuração direta. Mais simples que uma galeria completa; teste foco, fechamento por teclado e mídia externa.

10. Componentes IndieWeb, Web Components e controle de qualidade

216. webmention.js

Componente IndieWeb. Busca e renderiza Webmentions a partir de uma API, com templates customizáveis. Estilize reações e respostas como parte do site, mas escape/sanitize conteúdo recebido de terceiros.

217. Webmention.io

Backend de Webmention. Recebe menções para o seu domínio e expõe API que você pode renderizar com CSS/JS próprios. É serviço hospedado: documente a dependência e mantenha exportação ou estratégia de migração.

218. Bridgy

Ponte social. Publica ou devolve interações compatíveis para o site conforme os serviços suportados. A cobertura muda com APIs externas; confirme a situação atual e trate-o como complemento, não como banco principal.

219. microformat-node

Parser de microformats. Implementação JavaScript para extrair microformats2. Pode alimentar cartões de autor, leitores ou ferramentas do seu site; valide primeiro sua marcação em HTML.

220. Pagefind

Busca estática. Indexa o site no build e entrega busca no navegador com UI customizável. Excelente para jardim digital e arquivo; você controla aparência, idiomas e quais partes entram no índice.

221. tocbot

Sumário automático. Gera navegação a partir de headings, acompanha rolagem e aceita personalização. Mantenha hierarquia correta no documento: o script não conserta títulos mal estruturados.

222. Lit

Web Components. Biblioteca pequena para componentes nativos com templates reativos. É adequada a widgets reutilizáveis como player, guestbook ou mapa, sem converter todo o site em SPA.

223. Open Web Components

Guias e ferramentas. Recomendações de desenvolvimento, teste, acessibilidade e publicação de Web Components. Use para construir um componente autoral com ciclo de vida e integração bem resolvidos.

224. Shoelace

Web Components de interface. Componentes acessíveis e personalizáveis que funcionam em HTML ou frameworks; o projeto está relacionado à evolução para Web Awesome. Confira o estado e os termos atuais antes de escolher uma base de longo prazo.

225. Lighthouse

Auditoria. Mede desempenho, acessibilidade, boas práticas e SEO em cenários reproduzíveis. Use os resultados como sinais, não como pontuação decorativa, e teste também em dispositivo real.

226. axe-core

Teste de acessibilidade. Motor automatizado que encontra uma parte dos problemas WCAG em páginas renderizadas. Integre ao navegador ou aos testes, sabendo que revisão manual de teclado, leitura e movimento continua necessária.

227. Pa11y

Teste de acessibilidade. CLI e dashboard para verificações automatizadas repetíveis. É útil para impedir regressões enquanto o CSS experimental evolui.

228. WebPageTest

Teste de desempenho. Mede carregamento em locais, dispositivos e conexões diferentes, com waterfall e filme. Use para descobrir se fonte, shader, áudio ou script criativo está atrasando o conteúdo.

229. Squoosh

Otimização de imagens. Compara codecs, qualidade e redimensionamento localmente no navegador. Comprima ilustrações e texturas e mantenha o original fora do diretório publicado.

230. Bundlephobia

Análise de pacotes. Estima tamanho de download de pacotes npm e aponta dependências. Consulte antes de instalar uma biblioteca para um único efeito; confirme o resultado final no seu bundler.

O que realmente vale instalar primeiro

Se a ideia é começar sem se perder em 230 abas, esta é uma pilha pequena e forte:

Não instale GSAP, Three.js e um framework de componentes “porque talvez sejam úteis”. Adicione uma dependência quando existir uma cena definida que CSS/JS nativo não resolve de forma razoável.

Dez receitas de direção de arte para fugir do site com cara de IA

1. Observatório pessoal

• Fundo noturno em CSS com CSS Pattern.
• Constelação de tags desenhada em p5.js a partir de posts reais.
• Tipografia editorial auto-hospedada via Fontsource.
• Webmentions aparecem como pequenas estrelas, mas continuam em uma lista HTML.

O diferencial é os dados serem seus: constelações refletem categorias, datas e relações reais, não partículas aleatórias.

2. Arquivo botânico vivo

• Escala e cores com Open Props e Leonardo.
• Ramos, folhas e flores procedurais com Rough.js ou p5.js.
• Cada nova publicação faz a planta crescer de modo determinístico.
• prefers-reduced-motion mostra a ilustração final, sem crescimento animado.

3. Terminal poético

• Base de Terminal CSS, profundamente recolorida.
• Arte textual convertida com AnsiUp.
• Uma CLI opcional com xterm.js oferece comandos como help, now e random.
• Links e páginas continuam disponíveis em navegação HTML convencional.

4. Zine xerocada

• Bordas e traços de PaperCSS ou Rough.js.
• Fonte display de Velvetyne combinada a uma fonte de texto serena.
• Recortes com Clippy e texturas SVG locais.
• Destaques editoriais com Rough Notation, somente quando entram em foco.

5. Quarto de computador dos anos 1990

• Uma única “janela” especial em 98.css, não o site inteiro.
• Webamp como jukebox iniciada pelo visitante.
• Guestbook, webring e botões 88×31 como objetos do quarto.
• Conteúdo longo abre em páginas normais, legíveis e responsivas.

6. Museu de memórias

• Grade assimétrica criada no Layoutit Grid.
• Fotos com PhotoSwipe e legendas semânticas.
• Transições de sala com a View Transitions API.
• Linha do tempo e mapa em D3, sempre acompanhados por lista textual.

7. Rádio independente

• Player em Howler.js ou wavesurfer.js.
• Visual reativo opcional com Meyda e canvas.
• Capas comprimidas no Squoosh e episódios em feed RSS real.
• Nada toca antes do clique; volume e pausa são evidentes.

8. Mapa de uma cidade imaginária

• SVG ou Canvas desenhado com Paper.js ou Rough.js.
• Bairros representam assuntos e prédios representam páginas.
• Hover complementa, mas clique, foco e uma lista paralela garantem acesso.
• A posição vem de metadados reais, mantendo o mapa coerente ao crescer.

9. Gabinete de curiosidades

• Cartões têm molduras geradas por Fancy Border Radius e padrões discretos.
• Um objeto por visita recebe leve efeito de Atropos.
• Notas aparecem com littlefoot; imagens abrem em medium-zoom.
• Um botão “surpreenda-me” aponta para uma URL real de publicação aleatória.

10. Site mutável pelo tempo

• CSS custom properties mudam paleta conforme hora ou estação.
• Haikei fornece quatro fundos SVG estáticos, não um gerador rodando no cliente.
• p5.js entra apenas em datas especiais, carregado sob demanda.
• O tema escolhido pelo visitante prevalece e fica salvo localmente.

Um esqueleto seguro para movimento reduzido

Este padrão deve entrar cedo no projeto, não como correção no final:

:root {
  --motion-duration: 260ms;
  --motion-distance: 1rem;
}

.reveal {
  transition:
    opacity var(--motion-duration) ease,
    transform var(--motion-duration) ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 1ms;
    --motion-distance: 0;
  }

  html {
    scroll-behavior: auto;
  }

  .ambient-animation,
  canvas[aria-hidden="true"] {
    display: none;
  }
}

Não use a regra global * { animation: none !important; } sem avaliar consequências: algumas animações comunicam mudança de estado. A solução boa troca movimento espacial intenso por fade discreto ou atualização imediata.

Licença, privacidade e segurança

• Código público não é automaticamente livre. CodePen, galerias e sites pessoais podem permitir inspeção sem conceder redistribuição. Procure LICENSE no repositório.
• Fontes e ícones têm licenças próprias. Registre nome, autor, origem, versão e obrigação de atribuição em um arquivo de créditos.
• Prefira auto-hospedar. Fontes, CSS, JS, texturas e ícones locais reduzem terceiros, rastreamento, falhas e mudanças inesperadas.
• Não injete HTML de Webmentions diretamente. Conteúdo externo deve ser sanitizado; avatar e link remoto também merecem política de segurança e privacidade.
• Fixe versões. Não aponte produção para latest em CDN. Use lockfile, hashes de integridade quando apropriado e revisão consciente de atualizações.
• Cuidado com demos abandonadas. Código experimental antigo pode usar APIs obsoletas ou dependências vulneráveis. Extraia a ideia e reimplemente com a plataforma atual.
• Assets gerados também têm termos. Leia a licença do gerador e do pacote de formas/fontes usado por ele.

Desempenho e acessibilidade como direção de arte

Defina um orçamento antes de decorar. Uma meta inicial sensata para a página comum é manter o JavaScript autoral muito pequeno, limitar fontes a poucos arquivos WOFF2 e não carregar canvas/WebGL até ele ser necessário. A página especial pode ser maior, mas não deve contaminar artigos, notas e feeds.

Checklist de qualidade:

1. todo conteúdo e navegação essenciais funcionam com JavaScript bloqueado;
2. existe foco visível, ordem de tabulação lógica e link “pular para conteúdo”;
3. animações reagem a prefers-reduced-motion e nunca piscam de forma perigosa;
4. som começa somente por gesto e tem controles claros;
5. canvas decorativo usa aria-hidden="true"; visualização informativa tem alternativa textual;
6. imagens têm dimensões, alt adequado e formatos comprimidos;
7. fontes têm fallback parecido e font-display coerente;
8. scripts pesados são carregados por rota, interação ou visibilidade;
9. o site é testado a 200% de zoom e em cerca de 360–390 px de largura;
10. Lighthouse, axe e WebPageTest são repetidos depois de cada grande efeito.

Recomendações práticas

Primeira semana: identidade antes de código

1. escreva em uma frase o mundo do site, por exemplo: “um observatório caseiro que arquiva pensamentos como estrelas”;
2. escolha uma fonte de leitura, uma display e uma paleta com contraste verificado;
3. desenhe home, artigo, arquivo e página 404 em papel;
4. crie tudo primeiro com HTML semântico, CSS próprio e zero bibliotecas;
5. só então escolha um recurso que materialize a metáfora.

Segunda semana: uma assinatura visual

Construa um componente que ninguém obteria ao pedir “faça um blog bonito” a uma IA: uma planta gerada pelas suas tags, um mapa das leituras, um rádio com gravações próprias, um terminal com comandos pessoais ou uma constelação baseada nos links reais. Esse componente deve usar dados, texto, sons ou desenhos seus; a biblioteca é apenas o pincel.

Terceira semana: rede e detalhes

Adicione h-card, h-entry, feed, Webmentions, blogroll e webring. Dê a essas funções a mesma direção de arte do site: respostas podem ser cartões postais, o blogroll pode ser um mapa e o feed pode parecer uma transmissão. Forma criativa e interoperabilidade não são opostas.

Quarta semana: poda

Meça, navegue por teclado, simule movimento reduzido, desligue JS e teste num celular. Remova qualquer efeito que não comunique caráter, estado ou descoberta. Normalmente o site melhora mais ao cortar duas bibliotecas e aperfeiçoar um detalhe próprio.

Conclusão

Há recursos suficientes nesta lista para construir quase qualquer atmosfera, do zine analógico ao observatório 3D. O caminho mais forte, porém, não é somar ferramentas: é escolher uma metáfora ligada à sua vida, estruturar conteúdo com padrões IndieWeb e usar CSS/JavaScript para tornar essa história visível.

Comece por CSS nativo, tipografia e composição. Acrescente p5.js, Rough.js, Motion ou outra biblioteca apenas para uma ideia clara. Preserve URLs, semântica, desempenho, controle e acessibilidade. O resultado continuará criativo mesmo quando a novidade técnica envelhecer, porque a identidade estará nos seus dados, textos e escolhas, não num efeito copiado.

Fontes consultadas

• IndieWeb — Getting Started
• IndieWeb — princípios e comunidade
• 32-Bit Cafe — Resources List for the Personal Web
• MDN — CSS Guides
• MDN — View Transition API
• MDN — prefers-reduced-motion
• Open Props — documentação e exemplos
• Codrops — tutoriais e experimentos
• p5.js — documentação e biblioteca
• Three.js — documentação e exemplos
• Motion — documentação
• Anime.js — documentação
• GSAP — documentação
• Pagefind — documentação
• web.dev — Patterns
• W3C WAI — animações por interação, WCAG 2.2
• W3C WAI — contraste mínimo, WCAG 2.2
• Chrome for Developers — Lighthouse
• WebPageTest — repositório da documentação
• Deque — axe-core

Nota sobre atualidade

Pesquisa concluída em 31 de julho de 2026. Bibliotecas front-end, licenças, compatibilidade de navegadores, serviços hospedados e situação de manutenção mudam com frequência; confirme a documentação e o repositório oficiais antes de adotar qualquer dependência em produção.