Magnetic Cards

Zenora UI

Get Started

Magnetic Cards·Hover

npx zenora-ui-registry@latest add magnetic-cards

Hover

317 views•102 uses

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx zenora-ui-registry@latest add magnetic-cards

Writes to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

A set of cards that fan out symmetrically and respond to cursor proximity with a smooth, physics-based magnetic push effect.

KEY FEATURES

·Cards arrange themselves in a perfectly symmetrical fan using calculated rotation spreads
·Moving the cursor near the cards pushes them away using spring physics
·Neighboring cards influence each other for a cohesive, organic wave effect
·Cards dynamically tilt and rotate based on mouse velocity and position

Props

11 properties

imagesstring[]5 images

List of images for the cards.

backgroundcolortransparent

Container background color.

cardSizenumber260

Size of each card.

cardSpacingnumber187

Horizontal spacing between cards.

rotationSpreadnumber6

Maximum rotation angle at the edges.

proximityRadiusnumber500

Distance at which cursor pushes cards.

pushForcenumber10

Strength of the cursor push.

tiltAmountnumber10

How much cards tilt based on push.

neighborInfluencenumber20

How much a card's movement affects its neighbors.

springStiffnessnumber5

Spring stiffness for returning to rest.

bounceFrictionnumber85

Friction to damp the bounce.