# Updated: Magnet

By Steven Van · 2026-10-12

Overlapping magnets now resolve to the nearest one, and the component gains tilt, scale, axis locking and a movement cap.

The [React Bits](<https://creatorstoolbox.com/resources/react-bits>) Magnet component has been [updated](<https://reactbits.dev/animations/magnet>) 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](<https://reactbits.dev/favicon.ico>)

React Bits

An open-source collection of 200+ animated, interactive React components and micro-interactions.

[View React Bits →](<https://creatorstoolbox.com/resources/react-bits>)

Sources

[Original source](<https://reactbits.dev/animations/magnet>)

[Read Updated: Magnet on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-magnet>)

---
Canonical source: https://creatorstoolbox.com/blog/react-bits-updated-magnet