# Spotlight Text

> A heading in dim ink lit by a soft spotlight that follows the cursor, and sweeps across by itself when left alone.

Category: Text · MotionKit Plus · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/spotlight-text

## When to use it

One display heading on a hero, a case study title or a section opener on a dark page, where a moment of discovery suits the brand.

## How it works

The heading is set once in a dim colour, which is the real, readable text. On top sits an exact copy clipped to a gradient and masked by a radial gradient at the light's position, so only the letters under the light show the bright version. The position runs through springs: it follows the pointer while one is over the heading, and otherwise a frame clock sweeps it slowly side to side. The sweep does nothing while the heading is off screen.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/spotlight-text` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` |  | The heading. |
| `colors` | `[string, string]` | `["#5FAEB4", "#E4DCCF"]` | The lit gradient, left to right. |
| `dim` | `string` | `"#5E7271"` | Colour of the unlit letters; the real, readable text. |
| `radius` | `number` | `180` | Radius of the light in pixels. |
| `as` | `ElementType` | `"h2"` | Element to render. |

## Accessibility

- **Keyboard: Not applicable.** A heading, nothing to focus.
- **Screen readers: Pass.** The real heading is read once; the lit copy on top is hidden from assistive tech.
- **Reduced motion: Partial.** With reduced motion on, the light rests in the middle and never moves. Otherwise it sweeps continuously, so beside other content WCAG 2.2.2 asks for a way to pause it, or use it only on short display headings.
- **Colour contrast: Partial.** Unlit letters (#5E7271) measure 3.8:1, enough for large headings only. For text under 24px, set dim to #6B807F (4.6:1).