Make a primary button feel alive by gently pulling it toward the cursor as it approaches, then springing back. Keep it subtle and reserve it for one or two primary actions. Disabled on touch and under prefers-reduced-motion. Do not use it on dense UIs full of buttons.
The English summary is being prepared. Showing the original description.
See how to installReview the instructions the agent will receive before you install.
A button that leans toward the cursor, then springs back. Part of
motion-anything; obeys MOTION-SPEC.md.
magnetic-button.css and magnetic-button.js into the project, and link them.<button class="magnetic" data-magnet-strength="0.3">Get started</button>
.magnetic. Keep strength small (~0.2–0.4) so the pull stays subtle.prefers-reduced-motion and on (hover: none) touch devices.pointerleave.attachMagnetic(ref.current) in useEffect, guarded by the same reduced-motion/touch checks.No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Back In Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
The English summary is being prepared. Showing the original description.
Back In Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
The English summary is being prepared. Showing the original description.
Back In Right — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
The English summary is being prepared. Showing the original description.
Back In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
The English summary is being prepared. Showing the original description.
Back Out Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
The English summary is being prepared. Showing the original description.
Back Out Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
The English summary is being prepared. Showing the original description.