A drifting spotlight that brings dimmed text into the light
| Name | Type | Default | Description |
|---|---|---|---|
text | string | "Look a little closer. There is more here than meets the eye." | The text. It stays real, readable text at a dim base level; the light brings it to full brightness. |
as | "span" | "div" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | Element to render. |
fontSize | number | string | "clamp(2rem, 5vw, 3.75rem)" | Font size. Numbers are pixels; strings accept any CSS length. |
fontWeight | number | 600 | Font weight. The font family is inherited from the page. |
letterSpacing | string | "-0.035em" | Letter spacing as a CSS length. |
lineHeight | number | 1.15 | Line height. |
align | "left" | "center" | "right" | "center" | Text alignment. |
maxWidth | string | "20ch" | Maximum line length as a CSS length. |
color | string | inherited | Colour of the text at the centre of the light. Leave unset to inherit from the page. |
tint | string | "#B19EEF" | Colour the light fades to at its edge. Set it to an empty string for an untinted light. |
baseOpacity | number | 0.14 | Opacity of the text outside the light, from 0 (hidden) to 1. |
radius | number | 3 | Radius of the light, in em. |
softness | number | 0.6 | How gradually the light falls off toward its edge, from 0 (crisp) to 1 (very soft). |
trail | number | 0.5 | Afterglow left on text the light has just passed, from 0 to 1. |
follow | number | 0.5 | How tightly the light follows the pointer, from 0 (lazy) to 1 (immediate). |
idle | "drift" | "center" | "none" | "drift" | What the light does without a pointer: wander slowly across the text, rest at its centre, or switch off. |
driftSpeed | number | 1 | Speed of the idle drift. |
clickToReveal | boolean | true | Clicking switches the lights on, bringing the whole text to full brightness; clicking again returns to the spotlight. |
interactive | boolean | true | Let the pointer move the light. The cursor always stays visible. |
ref | { lightsOn, lightsOff } | — | Switch the full light on or off from code. |
className | string | — | Classes for the root element. |
style | CSSProperties | — | Inline styles for the root element. |
textstringThe text. It stays real, readable text at a dim base level; the light brings it to full brightness.
"Look a little closer. There is more here than meets the eye."as"span" | "div" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"Element to render.
"p"fontSizenumber | stringFont size. Numbers are pixels; strings accept any CSS length.
"clamp(2rem, 5vw, 3.75rem)"fontWeightnumberFont weight. The font family is inherited from the page.
600letterSpacingstringLetter spacing as a CSS length.
"-0.035em"lineHeightnumberLine height.
1.15align"left" | "center" | "right"Text alignment.
"center"maxWidthstringMaximum line length as a CSS length.
"20ch"colorstringColour of the text at the centre of the light. Leave unset to inherit from the page.
inheritedtintstringColour the light fades to at its edge. Set it to an empty string for an untinted light.
"#B19EEF"baseOpacitynumberOpacity of the text outside the light, from 0 (hidden) to 1.
0.14radiusnumberRadius of the light, in em.
3softnessnumberHow gradually the light falls off toward its edge, from 0 (crisp) to 1 (very soft).
0.6trailnumberAfterglow left on text the light has just passed, from 0 to 1.
0.5follownumberHow tightly the light follows the pointer, from 0 (lazy) to 1 (immediate).
0.5idle"drift" | "center" | "none"What the light does without a pointer: wander slowly across the text, rest at its centre, or switch off.
"drift"driftSpeednumberSpeed of the idle drift.
1clickToRevealbooleanClicking switches the lights on, bringing the whole text to full brightness; clicking again returns to the spotlight.
trueinteractivebooleanLet the pointer move the light. The cursor always stays visible.
trueref{ lightsOn, lightsOff }Switch the full light on or off from code.
—classNamestringClasses for the root element.
—styleCSSPropertiesInline styles for the root element.
—