Layout
Card
The frame used throughout this site to present a demo. Optionally magnetic, so a grid of cards subtly tracks the pointer.
Card body
Card label
Magnetic
Usage
<Card
variant="default"
magnetic
magneticRadius={220}
hoverScale={1.02}
spring="smooth"
label="Card label"
>
Card body
</Card>How the motion works
Attraction is measured from the card's centre against the document pointer position rather than a hover event, so the pull begins before the cursor arrives. Falloff is linear in distance and the result runs through a spring, which is what stops it feeling glued to the cursor. Coarse pointers skip the effect entirely.
useMagneticuseSpringValue
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | Caption rendered beneath the body. |
| variant | "default" | "raised" | "sunken" | "outlined" | "default" | Surface treatment. |
| magnetic | boolean | false | Lean toward the cursor. |
| hoverScale | number | 1 | Scale on hover. 1 disables the lift. |
| onClick | () => void | — | Makes the card an interactive button. |