Ambient Orb Field

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add the section to your <body>:

Code snippet omitted: it ships with the download.

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

The script finds every [data-orb-field], gives each [data-orb] inside it three drift loops and a depth-weighted pointer follow, and wires the press-and-hold focus rack.

Using It With Your Own Design

The effect asks for four things and ignores everything else.

1. A stacking context on the section. [data-orb-field] is position: relative, overflow: hidden and, critically, isolation: isolate. mix-blend-mode blends against the nearest stacking context, so without isolation: isolate the orbs blend with your whole page instead of this section's own background. This is the single most common way the effect "stops working" when it is dropped into a real layout.

2. Orbs as [data-orb] elements. Each one is positioned by four custom properties you set inline: --orb-x, --orb-y (the centre, as a percentage of the section), --orb-size (diameter, as a percentage of the section's width) and --orb-color. data-orb-depth is optional and only weights the drift distance and the pointer follow. Spread your depths out: orbs that all answer the pointer by the same amount read as one sliding picture rather than as separate planes. script.js never looks at a class name.

3. The .orb-scrim layer. It is a directional wash in the ground colour sitting between the orbs and the content. It is what keeps a white headline at AA contrast when a bright orb drifts under it. Delete it and the effect will eventually make some piece of your copy unreadable. Tune --field-scrim rather than removing it.

4. data-orb-content on the element you want the depth-of-field applied to. This is the copy that softens while the field is racked into focus. It is optional; leave it off and the content stays sharp throughout. Whatever carries it needs position: relative and a z-index above the scrim, which the supplied CSS does.

Room to move. The orbs travel a real distance under the pointer, so keep the important ones inset from the edges. The demo deliberately crops two edge orbs for scale, while the central orbs retain enough margin to stay visible throughout their travel.

Using it as a whole page's ground. Add data-orb-fixed to the field and put your entire page inside it. The orb layer and the scrim switch to position: fixed, so content scrolls over a stationary field instead of the field scrolling away with the first section. The demo does not need it because it is a single screen, but any page taller than the viewport will.

Everything else in style.css below the DEMO CONTENT comment is the demo's page styling and can be deleted.

Blur radius and orb size are one decision, not two. Past roughly 0.6 of an orb's diameter the blooms merge into a single continuous wash and the field stops reading as separate objects, which is the whole point of this effect over a gradient. The demo uses a 26px blur against orbs 24–40% wide, keeping every orb legible even before the focus rack. If you scale the orbs up, scale --orb-blur-rest with them.

Options

Set on [data-orb-field]:

Set on each [data-orb]:

Set on any button, anywhere on the page:

Both resolve to the field named by their aria-controls, or to every field if that attribute is absent.

How It Works

Each orb is one element with a radial-gradient core, a mix-blend-mode and filter: blur(var(--orb-blur)). Because the radius is a single custom property on the parent, one write re-blurs the whole field.

Ambient drift is three GSAP tweens per orb, on x, y and opacity, with durations chosen never to line up. Nothing in the idle loop touches the filter, so the expensive rasterisation happens once and the drift stays on the compositor.

The pointer follow runs through gsap.quickTo on xPercent/yPercent, which composes with the drift's x/y inside the same transform instead of fighting it. Travel is authored in pixels and converted per orb from its measured width, because the orbs are deliberately different sizes and a share of each orb's own width would leave the small ones looking stuck. Each orb's share of the full travel is set by its depth, and the follow is a 0.34s power2.out ease: quick enough that the field is clearly answering the pointer, slow enough that it arrives with weight rather than snapping to the cursor.

A press starts a GSAP timeline over a plain state object. Its onUpdate writes the blur radius, the saturation and the content's own blur back as custom properties; a parallel tween scales the orbs down as they sharpen, which is what a real lens does. The release leg overshoots past the resting blur and past scale 1 before relaxing, so the field blooms open instead of snapping shut.

Accessibility

• Reduced motion: no drift, no pointer follow and no opening rack. The field is a composed static backdrop, and the focus rack still works if a control is pressed, applied instantly rather than animated.
• No JavaScript: the pre-script paint is the resting field. Every orb, the scrim and all content are visible and readable with scripting off; nothing is hidden waiting for a class.
• Keyboard: [data-orb-focus] is a real <button> with a managed aria-pressed, giving keyboard users the same rack the pointer gets. A press that lands on a link, button or form control does not start a rack, so the gesture never competes with the controls sitting on the field. The orb layer and scrim are aria-hidden and pointer-events: none, so links and buttons inside the section keep their focus styles.
• Contrast: the scrim exists for this. Check your headline against the brightest point of your palette, not against the ground colour, and raise the scrim's alpha rather than dimming the orbs.
• Content blur: the depth-of-field softening of the copy is transient and only ever the visitor's own doing. Set data-orb-content-blur="0" if any of that copy is essential.

Performance Notes

• Large blur radii are expensive to rasterise, so the effect only animates the blur during a rack. Idle motion is transform and opacity, which stays on the compositor.
• Six orbs is a deliberate ceiling. Every additional orb is another large blurred layer to composite; twenty of them is a different, much slower effect.
• Mobile reduces both the resting blur and the focus blur while spreading the orbs wider, so the field reads the same at a fraction of the fill rate.
• The pointer follow is transform only. The blur radius never changes while an orb is moving, so the browser reuses one blurred texture per orb and the follow costs a composite, not a re-rasterise, however far the orbs travel.
• will-change: transform promotes the orbs once. Adding will-change: filter is tempting and usually makes it worse: it holds a full-size blurred texture per orb for the whole session.

Dependencies

Required:

• GSAP 3.12+

No plugins.