Skip to content
MIZU.

Magnetic

A spring-follow wrapper — the surface leans toward the cursor and settles back.

Live — this one is real

Pull
Stronger

Move your cursor close — the surface answers

Usage

import { Magnetic } from "mizu-ui";

export function PullTab() {
  return (
    <Magnetic strength={0.4}>
      <button>Pull</button>
    </Magnetic>
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect motion/Magnetic.tsx

Source is included in the npm package under src/motion/Magnetic.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
strengthnumber0.32Fraction of the distance to the cursor that the element travels.

Accessibility

Purely presentational — the wrapped control keeps its own keyboard and screen-reader behavior.

Motion

Spring (stiffness 160, damping 14) on both axes. Travel is disabled by the reduced-motion hook.

Works alongside

MaskLineRevealMarqueePageWipe