Magnetic `<mv-magnetic>`

Conteneur magnétique : l’enfant se penche vers une souris proche avec une atténuation progressive, la suit un peu pendant le survol, puis revient en place comme un ressort. Contrairement à la plupart des effets magnétiques, il ne se dérobe jamais sous le pointeur, donc le survol et les clics restent exacts, et il ne se déplace que de quelques pixels.

Catégorie	Curseurs
Type	Web Component (`<mv-magnetic>`)
Statut	stable
Keywords	safe-rewrite, magnetic, magnet, cursor, hover, spring, parallax, cta, hit-area

When to use

A primary CTA or icon button should lean toward the cursor and spring back
Nav items or social links need a tactile hover with extra parallax on their inner content
A hero button should feel alive on hover without making it harder to click

Avoid when

Every link and button of a nav or dense toolbar needs a hover; a gliding highlight beats many moving targets → use Cursor Snap instead
The whole cursor should be replaced by a custom follower → use Cursor Follower instead
A card should tilt in 3D toward the pointer rather than translate → use Tilt Card instead

Installation

node scripts/add.mjs magnetic --out ./src/marvelous

Agent IA avec le serveur MCP de Marvelous UI : install_components({ slugs: ["magnetic"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Fichiers copiés (dépendances comprises) : tokens/tokens.css, core/base.css, core/element.js, core/motion.js, components/magnetic/magnetic.js, components/magnetic/magnetic.css.

Utilisation

Démarrage rapide, le balisage minimal qui fonctionne :

<mv-magnetic>
  <a class="mv-button" href="/signup">Start free trial</a>
</mv-magnetic>

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les variables CSS :

<div id="mv-mag-demo" style="display:grid;gap:2rem;justify-items:center;text-align:center">
  <style>
    #mv-mag-demo .mag-orb { display:grid; place-items:center; width:8.5rem; height:8.5rem; border-radius:50%; background:var(--mv-fg); color:var(--mv-bg); text-decoration:none; font:600 .95rem/1.25 var(--mv-font-sans); box-shadow:var(--mv-shadow-lg); transition:box-shadow var(--mv-duration-normal) var(--mv-ease-out); }
    #mv-mag-demo mv-magnetic[data-active] .mag-orb { box-shadow:var(--mv-shadow-xl); }
    #mv-mag-demo .mag-orb:focus-visible { outline:2px solid var(--mv-accent); outline-offset:4px; }
    #mv-mag-demo .mag-row { display:flex; gap:.5rem; align-items:center; justify-content:center; flex-wrap:wrap; }
    #mv-mag-demo[data-rest] mv-magnetic { outline:1px dashed color-mix(in oklab, var(--mv-accent) 55%, transparent); outline-offset:0; border-radius:var(--mv-radius-sm); }
    #mv-mag-demo .mag-note { color:var(--mv-fg-muted); font-size:.8rem; max-width:32rem; margin:0; }
  </style>

  <mv-magnetic strength="0.35" radius="96" max="18">
    <a class="mag-orb" href="#contact"><span data-magnetic-inner>Get in<br>touch →</span></a>
  </mv-magnetic>

  <div class="mag-row">
    <mv-magnetic><a class="mv-button" href="#start">Start free trial</a></mv-magnetic>
    <mv-magnetic><a class="mv-button" data-variant="ghost" href="#sales">Talk to sales</a></mv-magnetic>
  </div>

  <div class="mag-row" aria-label="Social links" role="group">
    <mv-magnetic radius="32" max="6" inner="0.5">
      <a class="mv-button" data-variant="outline" data-size="icon" data-shape="round" href="#instagram" aria-label="Instagram"><svg data-magnetic-inner aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><path d="M17.5 6.5h.01"/></svg></a>
    </mv-magnetic>
    <mv-magnetic radius="32" max="6" inner="0.5">
      <a class="mv-button" data-variant="outline" data-size="icon" data-shape="round" href="#linkedin" aria-label="LinkedIn"><svg data-magnetic-inner aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg></a>
    </mv-magnetic>
    <mv-magnetic radius="32" max="6" inner="0.5">
      <a class="mv-button" data-variant="outline" data-size="icon" data-shape="round" href="#dribbble" aria-label="Dribbble"><svg data-magnetic-inner aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M19.1 5.2C15.4 9.3 9.7 10.9 2.3 10.4M21.9 12.8c-4.4-1-8.2-.6-11.5 1.6-2.3 1.6-4 3.8-5.1 6.4M8.6 2.7c3.2 3.6 5.4 7.4 6.9 11.6 1 2.7 1.6 5.4 1.8 7.5"/></svg></a>
    </mv-magnetic>
    <mv-magnetic radius="32" max="6" inner="0.5">
      <a class="mv-button" data-variant="outline" data-size="icon" data-shape="round" href="#github" aria-label="GitHub"><svg data-magnetic-inner aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21"/></svg></a>
    </mv-magnetic>
  </div>

  <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="mv-mag-rest"> Show resting boxes</label>
  <p class="mag-note">Bring a mouse near: each target leans in, follows a little, then springs back. It never slides out from under the pointer, so hover and clicks stay exact. Tab through: focus moves nothing.</p>

  <script type="module">
    const root = document.getElementById("mv-mag-demo");
    document.getElementById("mv-mag-rest").addEventListener("change", (e) => root.toggleAttribute("data-rest", e.target.checked));
  </script>
</div>

API

Attributes

Name	Type	Default	Description
`strength`	number	`0.3`	Share of the pointer's offset from the center that the child leans by (0-1).
`radius`	number	`64`	Attraction margin around the resting box (px); the pull fades smoothly to zero at its edge.
`inner`	number	`0.4`	Extra movement of [data-magnetic-inner] (multiplier, parallax).
`max`	number	`12`	Maximum displacement (px, 0 = unlimited).
`disabled`	boolean		Disables the attraction (the child springs back).
`data-active`	(state)		Set by the component while the pointer is inside the zone (for styling).

Content structure

Name	Description
`(child)`	The element that leans (one button, link or card).
`[data-magnetic-inner]`	Descendant(s) that move further.

CSS variables

Name	Default	Description
`--mv-magnetic-x / -y`		Current offset (px), exposed for your own effects.
`--mv-magnetic-inner`	`0.4`	Parallax multiplier (driven by the inner attribute).

Accessibility

Purely visual: the child stays a real link or button, and only its translate changes, so layout, focus order and the focus ring are untouched. Keyboard focus never moves anything. Hit area: whenever the lean puts the target under the pointer, the moving target is clamped so the pointer stays on it (a few px inside its edge), so springs, lag or overshoot never cause hover flicker or a missed click; the pull fades smoothly to zero at the zone edge, so nothing jumps. Pointer effect only with a fine hovering pointer ((hover: hover) and (pointer: fine)), touch is ignored. Reduced motion (OS or data-motion="reduce"): no movement at all, offsets reset to zero. Forced colors: unaffected, the component adds no color. The system cursor is never hidden. Performance: all instances share one pointermove listener and one frame loop that reads every box before writing, uses translate only, and stops as soon as everything rests; everything is removed with the last instance.