Attract Button

A button in a field of iron filings that turn toward the pointer and pull in on press.

FreeWeb and MobileMotion

npx shadcn add @fetaui/attract-button

Playground

Label

Disabled

Icons animation

Motion

Installation

Terminal· bash

1 npx shadcn add @fetaui/attract-button

The button is 144 px wide inside a 272 by 168 px field, so give it open space.

Motion

Filings turn on a 240/21 spring.
A press pulls them in. Ink depends only on pointer distance, so a press does not darken them.
The field is always drawn. Its frame loop runs only while filings move.
With reduced motion, the filings stay static. A disabled button leaves them at rest.
Swift turns the filings directly, with no spring.

Touch draws the field the same way. Its reaction waits for a press, because a finger has no hover.

The filings draw on one canvas. The frame loop runs only while they move, and stops once they settle.
Only filings within 64 px of the button exist, on a 12 px grid.
The ResizeObserver, theme observer and frame are cleaned up on unmount. When still it paints once and stays.

Give your coding assistant the Markdown reference instead of screenshots.

Import from @/components/fetaui/attract-button.
Children are the label, default Attract. Button props go to the button, and className goes to the field.
The field is 272 by 168 px, so leave room around it and use one per view.
The button is 144 px wide, so keep the label to one word.
Demo clicks do nothing. Wire up onClick.