Ambient Orb Field
Six luminous colour orbs stay distinct as they drift and lean with the pointer, then rack into crisp blend-mode discs when you press and hold.
About This Effect
A bold background field built from six ordinary elements, a CSS blur and a blend mode. Each orb answers the pointer by an amount set by its depth, so moving across the page slides the near planes further than the far ones and the flat wash resolves into a stack. The orbs also drift on three unrelated loops each, so the composition never visibly repeats.
Read the full effect overview
The whole field is a lens: press and hold and the blur racks down until the blooms become hard-edged discs with every blend intersection visible, while the copy in front softens the way a real focus pull trades one plane for another. A scrim layer keeps overlaid headlines and buttons at full contrast over the brightest part of the field, and one attribute swaps the same six orbs between a pale surface and a dark one.
What's Included
- Six large soft orbs from six plain elements, no canvas and no WebGL
- Depth-weighted pointer follow: near planes travel roughly twice as far as far ones, on a 0.34s weighted ease
- Press-and-hold focus rack: blur, saturation, orb scale and a depth-of-field softening of the overlaid copy on one input
- Blooming settle that overshoots past rest on both blur and scale before relaxing
- Three unrelated drift loops per orb so the field never visibly repeats
- Pale and dark surfaces from one attribute, swapping the blend mode between multiply and screen
- Contrast scrim layer that keeps overlaid headings and buttons readable over the brightest blooms
- Whole-page mode that pins the field to the viewport so content scrolls over a stationary ground
- Motion is transforms and opacity only, so the expensive blur is a static texture the compositor reuses
- Complete static composition without JavaScript and under reduced motion
Perfect For
- SaaS and product landing hero sections that need depth without a photograph
- Pricing, feature and sign-up bands that would otherwise read flat
- App marketing pages where the background must never compete with the copy
- Documentation and dashboard shells that want atmosphere behind a calm interface
- Any section that has to sit on both a dark and a pale ground
How It Works
Each orb is an absolutely positioned element carrying a radial-gradient core, a CSS blend mode and a blur filter whose radius is one custom property on the parent. Ambient drift is three GSAP tweens per orb on x, y and opacity with deliberately unrelated durations.
The pointer follow writes xPercent and yPercent through gsap.quickTo so it composes with the drift's x and y inside a single transform. Travel is authored in pixels and converted per orb from its measured width, and each orb's share is weighted by its depth attribute, which is what turns one pointer position into a stack of planes rather than one sliding picture.
A press starts a GSAP timeline that drives a plain state object through onUpdate, writing the blur radius, saturation and the overlaid content's own blur back as custom properties, while a parallel tween scales the orbs. Releasing runs the same timeline with a deliberate overshoot past rest on both channels so the field blooms open rather than snapping. The pre-script paint is the soft resting field, so the page is complete and readable with JavaScript disabled.