Updated: Magnet
By Steven Van ·
Overlapping magnets now resolve to the nearest one, and the component gains tilt, scale, axis locking and a movement cap.
The React Bits Magnet component has been updated with a new motion model and several new options.
Motion changes
Magnet now moves on a real spring and applies a smooth pull at the edge of its range. When several magnets overlap, only the nearest one reacts to the cursor.
New options
- Tilt
- Scale
- Axis locking
- A movement cap
The component is installed with npx shadcn@latest add @react-bits/Magnet-TS-TW, which is the TypeScript and Tailwind variant. JavaScript and plain CSS versions are also available.
React Bits
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →