Skip to content

Particle Galaxy Field

A 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.

ProSpatial 3Dminimal

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.

Preview

Props

10
1
11
1
1
1
Camera drift
No runtime dependencies
"use client";

import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode } from "react";

/**
 * ParticleGalaxyField: a full-bleed background of a galaxy built from up to
 * ten million stars in WebGL2. Drag to turn it, sweep the pointer across the
 * disk to fling stars out of it, tap for a shockwave; a damped spring pulls
 * every star back to its orbit.
 *
 * Nothing is stored per star. Each one is computed on the GPU from its own
 * index (a hash gives its orbit, size, colour and whether it breathes), so
 * there are no vertex buffers, nothing to download and no start-up cost, and
 * the star count is a single number per draw. The field measures its own GPU
 * time for the first seconds and settles on the most stars the device holds
 * at full frame rate (ten million on a desktop graphics card, a few hundred
 * thousand on a phone); the faint haze shares a fixed amount of light, so a

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this background

A galaxy you can hold. Up to ten million stars, every one computed on the graphics card from its own index, so there is nothing to download and the count is just a number: the field times its own frames and settles on the most stars the device can carry at full frame rate. About 300,000 of them are lit globes that carry the picture, with a heavy tail of larger, brighter stars and a scatter of red embers that breathe on slow cycles of eight to sixteen seconds, each on its own. The rest is a fine haze that lays threads into the disk. The disk is a hollow ring with its brightest light on the inner edge, braided streamlines and darker lanes, turning once every three minutes. Drag to turn it from a grazing view to high above. Sweep across it and the stars you pass leave the disk; tap and a shockwave heaves them up. Each one falls back to its orbit on a spring.

Curator’s note

A standalone Spatial 3D background (3 Oct 2026). Pro: an attribute-less WebGL2 renderer (every star hashed from its vertex index, no buffers), density-wave orbits on braided threads, a GPU-timed star budget, HDR bloom and analytic spring impulses for the flings, with a CSS fallback.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Pro

The kit's aurora on its own, in WebGL: three curtains with bright borders, fraying rays and folds over a field of stars, bowing toward the pointer, for any dark section.

backgroundwebglshader
Trending
Pro

Ink Fluid Field

backgrounds

A 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.

backgroundwebglfluid
Pro

A WebGL dot matrix under one volumetric light cone that leans toward the pointer: dots inside the light rise in brightness and size and take on the accent.

backgroundwebglshader