Star System Section
A 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.
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.
The system
Everything orbits
one core.
Hover a planet to read it, click to pin it. Drag to turn the system.
Components
Interactive parts you drop into a page and restyle in place.
Props
"use client";
import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode } from "react";
/**
* StarSystemSection: a page section where everything orbits one thing. A
* glass core with a light breathing inside it sits at the centre of a small
* star system; each of your items (features, integrations, services, people)
* is a planet on its own slightly inclined orbit, and every orbit is a faint
* braided lane of dust rather than a line. Hover, focus or tap a planet's
* label and it lights up: its lane turns the accent colour, its rim glows,
* the whole system slows down and a card beside it says what it is. Click or
* press Enter to pin it.
*
* Built in WebGL2 with the same engine as the library's particle galaxy:
* nothing is stored per star (each one is hashed from its vertex index), the
* dust shares a fixed amount of light whatever its count, and the field times
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this section
A section for the moment a page needs to say how things fit together. One glass core sits at the centre with a light breathing inside it; each of your items (features, integrations, services, people) is a planet on its own slightly tilted orbit, and every orbit is drawn as a faint, braided lane of star dust that brightens in the wake of its planet, with a belt of lit globes between the middle orbits and a sky behind. The planets turn slowly, at Kepler speeds, lit by the core so their day sides face it. Each one carries a real label: hover it, focus it or hover the planet itself and the planet brightens, its lane turns the accent colour, the whole system slows almost to a stop and a card beside it says what it is; click or press Enter to pin it, and the arrow keys walk the items. Labels behind the core fade, labels that would collide are pushed apart, and the card picks the side where it covers least. Drag to turn the system, sweep across the lanes to fling the dust, tap empty space for a shockwave. Three cameras (tilt, low and grazing, almost top-down), a cube or gem core with an optional etched word, any accent. On phones the labels give way to a row of chips and a docked card.
Curator’s note
A standalone Spatial 3D section (8 Oct 2026), derived from the homepage galaxy. Pro: the galaxy's attribute-less star engine bent onto orbits (braided dust lanes with a wake behind each planet, a threaded belt, the sky shell), the hero's raymarched glass core as one configurable form, analytic planets lit by the core and depth-tested with the stars, a GPU-timed star budget, HDR bloom and spring flings; the labels are DOM buttons projected through the camera every frame, with collision, depth fading, card placement that avoids what it would cover, and a chip list on phones.
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.
Ringed Planet Field
backgroundsA 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.
Exploded View Section
sectionsThe product taken apart live in WebGL2: its parts separate on a spring and each carries a callout pinned to it by a leader line re-projected from the 3D scene every frame, so labels stay on their part as it turns.