Orb Depth Field
Floating orbs whose size, blur, opacity and speed all derive from one depth value.
- Category
- Backgrounds
- Added
- 2026-09-20
- Deps
- none
- Updated
- 2026-09-20
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
"use client";
export function OrbDepthField({
count = 9,
depthRange = 1,
speed = 20,
tint = "#3d7bff",
}: {
count?: number;
/** 0-1. Compresses the depth spread; 0 flattens every orb to the front. */
depthRange?: number;
speed?: number;
tint?: string;
}) {
return (
<div className="relative h-full w-full overflow-hidden bg-[#07080b]">
<style>{
"@keyframes odf-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(var(--dx), var(--dy)); } }"
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this background
Floating-orb backgrounds are everywhere and most of them look like a scatter of circles rather than a space with depth. The reason is almost always that size, blur, opacity and drift speed were picked independently per orb. In a real scene those four are not independent — distance sets all of them at once, so something small must also be blurrier, fainter and slower. Deriving every one of them from a single depth value per orb enforces that relationship automatically, and the field starts reading as recession instead of decoration. Placement is the other half: golden-ratio stepping spreads the orbs without clumping and without `Math.random`, which matters because a random seed produces different positions on the server and client renders and is a genuine hydration mismatch. Negative animation delays start each orb mid-cycle so nothing is visibly synchronised on first paint, and a radial vignette completes the depth-of-field read. All CSS, only transform and filter, no JavaScript loop.
Curator’s note
Built for viberdy 2.1. One depth value driving four properties is the whole idea — it is what the flat versions of this get wrong.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Beam Sweep Backdrop
backgroundsSlow conic light beams rotating behind content, CSS-only and compositor-friendly.
Fractal Noise Drift
backgroundsGPU fractal noise drifting through a gradient light field, with no JS loop.
Aurora Gradient Field
backgroundsSoft, hue-shifting color fields that drift behind a hero like ambient aurora light.