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
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.
