Spotlight mark
A stroked logo lit by a light that follows the pointer across it on a spring.
Features
- The stroke is a radial gradient from the accent to the ink, centred on the pointer.
- The light glides on a snappy spring; under reduced motion it rests.
Use it for
- Monograms and logos in a header.
On this site
- Every page: the ZK in the cornerThe monogram catches the light where your pointer is.
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 motion - 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 |
|---|---|---|
d | string | Path data, drawn as a stroke. |
width / height | number | The view box (80 by 48). |
stroke | number | Stroke width (3). |
Accessibility
- Decorative: aria-hidden. Name the link around it.
Source
The code is in src/kit/spotlight-mark.tsx in runets, MIT licensed.