Magnet

An element leans toward the pointer when it comes near, then settles back.

enhancer
hover
pointer
button
since 0.1

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Magnet example

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<button type="button" class="demo-btn" data-motion="magnet">Come closer</button>

import { Magnet } from "./motion/react/Magnet";

<Magnet>Your content</Magnet>

<script setup lang="ts">
import Magnet from "./motion/vue/Magnet.vue";
</script>

<template>
  <Magnet>Your content</Magnet>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "magnet";

The wrappers: Magnet.tsx (React, TypeScript) and Magnet.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-radius`	`70`	how far around the element it reacts, in pixels
`data-motion-strength`	`0.3`	how far it follows (0 to 1)

One shared pointer listener; only magnets on screen react, and each eased loop stops once it settles. Reduced motion: it stays put. Transform does not apply to inline elements: use it on a button, a block or an inline-block.

Size

magnet.js is 0.8 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.