# Boia Qualquer imagem ou ícone passa a boiar devagar, subindo, descendo e girando de leve, sem parar. > Boia é um componente do THM Componentes que envolve qualquer elemento e o faz flutuar sem parar, como se estivesse em gravidade zero: ele sobe, desce, vai para os lados e gira de leve nos três eixos, em ritmos diferentes que evitam um vaivém mecânico. Serve para dar vida a ilustrações, ícones e mockups no hero. - Categoria: Efeitos especiais - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/boia/ ## Como ele é Pense num astronauta boiando dentro da estação espacial, ou numa folha sobre a água. O conteúdo que você coloca dentro se desloca até 10 pixels para os lados e até 30 pixels para cima e para baixo e no eixo de profundidade, e ao mesmo tempo inclina até 15 graus para a frente e para os lados e gira até 7,5 graus no plano. Cada movimento segue uma onda com ritmo próprio, então a combinação demora a se repetir e parece natural. O ritmo padrão é lento. O componente não muda cores nem fundo: só move o que está dentro, a cada quadro da tela. ## Você pode estar procurando isto se pediu algo assim - “imagem flutuando no ar no topo do site” - “ícone que fica boiando devagar sem parar” - “efeito de gravidade zero na ilustração do hero” - “mockup do app balançando de leve, como se estivesse vivo” - “deixar o desenho da página inicial com movimento suave” - “foto que sobe e desce sozinha como se estivesse na água” - “animação de flutuar para vários ícones ao mesmo tempo” ## Também chamado de efeito flutuante, float animation, floating animation, gravidade zero, levitação, levitating effect, animação de flutuar ## Quando usar - Ilustração, mascote ou ícone principal do hero - Mockup de celular ou de produto que precisa parecer leve - Ícones decorativos espalhados ao redor de um título - Selos, adesivos ou badges que pedem um toque de vida ## Quando evitar - Textos, botões e formulários, que ficam difíceis de ler e de clicar se mexendo - Páginas com muitos elementos flutuando ao mesmo tempo, que pesam e distraem ## Como pedir para a sua IA ```text Faça a ilustração do hero flutuar devagar, com leve deslocamento e giro nos três eixos, sem parecer mecânico. Use o tempo real entre quadros para a velocidade não depender da tela, pause fora da tela e deixe tudo parado para quem prefere movimento reduzido. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Boia ### Dá para usar Boia em vários elementos da mesma página? Dá. Boia tem a prop timeOffset, que desloca a fase do movimento, então cada elemento pode flutuar fora de sincronia com os outros, como objetos soltos de verdade. Como cada instância atualiza a posição a cada quadro, use com moderação e prefira poucos elementos grandes a muitos pequenos. ### Boia acelera em telas de 120 Hz? Acelera. Boia soma um valor fixo ao tempo a cada quadro, sem considerar o intervalo real entre eles, então numa tela de 120 Hz o movimento anda duas vezes mais rápido que numa de 60 Hz. Peça à IA para usar o tempo decorrido entre quadros, e o ritmo fica igual em qualquer aparelho. ### Boia respeita quem prefere menos movimento? O componente original se move sempre e não lê essa preferência. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema; em Boia, isso significa parar a atualização a cada quadro e manter o elemento na posição de repouso. ## Componentes relacionados - [Diorama](https://vibecode.thmtecnologia.com/componentes/diorama/): Fotos e elementos espalhados que se deslocam em velocidades diferentes conforme o mouse, criando profundidade. - [Convite](https://vibecode.thmtecnologia.com/componentes/convite/): Card que se ergue, inclina em 3D e ganha um reflexo de luz seguindo o cursor, sobre uma sombra profunda. - [Planetário](https://vibecode.thmtecnologia.com/componentes/planetario/): Ícones ou pequenos elementos que giram em círculos ao redor de um centro, como planetas em volta do Sol. - [Água-viva](https://vibecode.thmtecnologia.com/componentes/agua-viva/): Uma bolha em gradiente que muda de contorno devagar, como se respirasse, e se estica na direção do mouse. - [Camafeu](https://vibecode.thmtecnologia.com/componentes/camafeu/): Um cartão que inclina seguindo o mouse e faz imagem, título e botões saltarem em camadas de profundidade. --- 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.