Magnetic

Magnetic pull toward the cursor. Pro · Effects › Cursor and press feedback

Wraps a button or icon so it leans towards a nearby pointer and springs back when the pointer leaves. The wrapper keeps its place in the layout; only the content moves, with a transform, driven by a spring whose stiffness and damping come from the theme (crisp in Vercel, bouncy in Liquid Glass). The spring loop runs only while something moves; inactive on touch screens and with reduced motion. With asChild the child itself moves, no wrapper.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add magnetic

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { Magnetic } from 'valyro-ui-pro';

Props

Prop	Type	Default
`strength`	`number`	`0.35`	Share of the pointer's distance from the centre that the content follows, 0–1.
`radius`	`number`	`40`	How far outside the element the pull starts, px.
`disabled`	`boolean`	`false`	Turns the pull off; the content stays in place.
`asChild`	`boolean`	`false`	Moves the only child itself (a Button, an IconButton, a Card) instead of wrapping it in two spans: no extra elements, the child keeps its own layout, and the pull uses the individual `translate` property.

Related components

Cursor Glow — Glow and tilt that follow the cursor
Tilt Card — 3D tilt with glare and parallax
Ripple — Material-style press ripple
Confetti — Confetti: a component and fireConfetti()
Glass Lens — Glass lens with real refraction
Morphing Capsule — Capsule that flows between states
Floating Tab Bar — Floating glass tab bar
Aurora Background — Slow aurora behind your content
Gradient Background — Slowly shifting gradient
Bubble Background — Soft colored bubbles, one follows the cursor
Stars Background — Starry sky with cursor parallax
Hexagon Background — Hexagon grid with a glowing trail

Previous: Cursor Glow · Next: Tilt Card · All Effects