A headline that flickers on like a neon sign
| Name | Type | Default | Description |
|---|---|---|---|
text | string | "Open to possibility" | Text to display. Words wrap as whole units and whitespace is preserved. |
as | "span" | "div" | "p" | "h1" | … | "h6" | "span" | Element to render. The component inherits font, size and alignment from its parent. |
color | string | "currentColor" | Colour of a lit letter. Defaults to the surrounding text colour. |
glowColor | string | "#8B5CF6" | Colour of the halo around lit letters and of the flash when a letter strikes on. |
unlit | "outline" | "dim" | "none" | "outline" | How a letter looks before it lights: a hairline outline like an unlit tube, a faint ghost fill, or nothing at all. |
outlineWidth | number | 1 | Width of the unlit outline, in pixels. |
outlineOpacity | number | 0.28 | Opacity of the unlit outline or ghost fill, from 0 to 1. |
glow | number | 0.6 | Strength of the steady halo once a letter is lit. 0 turns it off. |
glowSize | number | 1 | Reach of the halo, relative to the font size. |
flash | number | 1 | Brightness of the brief flash each time a letter strikes on. |
flickers | number | 3 | Average number of false starts before a letter stays lit. 0 lights each letter cleanly. |
speed | number | 1 | Pace of every flicker. Higher values make the sign stutter faster. |
stagger | number | 0.045 | Seconds between one letter starting and the next. |
delay | number | 0.15 | Seconds to wait before the first letter starts. |
order | "random" | "start" | "center" | "end" | "random" | The order in which letters start: shuffled, left to right, from the middle out, or right to left. |
trigger | "view" | "mount" | "hover" | "manual" | "view" | When the sign powers on: the first time it scrolls into view, as soon as it mounts, while hovered (it powers down on leave), or only through the ref's ignite(). |
interference | number | 1 | How easily a moving pointer disturbs the lit letters it passes over, making them stutter. Faster movement disturbs more. 0 turns it off. |
interferenceRadius | number | 90 | Reach of the pointer's disturbance, in pixels. |
clickCycle | boolean | true | Clicking power-cycles the sign: letters go dark in a wave from the click point, then strike back on. |
instability | number | 0.3 | How often, left alone, a lit letter briefly loses power, like a loose connection. 0 keeps it steady. |
loop | boolean | false | Power-cycle the whole sign again after every run. |
loopDelay | number | 6 | Seconds between runs when looping. |
seed | number | 0 | Changes the flicker pattern and the random start order. |
paused | boolean | false | Shows the sign fully lit with no motion. Reduced-motion users always get this. |
onComplete | () => void | — | Called once every letter has lit. |
ref | { ignite, cycle, powerDown } | — | Imperative controls: light the sign, power-cycle it, or switch it off. |
className | string | — | Classes for the root element, for example font size and weight. |
style | CSSProperties | — | Inline styles for the root element. |
textstringText to display. Words wrap as whole units and whitespace is preserved.
"Open to possibility"as"span" | "div" | "p" | "h1" | … | "h6"Element to render. The component inherits font, size and alignment from its parent.
"span"colorstringColour of a lit letter. Defaults to the surrounding text colour.
"currentColor"glowColorstringColour of the halo around lit letters and of the flash when a letter strikes on.
"#8B5CF6"unlit"outline" | "dim" | "none"How a letter looks before it lights: a hairline outline like an unlit tube, a faint ghost fill, or nothing at all.
"outline"outlineWidthnumberWidth of the unlit outline, in pixels.
1outlineOpacitynumberOpacity of the unlit outline or ghost fill, from 0 to 1.
0.28glownumberStrength of the steady halo once a letter is lit. 0 turns it off.
0.6glowSizenumberReach of the halo, relative to the font size.
1flashnumberBrightness of the brief flash each time a letter strikes on.
1flickersnumberAverage number of false starts before a letter stays lit. 0 lights each letter cleanly.
3speednumberPace of every flicker. Higher values make the sign stutter faster.
1staggernumberSeconds between one letter starting and the next.
0.045delaynumberSeconds to wait before the first letter starts.
0.15order"random" | "start" | "center" | "end"The order in which letters start: shuffled, left to right, from the middle out, or right to left.
"random"trigger"view" | "mount" | "hover" | "manual"When the sign powers on: the first time it scrolls into view, as soon as it mounts, while hovered (it powers down on leave), or only through the ref's ignite().
"view"interferencenumberHow easily a moving pointer disturbs the lit letters it passes over, making them stutter. Faster movement disturbs more. 0 turns it off.
1interferenceRadiusnumberReach of the pointer's disturbance, in pixels.
90clickCyclebooleanClicking power-cycles the sign: letters go dark in a wave from the click point, then strike back on.
trueinstabilitynumberHow often, left alone, a lit letter briefly loses power, like a loose connection. 0 keeps it steady.
0.3loopbooleanPower-cycle the whole sign again after every run.
falseloopDelaynumberSeconds between runs when looping.
6seednumberChanges the flicker pattern and the random start order.
0pausedbooleanShows the sign fully lit with no motion. Reduced-motion users always get this.
falseonComplete() => voidCalled once every letter has lit.
—ref{ ignite, cycle, powerDown }Imperative controls: light the sign, power-cycle it, or switch it off.
—classNamestringClasses for the root element, for example font size and weight.
—styleCSSPropertiesInline styles for the root element.
—