Como ele é
Parece um bando de andorinhas visto de cima, desenhado a traço fino. Sobre um fundo quase branco, centenas de pequenas setas abertas, a maioria azul-marinho, algumas índigo e poucas ciano, voam em grupos que se formam, se dividem e voltam a se juntar, com um rastro curto atrás. Elas desviam antes de bater nas bordas e estão sempre em movimento. Quando o cursor se aproxima, o bando se espalha como peixes diante de um predador; no modo atrator, as setas giram em volta do ponteiro, num redemoinho. Um pequeno anel marca o cursor. Fundo e cores são props, e o conteúdo fica por cima.
Você pode estar procurando isto se pediu algo assim
- um fundo com vários passarinhos voando juntos que fogem do mouse
- setinhas se mexendo em grupo como um cardume de peixes
- animação de bando que se organiza sozinho para página de logística
- fundo claro e minimalista com movimento coletivo, nada de neon
- algo que mostre inteligência coletiva de um jeito visual
- efeito de revoada que gira em volta do cursor
- fundo vivo para a seção sobre a equipe trabalhando junta
Também chamado de
- boids
- revoada
- flocking simulation
- simulação de bando
- cardume animado
- swarm animation
- flock background
Quando usar
- Páginas sobre inteligência coletiva, IA distribuída ou análise de dados
- Sites de logística, frota ou rotas que querem sugerir fluxo coordenado
- Seção de cultura de equipe ou de comunidade
- Hero claro e minimalista que precisa de vida sem cores fortes
Quando evitar
- Áreas de leitura longa, porque o movimento constante puxa o olhar
- Público quase só de celular, já que a reação ao cursor depende de mouse
Como pedir para a sua IA
Crie um fundo com simulação de boids em Canvas 2D na seção sobre a equipe: setas finas nas cores da minha marca voando em bando e fugindo do cursor, com pausa fora da tela, quadro estático para movimento reduzido e bom desempenho no celular.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Boids
O Boids deixa o site lento?
Em geral, não. O Boids usa Canvas 2D e uma grade espacial para consultar só os vizinhos próximos, o que mantém o custo baixo mesmo com centenas de setas. Ele limita a densidade de pixels a 2 e pausa fora da tela. No THM Componentes é Médio; se o celular sofrer, reduza a quantidade de setas pela prop count.
Dá para mudar a reação do Boids ao mouse?
Sim, pela prop mode. No modo predador, que é o padrão, o Boids espalha as setas que estão a menos de 150 pixels do cursor. No modo atrator, elas giram em volta do ponteiro, como um redemoinho. No modo nenhum, o cursor é ignorado e a revoada segue sozinha.
O Boids respeita quem prefere menos movimento?
Sim. Com a preferência de menos movimento ativada, o Boids simula alguns segundos em silêncio e mostra um quadro estático com os bandos já formados, sem animação e sem reação ao cursor. Se você mudar as cores ou o tamanho das setas, o quadro parado é redesenhado.
