Cursor & pointer

Magnetic

Elements that get pulled toward the pointer as it approaches, then snap back on a spring.

Paste it into ChatGPT, Claude, Cursor or v0.

Usage

import { Magnetic, useMagnetic } from '@vizzele/react';

<Magnetic strength={0.4} radius={90} inner=".label">
  <button className="vz-button" data-variant="holo">
    <span className="label">Hover me</span>
  </button>
</Magnetic>

// or as a hook
const ref = useMagnetic<HTMLButtonElement>({ strength: 0.4 });
<button ref={ref}>Magnetic</button>

Props

Prop	Type	Default	Description
`strength`	`number`	`0.35`	How much it follows the pointer (0–1).
`radius`	`number`	`80`	Extra px around the element where the pull starts.
`scale`	`number`	`1.04`	Scale while attracted.
`inner`	`string \| HTMLElement`	—	A child that moves further (layered parallax).
`innerStrength`	`number`	`0.2`	Extra movement of the inner element.
`press`	`boolean`	`true`	Squish on press — the touch alternative to hover.
`spring`	`SpringConfig \| SpringPreset`	`'liquid'`	Spring used to follow and return.

Usage

Props

Accessibility