A hexagon grid lit by a soft light that follows the cursor
| Name | Type | Default | Description |
|---|---|---|---|
colors | string[] | ["#5227FF", "#FF9FFC"] | Two colours: edges as they cool, then the hot light where the pointer has just passed. |
backgroundColor | string | "#0a0a0a" | Colour behind the lattice. Light backgrounds switch to ink lines. Pass "transparent" to show the page. |
cellSize | number | 1.9 | Size of the hexagonal cells. 1 is 72px between cell centres. |
lineWidth | number | 0.5 | Width of the resting lattice lines, in pixels. |
litWidth | number | 1.8 | Width of an edge at full light, in pixels. |
lattice | number | 0.4 | Visibility of the resting lattice. 0 hides it, so only lit edges appear. |
glow | number | 1.5 | Strength of the glow around lit edges. |
glowRadius | number | 0.5 | How far the glow spreads from each lit edge. |
core | number | 0.4 | How close to white the hottest edges burn, from 0 to 1. |
vignette | number | 0 | Soft lift of the background towards the centre, from 0 to 1. |
grain | number | 1 | Fine film grain over the whole surface, from 0 to 1. |
trailLength | number | 3 | How long the afterglow lingers on the lattice where the light has passed. It fades faster at its edges, so it tapers as it goes. |
trailWidth | number | 1 | Size of the pool of light that follows the pointer, and of the afterglow it leaves. |
follow | number | 0.5 | Stiffness of the spring the light follows the pointer on. Lower values glide further behind and settle more softly. |
flow | number | 0.5 | Momentum carried by the afterglow: it keeps drifting in the direction of motion after the pointer slows, from 0 to 1. |
autoplay | boolean | true | While the pointer is away, the light wanders the lattice on its own along a smooth, meandering path, leaving its afterglow. When the pointer returns, the light glides over to it. |
shimmer | number | 1 | A slow band of light sweeping across the resting lattice. 0 disables it. |
speed | number | 1 | Pace of the idle animation: the wandering light and the shimmer. 0 holds them still. |
interactive | boolean | true | A soft light glides after the pointer on a damped spring. It glows brighter while moving and leaves a fading afterglow on the lattice. |
clickPulses | boolean | true | Each click sends sparks racing outward along every edge from the point you clicked. Rapid clicks stack. |
pulseSpeed | number | 1 | How fast the sparks travel. |
seed | number | 0 | Changes where the wandering light starts and the path it takes. |
paused | boolean | false | Freezes the idle animation, so the wandering light holds still. The pointer and clicks still work. |
dpr | number | 2 | Upper bound for the device pixel ratio. |
className | string | — | Classes for the root element. Give it a height. |
style | CSSProperties | — | Inline styles for the root element. |
children | ReactNode | — | Content layered above the lattice. |
colorsstring[]Two colours: edges as they cool, then the hot light where the pointer has just passed.
["#5227FF", "#FF9FFC"]backgroundColorstringColour behind the lattice. Light backgrounds switch to ink lines. Pass "transparent" to show the page.
"#0a0a0a"cellSizenumberSize of the hexagonal cells. 1 is 72px between cell centres.
1.9lineWidthnumberWidth of the resting lattice lines, in pixels.
0.5litWidthnumberWidth of an edge at full light, in pixels.
1.8latticenumberVisibility of the resting lattice. 0 hides it, so only lit edges appear.
0.4glownumberStrength of the glow around lit edges.
1.5glowRadiusnumberHow far the glow spreads from each lit edge.
0.5corenumberHow close to white the hottest edges burn, from 0 to 1.
0.4vignettenumberSoft lift of the background towards the centre, from 0 to 1.
0grainnumberFine film grain over the whole surface, from 0 to 1.
1trailLengthnumberHow long the afterglow lingers on the lattice where the light has passed. It fades faster at its edges, so it tapers as it goes.
3trailWidthnumberSize of the pool of light that follows the pointer, and of the afterglow it leaves.
1follownumberStiffness of the spring the light follows the pointer on. Lower values glide further behind and settle more softly.
0.5flownumberMomentum carried by the afterglow: it keeps drifting in the direction of motion after the pointer slows, from 0 to 1.
0.5autoplaybooleanWhile the pointer is away, the light wanders the lattice on its own along a smooth, meandering path, leaving its afterglow. When the pointer returns, the light glides over to it.
trueshimmernumberA slow band of light sweeping across the resting lattice. 0 disables it.
1speednumberPace of the idle animation: the wandering light and the shimmer. 0 holds them still.
1interactivebooleanA soft light glides after the pointer on a damped spring. It glows brighter while moving and leaves a fading afterglow on the lattice.
trueclickPulsesbooleanEach click sends sparks racing outward along every edge from the point you clicked. Rapid clicks stack.
truepulseSpeednumberHow fast the sparks travel.
1seednumberChanges where the wandering light starts and the path it takes.
0pausedbooleanFreezes the idle animation, so the wandering light holds still. The pointer and clicks still work.
falsedprnumberUpper bound for the device pixel ratio.
2classNamestringClasses for the root element. Give it a height.
—styleCSSPropertiesInline styles for the root element.
—childrenReactNodeContent layered above the lattice.
—