Laser beams radiating from a glowing core
| Name | Type | Default | Description |
|---|---|---|---|
colors | string[] | ["#5227FF", "#B84DFF", "#FF9FFC", "#FFE6FA"] | Up to four colours, from the glow around the beams to the hottest core of the junction. |
backgroundColor | string | "#05030c" | Colour behind the light. Pass "transparent" to composite over the page. |
blend | "add" | "ink" | "add" | "add" emits light on dark backgrounds, "ink" draws the beams on light ones. |
originX | number | 0.5 | Horizontal position of the junction, 0 left to 1 right. |
originY | number | 0.5 | Vertical position of the junction, 0 bottom to 1 top. |
rays | number | 22 | Number of beams leaving the junction, 1 to 40. |
rayWidth | number | 1 | Multiplier for the thickness of every beam. |
glow | number | 1 | Strength of the soft bloom around each beam. |
reach | number | 1 | How far the beams stay bright before fading, in frame heights. |
swing | number | 1 | How far the beams and the junction drift over time. 0 holds them still. |
pulse | number | 0.6 | Strength of the light pulses that travel out along the beams. |
flicker | number | 0.5 | How strongly the beams brighten and dim over time, 0 to 1. |
haze | number | 1 | Drifting atmosphere lit by the junction. |
core | number | 1 | Brightness of the junction and its halo. |
intensity | number | 1 | Overall brightness. |
speed | number | 1 | Animation speed. 0 holds the current frame. |
interactive | boolean | true | Beams flare brighter when the pointer touches or sweeps across them. |
cursorBoost | number | 1 | How brightly a touched beam flares. 0 disables it. |
cursorRadius | number | 0.05 | How close the pointer must come to a beam to light it up, as a fraction of the height. |
clickPulse | boolean | true | Sends a flash racing out along every beam on click. |
grain | number | 0 | Optional film grain. Gradients are already dithered, so 0 stays free of banding. |
seed | number | 0 | Changes the arrangement and timing of the beams. |
paused | boolean | false | Freezes the animation. |
dpr | number | 1.5 | 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 light. |
colorsstring[]Up to four colours, from the glow around the beams to the hottest core of the junction.
["#5227FF", "#B84DFF", "#FF9FFC", "#FFE6FA"]backgroundColorstringColour behind the light. Pass "transparent" to composite over the page.
"#05030c"blend"add" | "ink""add" emits light on dark backgrounds, "ink" draws the beams on light ones.
"add"originXnumberHorizontal position of the junction, 0 left to 1 right.
0.5originYnumberVertical position of the junction, 0 bottom to 1 top.
0.5raysnumberNumber of beams leaving the junction, 1 to 40.
22rayWidthnumberMultiplier for the thickness of every beam.
1glownumberStrength of the soft bloom around each beam.
1reachnumberHow far the beams stay bright before fading, in frame heights.
1swingnumberHow far the beams and the junction drift over time. 0 holds them still.
1pulsenumberStrength of the light pulses that travel out along the beams.
0.6flickernumberHow strongly the beams brighten and dim over time, 0 to 1.
0.5hazenumberDrifting atmosphere lit by the junction.
1corenumberBrightness of the junction and its halo.
1intensitynumberOverall brightness.
1speednumberAnimation speed. 0 holds the current frame.
1interactivebooleanBeams flare brighter when the pointer touches or sweeps across them.
truecursorBoostnumberHow brightly a touched beam flares. 0 disables it.
1cursorRadiusnumberHow close the pointer must come to a beam to light it up, as a fraction of the height.
0.05clickPulsebooleanSends a flash racing out along every beam on click.
truegrainnumberOptional film grain. Gradients are already dithered, so 0 stays free of banding.
0seednumberChanges the arrangement and timing of the beams.
0pausedbooleanFreezes the animation.
falsedprnumberUpper bound for the device pixel ratio.
1.5classNamestringClasses for the root element. Give it a height.
—styleCSSPropertiesInline styles for the root element.
—childrenReactNodeContent layered above the light.
—