Wavy rings of fine dust drifting outward from a dark center
| Name | Type | Default | Description |
|---|---|---|---|
colors | [string, string] | ["#2f6fe0", "#b8f3ff"] | Colour of the outer rings and colour of the inner rings, blended in OKLab as rings travel. A few particles burn toward white as sparkles. |
backgroundColor | string | "#0a0a0a" | Colour behind the rings. |
mode | "auto" | "glow" | "ink" | "auto" | glow adds light for dark backgrounds, ink lays down tinted dust for light ones. auto picks from the background brightness. |
rings | number | 6 | Number of rings in the field at once, from 2 to 24. |
particles | number | 46000 | Total number of particles shared by all rings, from 2,000 to 200,000. Small frames and lower quality draw a share of them at matching brightness. |
thickness | number | 0.34 | Half-width of each ribbon as a fraction of the gap between rings. Ribbons show this width where they twist open. |
folds | number | 3 | How many times each ribbon twists open around its ring. Between the open sections it turns edge-on into a thin bright thread. |
fold | number | 0.9 | How far the open sections twist toward you, from 0 (always a thin thread) to 1 (fully open, translucent bands). |
dust | number | 0.14 | Share of particles that drift loose between the rings as a faint haze, from 0 to 1. |
innerRadius | number | 0.42 | Radius where rings appear, as a fraction of half the shorter side. Everything inside stays dark. |
outerRadius | number | 1.3 | Radius where rings dissolve, as a fraction of half the shorter side. |
flow | "outward" | "inward" | "outward" | Direction the rings travel. Rings fade in at one edge and fade out at the other. |
flowSpeed | number | 0.05 | Travel speed in rings per second. |
morph | number | 0.13 | How far each ring bends away from a circle, as a fraction of its radius. |
lobes | number | 3 | Number of broad lobes around each ring, from 0 to 12. |
turbulence | number | 0.45 | Amount of finer ripple on top of the lobes. |
morphSpeed | number | 0.1 | How quickly the ring shapes change. |
twist | number | 0.4 | How far each ring's lobes turn relative to the ring inside it, so the lobes line up along a spiral. Negative values wind the other way. |
rotation | number | 0.01 | Idle spin of the whole field in radians per second. Negative values turn clockwise. |
aspect | number | 1 | Horizontal stretch of the rings. Values above 1 give wide ellipses. |
tilt | number | 0 | Tilts the ring plane away from the viewer in degrees, from 0 (face-on) to 80, with perspective. |
centerX | number | 0 | Horizontal offset of the centre, from -1 (left edge) to 1 (right edge). |
centerY | number | 0 | Vertical offset of the centre, from -1 (top edge) to 1 (bottom edge). |
scale | number | 1 | Size of the whole field. |
particleSize | number | 1.3 | Particle size in CSS pixels. It stays the same on every screen density. |
sizeVariance | number | 0.5 | How much particle sizes vary, from 0 (all equal) to 1. |
sparkle | number | 0.05 | How many particles burn near-white as sparkles, from 0 to 1. |
prism | number | 0.04 | Share of particles tinted with a random hue, like specks of colour in the dust, from 0 to 0.5. |
twinkle | number | 0.3 | How much particles slowly shimmer, from 0 to 1. |
fade | number | 0.22 | Length of the fade at the inner and outer edges, as a fraction of the field. |
glow | number | 0.4 | Soft bloom around the dust, from 0 to 3. |
intensity | number | 1 | Overall exposure. |
grain | number | 0.3 | Fine film grain over the lit dust, from 0 to 1. |
interactive | boolean | true | Respond to the pointer. |
push | number | 1 | Moving the pointer through the field throws nearby particles along your path. They scatter, then drift back into their rings. 0 turns it off. |
pulse | number | 1 | Clicking sends a shockwave out from the pointer that pushes particles aside as it passes, then lets them settle. Each click fires its own wave. 0 turns it off. |
paused | boolean | false | Freeze the field. Reduced-motion users always get a still frame. |
quality | number | 1 | Resolution and particle scale from 0.25 to 1. Lower values are cheaper on large screens. |
ref | { pulse } | — | pulse() sends one shockwave from the centre, for example when a form is submitted. |
children | ReactNode | — | Content placed over the background. |
className | string | — | Classes for the root element. It fills its parent, with a 240px minimum height. |
style | CSSProperties | — | Inline styles for the root element. |
colors[string, string]Colour of the outer rings and colour of the inner rings, blended in OKLab as rings travel. A few particles burn toward white as sparkles.
["#2f6fe0", "#b8f3ff"]backgroundColorstringColour behind the rings.
"#0a0a0a"mode"auto" | "glow" | "ink"glow adds light for dark backgrounds, ink lays down tinted dust for light ones. auto picks from the background brightness.
"auto"ringsnumberNumber of rings in the field at once, from 2 to 24.
6particlesnumberTotal number of particles shared by all rings, from 2,000 to 200,000. Small frames and lower quality draw a share of them at matching brightness.
46000thicknessnumberHalf-width of each ribbon as a fraction of the gap between rings. Ribbons show this width where they twist open.
0.34foldsnumberHow many times each ribbon twists open around its ring. Between the open sections it turns edge-on into a thin bright thread.
3foldnumberHow far the open sections twist toward you, from 0 (always a thin thread) to 1 (fully open, translucent bands).
0.9dustnumberShare of particles that drift loose between the rings as a faint haze, from 0 to 1.
0.14innerRadiusnumberRadius where rings appear, as a fraction of half the shorter side. Everything inside stays dark.
0.42outerRadiusnumberRadius where rings dissolve, as a fraction of half the shorter side.
1.3flow"outward" | "inward"Direction the rings travel. Rings fade in at one edge and fade out at the other.
"outward"flowSpeednumberTravel speed in rings per second.
0.05morphnumberHow far each ring bends away from a circle, as a fraction of its radius.
0.13lobesnumberNumber of broad lobes around each ring, from 0 to 12.
3turbulencenumberAmount of finer ripple on top of the lobes.
0.45morphSpeednumberHow quickly the ring shapes change.
0.1twistnumberHow far each ring's lobes turn relative to the ring inside it, so the lobes line up along a spiral. Negative values wind the other way.
0.4rotationnumberIdle spin of the whole field in radians per second. Negative values turn clockwise.
0.01aspectnumberHorizontal stretch of the rings. Values above 1 give wide ellipses.
1tiltnumberTilts the ring plane away from the viewer in degrees, from 0 (face-on) to 80, with perspective.
0centerXnumberHorizontal offset of the centre, from -1 (left edge) to 1 (right edge).
0centerYnumberVertical offset of the centre, from -1 (top edge) to 1 (bottom edge).
0scalenumberSize of the whole field.
1particleSizenumberParticle size in CSS pixels. It stays the same on every screen density.
1.3sizeVariancenumberHow much particle sizes vary, from 0 (all equal) to 1.
0.5sparklenumberHow many particles burn near-white as sparkles, from 0 to 1.
0.05prismnumberShare of particles tinted with a random hue, like specks of colour in the dust, from 0 to 0.5.
0.04twinklenumberHow much particles slowly shimmer, from 0 to 1.
0.3fadenumberLength of the fade at the inner and outer edges, as a fraction of the field.
0.22glownumberSoft bloom around the dust, from 0 to 3.
0.4intensitynumberOverall exposure.
1grainnumberFine film grain over the lit dust, from 0 to 1.
0.3interactivebooleanRespond to the pointer.
truepushnumberMoving the pointer through the field throws nearby particles along your path. They scatter, then drift back into their rings. 0 turns it off.
1pulsenumberClicking sends a shockwave out from the pointer that pushes particles aside as it passes, then lets them settle. Each click fires its own wave. 0 turns it off.
1pausedbooleanFreeze the field. Reduced-motion users always get a still frame.
falsequalitynumberResolution and particle scale from 0.25 to 1. Lower values are cheaper on large screens.
1ref{ pulse }pulse() sends one shockwave from the centre, for example when a form is submitted.
—childrenReactNodeContent placed over the background.
—classNamestringClasses for the root element. It fills its parent, with a 240px minimum height.
—styleCSSPropertiesInline styles for the root element.
—