# 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.
Canonical: https://gsapvault.com/effects/ambient-orb-field
Live demo: https://gsapvault.com/demos/ambient-orb-field/index.html
| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | ambient, blend-mode, filter, organic-motion, pointer-effects, progressive-enhancement |
| Uses Lenis | No |
## Overview
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.
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.
## Features
- 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
## Use Cases
- 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
## Vibe-Code Ready Setup
This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.
[How AI-assisted setup works](https://gsapvault.com/vibe-coding)
## 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.
## Integration Preview
How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.
### Quick Start
**1. Add to your HTML ``:**
```html
```
**2. Add the section to your ``:**
```html
Your headline
Your lede.
```
**3. Add before the closing `` tag:**
```html
```
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.
### Options
Set on `[data-orb-field]`:
| Attribute | Values | Default | Description |
|---|---:|---:|---|
| `data-orb-field` | marker | required | Identifies a field |
| `data-orb-ground` | `dark`, `light` | `dark` | Which surface the field sits on. Swaps the blend mode between `screen` and `multiply` along with the ground and ink colours |
| `data-orb-blur` | pixels | `--orb-blur-rest` | Resting blur radius. Defaults to the CSS value, so the viewport media queries stay the single source |
| `data-orb-focus-blur` | pixels | `--orb-blur-focus` | Blur radius at full focus |
| `data-orb-content-blur` | pixels | `1.5` | How far the `[data-orb-content]` copy softens while focused. `0` disables it |
| `data-orb-drift` | `0`–`3` | `1` | Multiplier on how far the orbs travel. `0` freezes them |
| `data-orb-parallax` | pixels | `220` | How far a nearest-plane orb travels across the full width of the field as the pointer crosses it. `0` disables the follow. Never applied on a coarse pointer or under reduced motion |
| `data-orb-fixed` | marker | off | Pins the orb layer and the scrim to the viewport so the field can be a whole page's ground |
| `data-orb-intro` | `false` | on | Set to `false` to skip the opening rack-out and start at rest |
Set on each `[data-orb]`:
| Attribute | Values | Default | Description |
|---|---:|---:|---|
| `data-orb-depth` | `0`–`1` | `0.5` | Weights drift distance and pointer travel. Higher travels further |
| `--orb-x`, `--orb-y` | percentage | required | Centre of the orb within the section |
| `--orb-size` | percentage | required | Diameter, as a percentage of the section's width |
| `--orb-color` | colour | required | The orb's core colour |
Set on any button, anywhere on the page:
| Attribute | Values | Description |
|---|---:|---|
| `data-orb-focus` | marker | Toggles the focus rack and latches it. `aria-pressed` is managed for you |
| `data-orb-ground-control` | `dark`, `light` | Switches the surface. `aria-pressed` is managed for you |
Both resolve to the field named by their `aria-controls`, or to every field if that attribute is absent.
### 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 `