ComponentsLight
Spotlight text
A light follows the cursor and reveals the copy.
Installation
$ npx shadcn@latest add @textlab/spotlight-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { SpotlightText } from "@/components/textlab/spotlight-text/spotlight-text";
<SpotlightText as="h2" text="Look around" variant="glow" />Variants
revealglowoutlineProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "reveal" | "glow" | "outline" | "reveal" | Lift dim text, add a warm light, or fill hollow letters under the light. |
| radius | number | 2.2 | Radius of the light in em. |
| color | string | var(--tl-fx-glow) | Light color for the glow variant. |
| dim | number | 0.22 | Visibility outside the light, 0 to 1. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Hero statements meant to be explored.
- Dark, cinematic sections.
Skip it
- Instructions or anything people must read in full immediately.
- Light backgrounds with the glow variant.
Accessibility and motion
Accessibility
- Screen readers get the text from a hidden copy.
- Outside the light the text stays legible at reduced contrast; raise dim if it must pass AA.
Motion
- The light trails the pointer slightly, like a heavy torch.
- When the pointer leaves, the light fades rather than snapping off.
Reduced motion. Shows the text normally with no light.
Performance
- A radial mask driven by CSS variables written once per frame while moving.