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
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 Float
Dá para usar vários Float na mesma página?
Dá. O Float 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.
O Float fica mais rápido em telas de 120 Hz?
Fica. O Float 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.
O Float 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; no Float, isso significa parar a atualização a cada quadro e manter o elemento na posição de repouso.
