O Swarm Rebuild extensão Chrome faz algo que parece impossível com código puro: você pressiona Alt+Shift+S em qualquer página, a tela escurece e um enxame de cursores animados começa a reconstruir o site do zero, bloco a bloco, letra a letra, linha a linha. Sem servidores externos. Sem API de IA. Sem uma única dependência além do próprio navegador.
O projeto de Dhvanil Patel tem 588 estrelas no GitHub menos de três semanas depois da publicação. Não é hype: a engenharia por baixo é elegante, o resultado visual é hipnótico e o código cabe num único arquivo de script sem nenhuma biblioteca externa.
Como o Swarm Rebuild extensão Chrome reconstrói qualquer site
Antes de qualquer animação, a extensão varre o DOM da página, incluindo shadow roots abertas. Cada elemento entra numa categoria: caixas com preenchimentos, bordas, raios, sombras e gradientes viram rects; blocos de texto são clonados com todos os estilos computados, fontes, links, código inline e pseudo-elementos; bordas de um único lado e marcadores horizontais viram traços de caneta; imagens, SVGs, vídeos e canvases viram mídia; elementos repetidos como links de navegação, cards e linhas de lista geram um mestre e cópias.
Esse mapa vira um blueprint. A extensão então cobre a página com uma camada isolada em shadow root, sem herdar nenhum CSS do site, e passa o controle para os cursores.
Cada cursor executa uma tarefa distinta. Um arrasta caixas com crosshair mostrando dimensões em tempo real. Outro digita texto com cursor I-beam e caret piscante, com títulos grandes começando em 18px e crescendo passo a passo. Um terceiro usa ferramenta caneta para traçar linhas com pontos de ancoragem. Outros puxam guias de régua no estilo Figma. Os filhos de um elemento esperam o pai terminar; as duplicatas esperam o mestre.
A física de bando é o que faz tudo parecer vivo. Os cursores orbitam o favicon durante a intro, se alinham, desviam do mouse do usuário e se agrupam sobre o cursor do visitante quando a página fica pronta. Quanto mais rápido o scroll, mais agentes entram para acompanhar.
Por que isso importa para o seu negócio
Numa apresentação a um cliente, numa demo de produto ou num vídeo de portfólio, a primeira impressão decide o interesse. Uma ferramenta que transforma o próprio site do cliente num espetáculo interativo tem um peso desproporcional ao esforço de instalação.
O Swarm Rebuild extensão Chrome é gratuito, precisa de apenas duas permissões no Chrome (activeTab e scripting) e instala em menos de dois minutos: clone o repositório, abra chrome://extensions, ative o modo de desenvolvedor, clique em "Carregar sem compactação" e escolha a pasta swarm-rebuild/. Funciona em qualquer site, incluindo o seu.
O projeto é uma homenagem ao Swarm original de Joel Califa, um site de design interativo que se construía enquanto o visitante scrollava. Patel pegou esse sistema de física de bando e apontou para qualquer página, o que exigiu construir do zero o mecanismo de snapshot do DOM vivo em tempo real. Para instalar enquanto a extensão não chega à Chrome Web Store, siga as instruções do repositório no GitHub.
Veja também como truques na URL do GitHub ajudam a explorar projetos como este, e o que extensões do Chrome que agem em sites significam para produtividade.
Sons sem arquivo de áudio
O sistema de som é inteiramente sintetizado com a Web Audio API. Zero arquivos de áudio. Cada ação tem sua assinatura sonora: o teclado mecânico para digitação, cliques de botão do mouse para interações, estalo de régua para guias, notas de piano de vidro em Mi maior pentatônico para caixas e imagens.
As notas musicais têm regras precisas: seções grandes tocam grave, elementos pequenos tocam agudo, o pitch sobe da esquerda para a direita e cada som é paneado na posição horizontal do cursor que o criou. Quando a página fica pronta, um acorde suave de Mi maior. Quando o usuário sai, um sweep descendente.
O Swarm Rebuild extensão Chrome ainda tem modo Tour, que faz scroll automático no ritmo que o enxame consegue acompanhar, e controles de velocidade em 1x, 2x e 3x. Páginas muito longas ficam limitadas a cerca de 4.000 camadas e 40.000 pixels de altura.
Conteúdo reescrito e traduzido para PT pela redação luiscortex, revisado por humano.
Fonte: github.com
