Docs / Components / Spotlight Text
Spotlight Text
Dim a block of text and sweep a soft cursor-following spotlight across it to reveal the bright letters underneath on hover.
Sweep a soft cursor-following spotlight across this text block to reveal the hidden brilliance underneath. Designed for modern web applications with smooth lerp tracking, fully customizable spotlight radius, intensity controls, and rich typography support.
Dependencies
Install the following dependencies to use this component:
1npm install clsx tailwind-merge
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add spotlight-text
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | 'Sweep a soft cursor-following spotlight across this text block to reveal...' | The text content to display. |
| children | ReactNode | - | Custom React node text content if text prop is not used. |
| spotlightRadius | number | 120 | Spotlight radius in pixels (20 to 700 px). |
| brightColor | string | 'rgb(255, 255, 255)' | Color of the bright revealed text layer. |
| dimColor | string | 'rgba(255, 255, 255, 0.2)' | Color of the base dimmed text layer. |
| intensity | number | 20 | Solid core percentage before the soft edge fade starts (0 to 100). |
| followSpeed | number | 0.08 | Smoothness factor for cursor following lerp (0.01 = very slow/smooth, 1 = instant). |
| transitionDuration | number | 0.3 | Transition duration for opening/closing reveal effect in seconds. |
| transitionTiming | string | 'cubic-bezier(0.16, 1, 0.3, 1)' | CSS transition timing function for spotlight reveal. |
| hideCursor | boolean | true | Whether to hide native cursor on hover. |
| className | string | '' | Additional CSS classes. |
| style | CSSProperties | - | Custom styles for font family, size, weight, spacing, alignment, etc. |