Coyote Labby Coyote Concept

Small JS · spring easing · pointer events

Magnetic

The element leans towards the cursor and springs back when it leaves. Makes small targets feel alive.

Class
.CCMagnet
Weight
0.9 KB
Needs
CSS + a few lines of JS
Best for
Hero CTAs, icon buttons, toggles

Tune it

Every snippet on this page follows these settings.

How Magnetic works

  1. Script measures how far the cursor is from the element's centre.
  2. It moves the element a fraction of that distance (--cc-intensity sets the fraction).
  3. A fast linear transition while tracking keeps it glued to the cursor.
  4. On leave, a springy cubic-bezier overshoots slightly on the way home.

Add it to your site

  1. Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
  2. Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
  3. Add the classes. For example <button class="CCButton CCMagnet">.
  4. Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Magnetic on button, toggle, dropdown, card.

More ways to use it

The same class on badge, nav bar, headline.

Pairs well with

Avoid on the same element 3D Tilt (transform).

Browser support

Chrome & Edge111+
Safari16.2+
Firefox113+

Older browsers show the element without the effect: nothing breaks.

Accessibility

  • The element's hit area moves with it, so it never runs away from the cursor.
  • Disabled under reduced motion.

Performance

  • 0.9 KB of code, no libraries.
  • Animates transforms, opacity and gradients, which browsers handle cheaply.
  • This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Magnetic

How do I add Magnetic to a button?

Add the class CCMagnet next to CCButton, inside an element with the CCTheme class, then include the Magnetic CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does Magnetic need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support Magnetic?

Chrome and Edge 111+, Safari 16.2+ and Firefox 113+. Older browsers show the element without the effect, so nothing breaks.

Is Magnetic accessible?

The element's hit area moves with it, so it never runs away from the cursor. Disabled under reduced motion.