Three material languages
Soft orbs, long capsules, and clipped crystals respond differently to color and depth.
Spatial & form
Floating Objects
Suspend a small collection of orbs, capsules, or crystalline forms in a responsive depth field.
Ambient form with a hard performance ceiling
Compose motion without opening a render loop.
Create hero accents, product atmospheres, empty states, and abstract brand worlds from simple CSS forms.
Eight-object limit
Every composition stays small, responsive, and easy to inspect.
No continuous JavaScript
The motion is pure CSS and reduced-motion safe.
Three-step workflow
How to use the Floating Objects studio
- Choose a mobile
Start with six distinct materials and densities.
- Balance suspension
Tune amplitude, scale, depth, softness, and pace.
- Export the objects
Copy the exact CSS field or save a page.
Questions, answered.
Are these 3D models?
No. They are lightweight CSS forms with depth cues.
Can I use transparent backgrounds?
Yes. Change the background variable or remove it in the exported CSS.
What is the element cap?
Eight floating objects.
Does the animation pause for reduced motion?
Yes. The objects hold a static composed frame.