Motion
Hover & micro
Small responses that tell you the screen heard you: a pull toward the pointer, a light under it, a spark when you click. Hover never moves the layout.
Magnet
Primary calls to action lean toward the pointer once it is within reach, on a spring. Only the nearest magnet pulls. Mouse and pen only.
| Prop | Values | Default | What it does |
|---|---|---|---|
padding | px | 100 | How far away the pull starts (dashboard: 50–80) |
magnetStrength | number | 2 | Travel = distance ÷ this (dashboard: 3–4) |
maxOffset / axis | px · 'both' | 'x' | 'y' | — · both | Cap or lock the travel |
tilt / scale | degrees · number | 0 · 1 | Lean and grow on approach |
stiffness / damping | number | 170 · 16 | The spring |
Spotlight
A soft light follows the pointer across a card and lights its edge; pressing flares it. On the dashboard's KPI, project and client cards.
Revenue · 2026€384,567.45
Spending · 2026€241,230.10
Kept · 2026€143,337.35
| Prop | Values | Default | What it does |
|---|---|---|---|
<Card spotlight> | true | options | false | The dashboard light on any card |
use:spotlight | { color, intensity, size, softness, borderGlow, proximity, smoothing, theme } | blue · 0.15 · 240 · 0.7 · 0.6 · 80 · 0.3 · 'light' | Any surface |
Click spark
Eight short lines burst from every click — the whole dashboard has it. Click anywhere in the box.
Click anywhere here
| Prop | Values | Default | What it does |
|---|---|---|---|
use:clickSpark | { color, size, radius, count, duration, width } | #5d6ef0 · 8 · 20 · 8 · 420 · 2 | Mouse sparks on press; touch and keyboard on click |
Hover rules
- Colour, not position. Buttons, rows and menu items change background in 0.2s. They never lift, grow or shift — the layout stays still under the pointer.
- Links that open a page (project and client cards) deepen their shadow over 0.35s.
- Chart parts brighten what you point at and dim the rest; the readout glides to it. Nothing is shown until you point.
- Legends nudge the hovered row 4px to the right, so you can see which slice you are reading.
- Touch has no hover. Everything hover shows is also reachable by tap or keyboard focus.
Micro states
The smallest motion: a control confirming what you did.