Glowing fibers fanning out from a bright source
| Name | Type | Default | Description |
|---|---|---|---|
colors | [string, string] | ["#7B4DFF", "#FF7AD9"] | Colour of the light near the source and at the ends of the fibers, blended in OKLab. Where the fibers converge the light burns toward white. |
backgroundColor | string | "#0A0A0A" | Colour behind the fibers. |
mode | "auto" | "glow" | "ink" | "auto" | glow adds light for dark backgrounds, ink draws fine coloured strands for light ones. auto picks from the background brightness. |
fibers | number | 72 | Number of fibers in the bundle, from 8 to 320. |
lineWidth | number | 1.5 | Width of the fibers nearest the viewer, in pixels. |
sheath | number | 0.7 | Soft glow around each fiber, so it reads as a lit tube rather than a hairline. 0 draws bare hairlines. |
defocus | number | 0.8 | Depth of field: fibers on the far side of the bundle soften out of focus, from 0 to 2. |
length | number | 1.05 | Length of the bundle as a fraction of the height. |
spread | number | 1 | How far the fibers fan out at their ends, as a fraction of the height. |
neck | number | 0.035 | Width of the bundle where it enters, as a fraction of the height. |
flare | number | 1.3 | How the fan opens. 1 is a straight cone, higher values stay tight before flaring out like a trumpet. |
originX | number | 0.5 | Horizontal position of the source, from 0 (left) to 1 (right). |
originY | number | 0 | Vertical position of the source, from 0 (top edge) to 1 (bottom edge). |
angle | number | 0 | Direction the bundle hangs, in degrees. 0 falls straight down. |
twist | number | 0.35 | How much the fibers spiral around the bundle along their length. |
depth | number | 0.6 | How much fibers on the far side of the bundle dim and thin, from 0 (flat) to 1. |
spin | number | 0 | Speed at which the bundle turns around its axis, so fibers pass in front of each other. 0 keeps it still. |
sway | number | 1 | How far the bundle drifts from side to side, like a cable hanging in still air. |
breathe | number | 0.5 | Slow opening and closing of the fan. |
flowSpeed | number | 0.3 | Speed at which light travels down the fibers, in fiber lengths per second. Hover strokes and click bands travel with it. |
pulses | number | 1.3 | Strength of the pulses of light the source sends down the fibers, from 0 (a steady glow) to 2. |
pulseRate | number | 0.4 | Number of pulses entering the fibers per second. |
stagger | number | 0.4 | How far pulses are offset from fiber to fiber. 0 sends them down as clean bands, higher values scatter them. |
colorFlow | number | 0.08 | Speed at which the two colours rotate through the bundle. 0 keeps every fiber's colour fixed. |
reach | number | 0.85 | How far along the fibers the light travels before it dies out, as a fraction of their length. |
glow | number | 0.5 | Bloom around the bright source and the fibers, from 0 to 3. |
intensity | number | 1 | Overall exposure. |
speed | number | 1 | Overall animation speed. |
interactive | boolean | true | Respond to the pointer. |
hoverPulses | boolean | true | Every fiber the pointer crosses picks up a stroke of light that flows down it, like a plucked string. |
clickSurge | boolean | true | Clicking the fibers sends a band of light down from the click point. Clicking empty space sends a surge from the source. |
pulseStrength | number | 1 | Brightness of hover strokes, click bands and surges, from 0 to 3. |
hoverBoost | number | 1 | How much the light brightens and quickens while the pointer is over the component, from 0 to 2. |
paused | boolean | false | Freeze the motion. Pulses still run. Reduced-motion users always get a still frame. |
quality | number | 1 | Resolution scale from 0.25 to 1. Lower values are cheaper on large screens. |
ref | { surge } | — | surge() sends a surge of light through every fiber from code, 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 light near the source and at the ends of the fibers, blended in OKLab. Where the fibers converge the light burns toward white.
["#7B4DFF", "#FF7AD9"]backgroundColorstringColour behind the fibers.
"#0A0A0A"mode"auto" | "glow" | "ink"glow adds light for dark backgrounds, ink draws fine coloured strands for light ones. auto picks from the background brightness.
"auto"fibersnumberNumber of fibers in the bundle, from 8 to 320.
72lineWidthnumberWidth of the fibers nearest the viewer, in pixels.
1.5sheathnumberSoft glow around each fiber, so it reads as a lit tube rather than a hairline. 0 draws bare hairlines.
0.7defocusnumberDepth of field: fibers on the far side of the bundle soften out of focus, from 0 to 2.
0.8lengthnumberLength of the bundle as a fraction of the height.
1.05spreadnumberHow far the fibers fan out at their ends, as a fraction of the height.
1necknumberWidth of the bundle where it enters, as a fraction of the height.
0.035flarenumberHow the fan opens. 1 is a straight cone, higher values stay tight before flaring out like a trumpet.
1.3originXnumberHorizontal position of the source, from 0 (left) to 1 (right).
0.5originYnumberVertical position of the source, from 0 (top edge) to 1 (bottom edge).
0anglenumberDirection the bundle hangs, in degrees. 0 falls straight down.
0twistnumberHow much the fibers spiral around the bundle along their length.
0.35depthnumberHow much fibers on the far side of the bundle dim and thin, from 0 (flat) to 1.
0.6spinnumberSpeed at which the bundle turns around its axis, so fibers pass in front of each other. 0 keeps it still.
0swaynumberHow far the bundle drifts from side to side, like a cable hanging in still air.
1breathenumberSlow opening and closing of the fan.
0.5flowSpeednumberSpeed at which light travels down the fibers, in fiber lengths per second. Hover strokes and click bands travel with it.
0.3pulsesnumberStrength of the pulses of light the source sends down the fibers, from 0 (a steady glow) to 2.
1.3pulseRatenumberNumber of pulses entering the fibers per second.
0.4staggernumberHow far pulses are offset from fiber to fiber. 0 sends them down as clean bands, higher values scatter them.
0.4colorFlownumberSpeed at which the two colours rotate through the bundle. 0 keeps every fiber's colour fixed.
0.08reachnumberHow far along the fibers the light travels before it dies out, as a fraction of their length.
0.85glownumberBloom around the bright source and the fibers, from 0 to 3.
0.5intensitynumberOverall exposure.
1speednumberOverall animation speed.
1interactivebooleanRespond to the pointer.
truehoverPulsesbooleanEvery fiber the pointer crosses picks up a stroke of light that flows down it, like a plucked string.
trueclickSurgebooleanClicking the fibers sends a band of light down from the click point. Clicking empty space sends a surge from the source.
truepulseStrengthnumberBrightness of hover strokes, click bands and surges, from 0 to 3.
1hoverBoostnumberHow much the light brightens and quickens while the pointer is over the component, from 0 to 2.
1pausedbooleanFreeze the motion. Pulses still run. Reduced-motion users always get a still frame.
falsequalitynumberResolution scale from 0.25 to 1. Lower values are cheaper on large screens.
1ref{ surge }surge() sends a surge of light through every fiber from code, 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.
—