magneticui

$ npm install magneticui

Ultra-lightweight, high-60FPS magnetic cursor attraction physics engine for Web UI buttons, icons, avatars, and cards. Multi-layered 3D depth, zero layout shift, and 0 idle CPU overhead.

THEME SWITCHER

PRESETS MATRIX

Move your cursor near the pads below to test magnetic attraction physics

magnetic.button() Primary CTA Button Pull (Radius: 80px, Strength: 0.35)

Social Icon Elastic Pull (Strength: 0.50)

magnetic.avatar() Profile Badge Float (Radius: 100px)

magnetic.card() Weighted Card Drift (Strength: 0.15)

magnetic.text() 3D Inner Text Displacement

magnetic.strong() Ultra-Reactive Magnet (Strength: 0.70)

PHYSICS LABORATORY

Tweak spring physics parameters and test live magnetic attraction

MAGNET RADIUS 90 px

PULL STRENGTH 0.4

STIFFNESS 160

DAMPING 15

GENERATED CODE

import { magnetic } from 'magneticui';

magnetic.attach(document.querySelector('#my-btn'), {
  radius: 90,
  strength: 0.4,
  stiffness: 160,
  damping: 15,
  childSelector: '.inner-icon',
  childStrength: 0.6
});

INTEGRATION EXAMPLES

Vanilla JS, React 18/19, and Next.js App Router

VANILLA JS / TYPESCRIPT

import { magnetic } from 'magneticui';

// Attach magnetic presets to elements
const btn = document.querySelector('#btn');
magnetic.button(btn);

// Or custom magnetic parameters with 3D depth
magnetic.attach(btn, {
  radius: 90,
  strength: 0.4,
  childSelector: '.btn-icon',
  childStrength: 1.2
});

REACT / NEXT.JS APP ROUTER

'use client';

import { Magnetic } from 'magneticui/react';

export function ActionButton() {
  return (
    <Magnetic radius={90} strength={0.4}>
      <button>Magnetic Action</button>
    </Magnetic>
  );
}