Heat card
A card that warms while you look at it, pointer or keyboard, and cools slowly when you leave instead of switching off.
Features
- The Glow effect's Neon preset driven by heat: it lights in 60 ms and cools over half a second.
- Hover and focus anywhere inside both count, so keyboard users see the same warmth.
- The glow loads after the page, so the card renders and reads without it.
Use it for
- Project and product cards.
- Anything a visitor is choosing between.
On this site
- Projects: each cardAttention as heat: a card warms while you look at it and cools, never cuts off, when you leave.
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 |
|---|---|---|
glow | Params | Glow parameters over the Neon preset: color, core, radius, intensity, inner. |
…rest | HTML attributes | Passed to the article. |
Accessibility
- The glow canvas is aria-hidden and never takes the pointer.
- Reduced motion keeps the warm state and drops the fade.
Source
The code is in src/kit/heat-card.tsx in runets, MIT licensed.