Orb Depth Field
Floating orbs whose size, blur, opacity and speed all derive from one depth value.
DOM + CSS0 deps1 file · 3 KB TSX
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
// ---------------------------------------------------------------
}Details
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.
