REFERENCE
- Gallery page: https://magpui.com/en/i/magnetic-particle-button-da02c3
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/magnetic-particle-button-da02c3/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/magnetic-particle-button-da02c3/clip.mp4
- Original post: https://21st.dev/@kokonutd/components/magnetize-button by Kokonut UI
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A soft lavender button 'Hover me' with a magnet icon, surrounded by 12-20 small violet dots drifting in a loose cloud. On hover the label changes to 'Attracting' and the dots fly toward the button and orbit tightly; on leave they drift back out.
DESIGN SYSTEM
- White background with a dot grid #E9E9F0; button 32px high, #EDE9FE fill, 1px #C4B5FD border, radius 6px, 13px #6D28D9 text with icon.
- Particles 4px #A78BFA at 70% opacity.
MOTION
- Idle: particles drift with random slow motion inside a 220px area.
- Hover: each particle springs to a random point within 30px of the button (stiffness 120, damping 12), stagger by distance.
- Leave: they spring back to random positions, 600ms.
- Label crossfade 150ms.
SECTIONS
- Button, particle layer.
- States: idle, attracting, released, focus (same as hover).
IMPLEMENTATION
- Motion for particles (absolute positioned spans) or a small canvas; positions random but seeded so the layout is stable.
- prefers-reduced-motion: swap the motion for a 150ms opacity change.
- Keyboard: every control focusable with a visible focus ring; same actions with Enter/Space and arrow keys where it makes sense.
- Animate only transform, opacity and filter.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original: use placeholders.
SUCCESS CHECK
- Particles gather on hover and spread out on leave.
- No layout shift from the particles.
- Focus triggers the same effect.
