Components

Magnetic Zone

Wrap anything to make it magnetic: while the cursor is within `radius` px of the zone's center the child leans toward it, then snaps back home on leave.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add magnetic-button

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { MagneticZone } from "@lumora/ui/components/magnetic-button";
// or from the barrel:
import { MagneticZone } from "@lumora/ui";

Props worth knowing

Wrap anything to make it magnetic. radius is the engage distance from center in px (default 120); strength is the fraction of the cursor offset the child travels (default 0.35). Disabled entirely under reduced motion. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.