Ringed Planet Field
A full-bleed WebGL2 gas giant hanging in black, wearing a ring system of up to ten million particles: a crisp terminator, an accent rim on the lit limb, the rings' shadow across the planet and the planet's shadow across the rings. Drag to orbit, sweep to fling ring particles out of the plane, tap the planet to send a ripple through the rings.
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";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode } from "react";
/**
* RingedPlanetField: a full-bleed background of a gas giant hanging in black,
* wearing a ring system of up to ten million particles in WebGL2. Drag to
* orbit it, sweep the pointer across the rings to fling particles out of the
* plane, tap the rings for a shockwave or the planet for a ripple that runs
* out through the whole system; a damped spring pulls every particle back.
*
* Nothing is stored per particle. Each one is computed on the GPU from its
* own index (a hash gives its ring, orbit, size and whether it glows), so
* there are no vertex buffers and the count is a single number per draw. The
* field times its own GPU frames and settles on the most particles the device
* holds at full frame rate; the fine haze shares a fixed amount of light, so
* a smaller count looks the same, only coarser.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this background
A ringed world you can hold. The planet is a perfect sphere found per pixel, banded from graphite to silver with slow turbulence that drifts at a different rate in every band, lit by one distant sun so a crisp terminator leaves the night side nearly black, with a thin atmospheric rim in your accent colour on the lit limb. Its rings are up to ten million particles, every one computed on the graphics card from its own index: a faint inner ring, a dense bright main ring of fine ringlets, a clean dark division, an outer ring with a narrow gap and a braided outer strand, the inner edge lapping the outer one on Kepler's law. The rings cast soft bands of shadow across the planet, the near arc passes in front of it, and the planet throws a dark wedge across the rings behind it. Two small moons ride inclined orbits. Three cameras: low across the ring plane, tilted with the rings open, and edge-on with the rings a knife line. Drag to orbit; sweep across the rings and the particles you pass leave the plane and spring back; tap the rings for a shockwave, or tap the planet and its rim flares while a ripple runs out through the whole system. The field times its own frames and settles on the most particles the device holds at full frame rate.
Curator’s note
A standalone Spatial 3D background (8 Oct 2026), built from the Particle Galaxy Field engine. Pro: attribute-less particles hashed from the vertex index and re-profiled as a planetary ring system on Kepler orbits, an analytic ray-sphere planet in the same HDR pass with ring shadows both ways, exact per-particle occlusion, a GPU-timed particle budget, half-res bloom and analytic spring impulses, with a CSS fallback.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Particle Galaxy Field
backgroundsA full-bleed WebGL2 galaxy of up to ten million stars: a hollow ring of lit globes, braided threads and slow-breathing embers that you turn by dragging, while a sweep of the pointer flings stars out of the disk and a spring pulls each one back to its orbit.
Star System Section
sectionsA WebGL2 page section where everything orbits one core: a glass core with a light breathing inside it, and each of your items a planet on its own orbit of braided star dust, with real, keyboard-reachable labels that light the planet, its lane and a detail card.
Ink Fluid Field
backgroundsA real Navier–Stokes fluid simulation on the GPU: your pointer drags luminous ink through dark water, and slow currents keep it alive when nobody is touching it.