# Piracema Centenas de setas finas voam juntas como um bando de pássaros e se espalham quando o cursor chega perto. > Piracema é um componente exclusivo do THM Componentes que simula uma revoada: 260 setas voam em bandos, mantêm distância, se alinham e se agrupam sozinhas, como pássaros. O cursor pode espantar o bando ou fazer as setas girarem em volta dele. Em Canvas 2D, dá vida a páginas de dados, logística e cultura de equipe. - Categoria: Fundos e atmosferas - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Canvas 2D - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/piracema/ ## 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 revoada, flocking simulation, simulação de bando, cardume animado, swarm animation, flock background, bando de pássaros animado ## 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 ```text 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 Piracema ### Piracema deixa o site lento? Em geral, não. Piracema 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. O componente limita a densidade de pixels a 2 e pausa fora da tela. No THM Componentes, o efeito é Médio; se o celular sofrer, reduza a quantidade de setas pela prop count. ### Dá para mudar a reação de Piracema ao mouse? Sim, pela prop mode. No modo predador, que é o padrão, Piracema 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. ### Piracema respeita quem prefere menos movimento? Sim. Com a preferência de menos movimento ativada, Piracema 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. ## Componentes relacionados - [Correnteza](https://vibecode.thmtecnologia.com/componentes/correnteza/): Milhares de linhas finas correm em correntes curvas, como fios de seda ao vento, sobre um fundo claro. - [Réstia](https://vibecode.thmtecnologia.com/componentes/restia/): Pontinhos que flutuam devagar pelo fundo e deslizam de leve na direção do mouse, como poeira no ar. - [Vaga-lume](https://vibecode.thmtecnologia.com/componentes/vaga-lume/): Centenas de pontinhos neon em azul, violeta e magenta fluindo em correntes curvas sobre um fundo escuro. - [Limalha](https://vibecode.thmtecnologia.com/componentes/limalha/): Centenas de milhares de grãos finos correm em filamentos, como tinta no papel, e giram em volta do cursor. - [Amarelinha](https://vibecode.thmtecnologia.com/componentes/amarelinha/): Grade de linhas finas em que cada quadrado acende quando o mouse passa e se apaga devagar, deixando um rastro. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.