Lines of light rising from a glowing horizon
| Name | Type | Default | Description |
|---|---|---|---|
colors | [string, string] | ["#8B5CF6", "#FF9FFC"] | Tail and haze colour, then line colour. Each line runs from a white-hot head through the line colour to the tail colour in OKLCh. |
backgroundColor | string | "transparent" | Fill behind the effect. Transparent shows the page. On a light background the lines are drawn as ink. |
density | number | 1 | How many lines rise from the horizon. |
speed | number | 0.6 | Speed of the lines and sparks. |
lineWidth | number | 1 | Line width in CSS pixels. |
lineLength | number | 1 | Length of the tapering tail behind each head. |
horizonHeight | number | -0.45 | Vertical position of the horizon. -0.65 sits on the bottom edge, higher values move it up. |
horizonGlow | number | 1 | Brightness of the horizon line and its glow. |
depth | number | 0.5 | Perspective. Distant lines start slightly above the horizon, thinner and dimmer, inside a soft haze. |
spread | number | 1 | Width of the visible field and of the horizon glow. |
updraft | number | 1 | Strength of the hover updraft. Lines and sparks under the pointer rise faster and denser. |
particles | number | 1 | Brightness of the fine rising sparks. 0 hides them. |
interactive | boolean | true | Hover to lift a column of lines. Click to launch a volley from the horizon. Volleys stack. |
intro | boolean | true | The horizon opens from the centre and the lines rise into view on mount. |
paused | boolean | false | Stops the motion. Reduced-motion users get a still frame. |
dpr | number | 2 | Maximum device pixel ratio for the canvas. |
ref | { launch, replay } | - | launch(x?, strength?) fires a volley at a 0 to 1 position. replay() restarts the intro. |
className | string | - | Classes for the root, which fills its positioned parent. |
style | CSSProperties | - | Inline styles for the root element. |
colors[string, string]Tail and haze colour, then line colour. Each line runs from a white-hot head through the line colour to the tail colour in OKLCh.
["#8B5CF6", "#FF9FFC"]backgroundColorstringFill behind the effect. Transparent shows the page. On a light background the lines are drawn as ink.
"transparent"densitynumberHow many lines rise from the horizon.
1speednumberSpeed of the lines and sparks.
0.6lineWidthnumberLine width in CSS pixels.
1lineLengthnumberLength of the tapering tail behind each head.
1horizonHeightnumberVertical position of the horizon. -0.65 sits on the bottom edge, higher values move it up.
-0.45horizonGlownumberBrightness of the horizon line and its glow.
1depthnumberPerspective. Distant lines start slightly above the horizon, thinner and dimmer, inside a soft haze.
0.5spreadnumberWidth of the visible field and of the horizon glow.
1updraftnumberStrength of the hover updraft. Lines and sparks under the pointer rise faster and denser.
1particlesnumberBrightness of the fine rising sparks. 0 hides them.
1interactivebooleanHover to lift a column of lines. Click to launch a volley from the horizon. Volleys stack.
trueintrobooleanThe horizon opens from the centre and the lines rise into view on mount.
truepausedbooleanStops the motion. Reduced-motion users get a still frame.
falsedprnumberMaximum device pixel ratio for the canvas.
2ref{ launch, replay }launch(x?, strength?) fires a volley at a 0 to 1 position. replay() restarts the intro.
-classNamestringClasses for the root, which fills its positioned parent.
-styleCSSPropertiesInline styles for the root element.
-