184 Components
Spotlight Glow Reveal Text
TextCinematic stealth typography that stays subtly dimmed until illuminated by the user's cursor torchlight spotlight mask.
Hover cursor to illuminate the hidden text
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:clsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/spotlight-glow-reveal-text.json"
Props
TypeScript props supported by <SpotlightGlowRevealText />.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Text phrase to illuminate with spotlight. |
| radius | number | 120 | Spotlight beam diameter in pixels. |
| glowColor | string | "rgba(255,255,255,0.95)" | Specular accent illumination tint. |
| dimmedOpacity | number | 0.18 | Resting opacity of unlit ambient text. |
Key Features
- Real-time hardware-accelerated CSS radial-gradient mask tracking cursor position.
- Dual-layer composition: Dimmed ambient background layer with full specular specular overlay.
- Soft drop-shadow bloom glow centered on illuminated letterforms.
- Smooth entry and exit opacity transitions when mouse enters or leaves.
Keyboard & Accessibility
- Masked overlay hidden from screen readers via aria-hidden='true'.
- Base text retains standard contrast and DOM accessibility.