Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
magnetic-cards-spring-demo
import { MagneticCardsSpring } from "@/registry/tween/magnetic-cards-spring"
export function MagneticCardsSpringDemo() {
return <MagneticCardsSpring />
}
Installation
Usage
import { MagneticCardsSpring } from "@/components/ui/magnetic-cards-spring"<MagneticCardsSpring
cards={[
{ src: "/vessels/pitcher.jpg", alt: "Sage pitcher with dahlias" },
{ src: "/vessels/stoneware.jpg", alt: "Ribbed vase with irises" },
{ src: "/vessels/blush.jpg", alt: "Blush vase with roses" },
{ src: "/vessels/urn.jpg", alt: "Turquoise urn with roses" },
]}
/>How it works
- The cards rest in a fan: fixed x/y offsets and tilts around the center of the stage.
- Pointer velocity is smoothed on every move. Each frame, a card within 500px of the pointer gets a push equal to that velocity times
pushForce, weighted by(1 - distance / radius)³, so only fast sweeps close to a card move it. - Each card also feels its neighbours' pushes, falling off by
0.2per step along the row, so a shove ripples sideways. - A spring-damper on the
gsap.tickerpulls x, y and rotation back to rest: velocity gains(target - position) × stiffnessand is multiplied byfriction. Horizontal push also adds tilt. - The fan scales down below a 900px-wide container. With
prefers-reduced-motion: reducethe cards stay in their resting fan.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
cards | MagneticCard[] | 4 remote | Each card is { src, alt? }. |
cardSize | number | 250 | Card edge length in pixels at full size. |
pushForce | number | 10 | How hard pointer velocity pushes the cards. |
stiffness | number | 0.05 | Spring pull back to rest. |
friction | number | 0.85 | Velocity kept per frame. |
background | string | "#17120f" | Stage background. |
className | string | — | Extra classes on the outer container. |