A crackling electric arc that trails the cursor
| Name | Type | Default | Description |
|---|---|---|---|
colors | [string, string] | ["#7B5CFF", "#FF9FFC"] | The arc colour and a second colour. On dark pages the arc colour becomes the violet haze and bloom, the core burns white-hot with a hint of the second colour, and forks and sparks take the second colour. |
backgroundColor | string | "transparent" | Background of the component. Leave it transparent to lay the arc over your own page. |
mode | "auto" | "glow" | "ink" | "auto" | Glow draws luminous, screen-blended light for dark pages. Ink draws crisp coloured filaments with a faint veil for light pages. Auto picks one from the background behind the component and follows theme changes. |
thickness | number | 1.5 | Width of each filament's hot core in pixels. Filaments swell and thin along their length around this value. |
glow | number | 1 | Strength of the haze and bloom around the arc, from 0 to 2. Ink mode keeps only a faint veil of it. |
intensity | number | 1 | Overall exposure of the light. Higher values push more of the arc toward white. |
length | number | 0.55 | Seconds the arc trails behind the cursor. When the pointer stops, the arc retracts into it and goes dark. |
bend | number | 10 | How far the filaments writhe away from the cursor path, in pixels. |
crackle | number | 1.5 | Amount of fine, fast crackle riding on the filaments, from 0 to 3. |
speed | number | 1 | How fast the filaments writhe and crackle. 0 freezes their shape. |
flicker | number | 0.5 | How much the arc's brightness flickers, from 0 to 1. Reduced-motion users get a steady arc. |
strands | number | 3 | Number of braided filaments, from 1 to 4. Extra strands are thinner and fade in and out along the arc. |
branches | number | 0.5 | How often short forks split off the arc, from 0 to 1. |
charge | number | 0.5 | Small sparks that crackle around the cursor tip, strongest while it rests. |
follow | number | 0.03 | Seconds the arc takes to catch up with the pointer. A little lag smooths the path. |
discharge | boolean | true | Clicking releases a burst of forked bolts from the pointer. Skipped for reduced-motion users. |
autoplay | boolean | true | Until the pointer arrives, and again after it leaves, an invisible cursor keeps the arc moving. |
autoplaySpeed | number | 1 | Speed of that invisible cursor. |
idleDelay | number | 1.5 | Seconds after the pointer leaves before the invisible cursor takes over again. |
interactive | boolean | true | Let the pointer and touch drive the arc. The component listens on the window, so content laid over it still works. |
paused | boolean | false | Freezes the arc. Reduced-motion users never get the invisible cursor. |
dpr | number | 2 | Maximum device pixel ratio for the canvas. |
ref | { discharge, clear } | — | Imperative controls: release a burst at a point (in pixels from the top-left corner), or clear the arc. |
children | ReactNode | — | Content rendered above the arc, such as a hero. |
className | string | — | Classes for the root element. It fills its parent, with a 320px minimum height. |
style | CSSProperties | — | Inline styles for the root element. |
colors[string, string]The arc colour and a second colour. On dark pages the arc colour becomes the violet haze and bloom, the core burns white-hot with a hint of the second colour, and forks and sparks take the second colour.
["#7B5CFF", "#FF9FFC"]backgroundColorstringBackground of the component. Leave it transparent to lay the arc over your own page.
"transparent"mode"auto" | "glow" | "ink"Glow draws luminous, screen-blended light for dark pages. Ink draws crisp coloured filaments with a faint veil for light pages. Auto picks one from the background behind the component and follows theme changes.
"auto"thicknessnumberWidth of each filament's hot core in pixels. Filaments swell and thin along their length around this value.
1.5glownumberStrength of the haze and bloom around the arc, from 0 to 2. Ink mode keeps only a faint veil of it.
1intensitynumberOverall exposure of the light. Higher values push more of the arc toward white.
1lengthnumberSeconds the arc trails behind the cursor. When the pointer stops, the arc retracts into it and goes dark.
0.55bendnumberHow far the filaments writhe away from the cursor path, in pixels.
10cracklenumberAmount of fine, fast crackle riding on the filaments, from 0 to 3.
1.5speednumberHow fast the filaments writhe and crackle. 0 freezes their shape.
1flickernumberHow much the arc's brightness flickers, from 0 to 1. Reduced-motion users get a steady arc.
0.5strandsnumberNumber of braided filaments, from 1 to 4. Extra strands are thinner and fade in and out along the arc.
3branchesnumberHow often short forks split off the arc, from 0 to 1.
0.5chargenumberSmall sparks that crackle around the cursor tip, strongest while it rests.
0.5follownumberSeconds the arc takes to catch up with the pointer. A little lag smooths the path.
0.03dischargebooleanClicking releases a burst of forked bolts from the pointer. Skipped for reduced-motion users.
trueautoplaybooleanUntil the pointer arrives, and again after it leaves, an invisible cursor keeps the arc moving.
trueautoplaySpeednumberSpeed of that invisible cursor.
1idleDelaynumberSeconds after the pointer leaves before the invisible cursor takes over again.
1.5interactivebooleanLet the pointer and touch drive the arc. The component listens on the window, so content laid over it still works.
truepausedbooleanFreezes the arc. Reduced-motion users never get the invisible cursor.
falsedprnumberMaximum device pixel ratio for the canvas.
2ref{ discharge, clear }Imperative controls: release a burst at a point (in pixels from the top-left corner), or clear the arc.
—childrenReactNodeContent rendered above the arc, such as a hero.
—classNamestringClasses for the root element. It fills its parent, with a 320px minimum height.
—styleCSSPropertiesInline styles for the root element.
—