Spotlight
A surface with a soft light that follows the pointer while it is over it, written to CSS variables, not React state.
Move the pointer hereThe light follows it.
Features
- A radial light at the pointer that fades in on hover.
- The position goes straight to two CSS variables: moving the pointer never re-renders.
Use it for
- Cards in a grid, testimonials, pricing tiers.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
API
| Prop | Type | What it does |
|---|---|---|
…rest | HTML attributes | Passed to the div; your own onPointerMove still runs. |
Accessibility
- Decoration only: content and focus are untouched.
Source
The code is in src/kit/spotlight.tsx in runets, MIT licensed.