Spotlight Text
0
Used by 0Controls
Spotlight Text
Dim a block of text and sweep a soft cursor-following spotlight across it to reveal the bright letters underneath on hover.
KEY FEATURES
- — Cursor-following radial spotlight that reveals bright text on hover
- — Adjustable spotlight radius from 20 to 700 px
- — Separate bright and dim colors for the two text layers
- — Intensity control sizes the solid core before the soft edge fade
- — Custom open and close timing via the transition control
- — Editable text with full font styling for family, size, weight, spacing, and alignment
- — Hides the native cursor for an immersive torch-in-the-dark feel
- — Static and reduced-motion fallback shows a centered, always-on spotlight
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
text
string
Not everything is meant to be seen at once. Hover to reveal.
The words displayed, shown dim and revealed bright under the hover spotlight.
font
font
{"..."}
Font family, weight, size, line height, letter spacing, and alignment of the text.
brightColor
color
#FFFFFF
Color of the revealed text shown inside the cursor spotlight.
dimColor
color
rgba(125, 121, 121, 0.22)
Color of the dimmed text shown everywhere outside the spotlight.
maskSize
number
150
Diameter of the circular spotlight in pixels; larger reveals more text.
intensity
number
10
Percent of the spotlight that stays fully solid before fading; higher gives a harder edge.
transition
transition
{"..."}
Timing and easing of the spotlight growing open and shrinking closed on hover.
