A heading in dim ink lit by a soft spotlight that follows the cursor, and sweeps across by itself when left alone.
Made to be noticed
Customize
Usage
import { SpotlightText } from "@/components/motionkit/spotlight-text";
<SpotlightText
as="h1"
text="Made to be noticed"
className="text-7xl font-semibold"
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Light follow
Pointer moves
Idle sweep
No pointer
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.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/spotlight-text. It saves the file to components/motionkit and installs its dependencies.
Spotlight Text is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
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.
Made to be noticed
Customize
Usage
import { SpotlightText } from "@/components/motionkit/spotlight-text";
<SpotlightText
as="h1"
text="Made to be noticed"
className="text-7xl font-semibold"
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Light follow
Pointer moves
Idle sweep
No pointer
The live preview is free to explore. Plus unlocks the source for Spotlight Text and every other premium component.