#340
Magnetic button
A pill button that leans toward the pointer inside a 72px range, pulled by a Spring and released on leave.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Magnetic button" pattern (@codeatlasdev/ui demo #340, motion/micro) in my app.
Call get_demo({ ids: ["#340"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Primary call to action on a landing page or hero where the button should feel attracted to the cursor.
Keep these library parts, with the props and tokens the demo uses:
- MotionStage from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` from `@codeatlasdev/ui` with `loop={2800}`
- `const PULL = 0.35;` the button moves 35% of the pointer offset from its centre
- `const RANGE = 72;` the pull starts 72px outside the button edge
- `new Spring({ x: 0, y: 0 }, { stiffness: 0.12, damping: 0.55 })` drives the translate, set back to zero on `onpointerleave`
- `@media (pointer: coarse)` removes the transform: no magnetic pull on touch
- Autoplay moves an `aria-hidden` ghost dot; under reduced motion `--mx` and `--my` stay at 0
Exact motion (do not approximate):
- transform: translate3d (pointer pull): spring, spring, spring stiffness: 0.12, damping: 0.55
- transform: translate3d (fake cursor, autoplay only): 520ms, cubic-bezier(0.2, 0, 0, 1)
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- MotionStage
@codeatlasdev/ui
How it is built
- `MotionStage` from `@codeatlasdev/ui` with `loop={2800}`
- `const PULL = 0.35;` the button moves 35% of the pointer offset from its centre
- `const RANGE = 72;` the pull starts 72px outside the button edge
- `new Spring({ x: 0, y: 0 }, { stiffness: 0.12, damping: 0.55 })` drives the translate, set back to zero on `onpointerleave`
- `@media (pointer: coarse)` removes the transform: no magnetic pull on touch
- Autoplay moves an `aria-hidden` ghost dot; under reduced motion `--mx` and `--my` stay at 0
Related
Loading source.