Concentric rings of color looping out from a center
| Name | Type | Default | Description |
|---|---|---|---|
colors | [string, string] | ["#5227FF", "#FF9FFC"] | Two colours the rings cycle between. They blend in OKLCh, so the mix stays vivid. |
backgroundColor | string | "transparent" | Colour behind the rings. Light backgrounds switch to saturated ink rings. Transparent reads the page colour. |
centerX | number | 0.5 | Horizontal position of the shared ring centre, from 0 (left) to 1 (right). |
centerY | number | 0.5 | Vertical position of the shared ring centre, from 0 (bottom) to 1 (top). |
speed | number | 1 | How fast the rings travel outward. |
ringCount | number | 7 | Rings between the centre and the far corner of a centred frame. |
ringWidth | number | 0.85 | Length of the soft body trailing behind each crest, as a share of the gap. |
glow | number | 1 | Brightness of the soft body behind each crest line. |
interference | number | 0.3 | Fine fringes where a click ring overlaps the loops as it passes through. |
depth | number | 0.6 | How much rings dim, thin and gather as they near the edges. |
intensity | number | 0.5 | Overall brightness of the rings, from 0 to 1. |
hoverStrength | number | 1 | How much hovering brightens and quickens the loops. 0 turns it off. |
pulseStrength | number | 1 | Strength of the bright ring a click sends out from the centre. Clicks stack. |
opacity | number | 1 | Opacity of the rings. |
interactive | boolean | true | Enables the hover lift and click pulses. |
intro | boolean | true | Rings rush out of the centre on mount, then settle to their speed. |
paused | boolean | false | Freezes the rings. Reduced-motion users get a still frame. |
dpr | number | 2 | Maximum device pixel ratio for the canvas. |
ref | { pulse, replay } | - | pulse(strength?) sends a ring from the centre. replay() restarts the intro. |
className | string | - | Classes for the root, which fills its parent. |
style | CSSProperties | - | Inline styles for the root element. |
colors[string, string]Two colours the rings cycle between. They blend in OKLCh, so the mix stays vivid.
["#5227FF", "#FF9FFC"]backgroundColorstringColour behind the rings. Light backgrounds switch to saturated ink rings. Transparent reads the page colour.
"transparent"centerXnumberHorizontal position of the shared ring centre, from 0 (left) to 1 (right).
0.5centerYnumberVertical position of the shared ring centre, from 0 (bottom) to 1 (top).
0.5speednumberHow fast the rings travel outward.
1ringCountnumberRings between the centre and the far corner of a centred frame.
7ringWidthnumberLength of the soft body trailing behind each crest, as a share of the gap.
0.85glownumberBrightness of the soft body behind each crest line.
1interferencenumberFine fringes where a click ring overlaps the loops as it passes through.
0.3depthnumberHow much rings dim, thin and gather as they near the edges.
0.6intensitynumberOverall brightness of the rings, from 0 to 1.
0.5hoverStrengthnumberHow much hovering brightens and quickens the loops. 0 turns it off.
1pulseStrengthnumberStrength of the bright ring a click sends out from the centre. Clicks stack.
1opacitynumberOpacity of the rings.
1interactivebooleanEnables the hover lift and click pulses.
trueintrobooleanRings rush out of the centre on mount, then settle to their speed.
truepausedbooleanFreezes the rings. Reduced-motion users get a still frame.
falsedprnumberMaximum device pixel ratio for the canvas.
2ref{ pulse, replay }pulse(strength?) sends a ring from the centre. replay() restarts the intro.
-classNamestringClasses for the root, which fills its parent.
-styleCSSPropertiesInline styles for the root element.
-