# Float Any image or icon starts drifting slowly, rising, sinking and tilting a little, nonstop. > Float is a THM Componentes component that wraps any element and makes it float nonstop, as if in zero gravity: it rises, sinks, drifts sideways and tilts slightly on three axes, at different rhythms that avoid a mechanical back-and-forth. It suits bringing hero illustrations, icons and mockups to life. - Category: Special effects - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interaction: None: the effect runs on its own - URL: https://vibecode.thmtecnologia.com/en/components/float/ ## What it looks like Think of an astronaut drifting inside a space station, or a leaf on water. Whatever you put inside moves up to 10 pixels sideways and up to 30 pixels up and down and along the depth axis, while it tilts up to 15 degrees forward and sideways and turns up to 7.5 degrees in the plane. Each movement follows its own wave and pace, so the combination takes a long time to repeat and feels natural. The default pace is slow. The component changes no colors or background: it only moves what is inside, on every screen frame. ## You may be looking for this if you asked for something like - “an image floating in the air at the top of the site” - “an icon that keeps bobbing slowly” - “a zero gravity effect on my hero illustration” - “an app mockup that sways gently, like it is alive” - “add soft motion to the homepage illustration” - “a photo that rises and sinks by itself like it is on water” - “a floating animation for several icons at once” ## Also known as float animation, floating animation, zero gravity effect, levitating effect, bobbing animation, idle float ## When to use - The main illustration, mascot or icon of a hero - A phone or product mockup that should feel light - Decorative icons scattered around a headline - Badges, stickers or seals that need a touch of life ## When to avoid - Text, buttons and forms, which become hard to read and click while moving - Pages with many elements floating at once, which add load and distract ## How to ask your AI ```text Make the hero illustration float slowly, with gentle movement and rotation on three axes that does not feel mechanical. Use real time between frames so speed does not depend on the screen, pause when off screen and keep everything still for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Float ### Can I use several Float components on the same page? Yes. Float has a timeOffset prop that shifts the phase of the motion, so each element can float out of sync with the others, like real loose objects. Since every instance updates its position on each frame, use it in moderation and prefer a few large elements over many small ones. ### Does Float run faster on 120 Hz screens? It does. Float adds a fixed amount to its clock on every frame, without accounting for the real interval between frames, so on a 120 Hz screen the motion runs twice as fast as on a 60 Hz one. Ask your AI to use the elapsed time between frames, and the pace stays the same on any device. ### Does Float respect reduced motion settings? The original component always moves and does not read that preference. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion; with Float, that means stopping the per-frame updates and keeping the element at its resting position. ## Related components - [Parallax Float](https://vibecode.thmtecnologia.com/en/components/parallax-float/): Scattered photos and shapes that shift at different speeds as the mouse moves, creating depth. - [Floating Card](https://vibecode.thmtecnologia.com/en/components/floating-card/): A card that lifts, tilts in 3D and catches a glint of light that follows the cursor, over a deep shadow. - [Orbit](https://vibecode.thmtecnologia.com/en/components/orbit/): Icons or small elements circling around a center point, like planets around the sun. - [Morph Blob](https://vibecode.thmtecnologia.com/en/components/morph-blob/): A gradient blob whose outline changes slowly, as if breathing, and stretches toward the mouse. - [3D Card Effect](https://vibecode.thmtecnologia.com/en/components/3d-card/): A card that tilts with the mouse and lifts its image, title and buttons into layers of depth. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).