Magnetic Cursor

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #070a12;
  --panel: #121a2b;
  --border: #263249;
  --text: #f0f4fb;
  --muted: #8a95a8;
  --accent: #86e8ff;
  --neon-purple: #ae52ff;
  --neon-pink: #ff40d6;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "SF Pro Display", system-ui, sans-serif;
  min-height: 100vh;
  cursor: none;
  overflow-x: hidden;
}

/* Restore cursor for touch devices */
@media (hover: none) {
  body {
    cursor: auto;
  }
  .cursor-ring,
  .cursor-dot {
    display: none;
  }
}

/* ── Custom cursor ── */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(134, 232, 255, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  will-change: transform;
}

.cursor-ring.hovering {
  width: 60px;
  height: 60px;
  border-color: var(--accent);
  background: rgba(134, 232, 255, 0.06);
}

.cursor-ring.clicking {
  width: 30px;
  height: 30px;
  border-color: var(--neon-pink);
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* ── Page layout ── */
.page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 5rem 2rem 4rem;
}

.header {
  text-align: center;
  margin-bottom: 4rem;
}

.eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 1rem;
}

h1 {
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.subtitle {
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: var(--muted);
  max-width: 500px;
  margin: 0.75rem auto 0;
  line-height: 1.6;
}

/* ── Button grid ── */
.button-grid {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.mag-btn {
  position: relative;
  padding: 0.85rem 2.2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(134, 232, 255, 0.12), rgba(174, 82, 255, 0.08));
  border: 1px solid rgba(134, 232, 255, 0.2);
  color: var(--accent);
  font: 600 0.9rem / 1 "Inter", system-ui, sans-serif;
  cursor: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  will-change: transform;
}

.mag-btn span {
  pointer-events: none;
}

.mag-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(134, 232, 255, 0.15);
}

.mag-btn.accent {
  background: linear-gradient(135deg, var(--accent), #6ec1ff);
  color: var(--bg);
  border-color: transparent;
}

.mag-btn.accent:hover {
  box-shadow: 0 0 30px rgba(134, 232, 255, 0.3);
}

.mag-btn.outline {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}

.mag-btn.outline:hover {
  border-color: var(--neon-purple);
  color: var(--neon-purple);
}

/* ── Cards ── */
.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.mag-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  cursor: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  will-change: transform;
}

.mag-card:hover {
  border-color: rgba(134, 232, 255, 0.3);
  box-shadow: 0 4px 24px rgba(134, 232, 255, 0.06);
}

.card-icon {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.75rem;
  opacity: 0.6;
}

.mag-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.mag-card p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Links ── */
.link-row {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.mag-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(134, 232, 255, 0.2);
  cursor: none;
  transition: border-color 0.3s;
  will-change: transform;
}

.mag-link:hover {
  border-bottom-color: var(--accent);
}

/* ── Reduced motion ── */
.reduced-motion .cursor-ring,
.reduced-motion .cursor-dot {
  display: none;
}
.reduced-motion body {
  cursor: auto;
}
.reduced-motion [data-magnetic] {
  cursor: pointer;
}

@media (max-width: 640px) {
  .page {
    padding: 3rem 1rem 3rem;
  }
  .card-row {
    grid-template-columns: 1fr;
  }
}

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

function prefersReducedMotion() {
  return window.MotionPreference.prefersReducedMotion();
}

function initDemoShell() {
  // No-op shim in imported standalone snippets.
}

// ── Demo shell ──
initDemoShell({
  title: "Magnetic Cursor",
  category: "css-canvas",
  tech: ["vanilla-js", "spring-physics"],
});

// ── Reduced motion ──
let reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add("reduced-motion");

window.addEventListener("motion-preference", (e) => {
  reduced = e.detail.reduced;
  document.documentElement.classList.toggle("reduced-motion", reduced);
});

// ── Cursor elements ──
const ring = document.getElementById("cursor-ring");
const dot = document.getElementById("cursor-dot");

// ── State ──
const cursor = {
  x: window.innerWidth / 2,
  y: window.innerHeight / 2,
  ringX: window.innerWidth / 2,
  ringY: window.innerHeight / 2,
  dotX: window.innerWidth / 2,
  dotY: window.innerHeight / 2,
  hovering: false,
};

// ── Mouse tracking ──
document.addEventListener("mousemove", (e) => {
  cursor.x = e.clientX;
  cursor.y = e.clientY;
});

document.addEventListener("mousedown", () => {
  ring.classList.add("clicking");
});

document.addEventListener("mouseup", () => {
  ring.classList.remove("clicking");
});

// ── Magnetic elements ──
const magneticEls = document.querySelectorAll("[data-magnetic]");
const MAGNETIC_RADIUS = 80; // px detection radius

const magneticStates = new Map();
magneticEls.forEach((el) => {
  magneticStates.set(el, { offsetX: 0, offsetY: 0 });

  el.addEventListener("mouseenter", () => {
    cursor.hovering = true;
    ring.classList.add("hovering");
  });

  el.addEventListener("mouseleave", () => {
    cursor.hovering = false;
    ring.classList.remove("hovering");
    // Reset element position
    const state = magneticStates.get(el);
    state.offsetX = 0;
    state.offsetY = 0;
  });
});

// ── Animation loop ──
function tick() {
  if (reduced) {
    requestAnimationFrame(tick);
    return;
  }

  // Ring follows with slower spring (creates trailing feel)
  cursor.ringX += (cursor.x - cursor.ringX) * 0.12;
  cursor.ringY += (cursor.y - cursor.ringY) * 0.12;

  // Dot follows faster (nearly instant)
  cursor.dotX += (cursor.x - cursor.dotX) * 0.35;
  cursor.dotY += (cursor.y - cursor.dotY) * 0.35;

  ring.style.transform = `translate(${cursor.ringX - 20}px, ${cursor.ringY - 20}px)`;
  dot.style.transform = `translate(${cursor.dotX - 3}px, ${cursor.dotY - 3}px)`;

  // Update magnetic elements
  magneticEls.forEach((el) => {
    const rect = el.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;

    const dx = cursor.x - centerX;
    const dy = cursor.y - centerY;
    const dist = Math.sqrt(dx * dx + dy * dy);

    const state = magneticStates.get(el);
    const strength = parseFloat(el.dataset.magneticStrength) || 0.3;

    if (dist < MAGNETIC_RADIUS) {
      // Pull element toward cursor
      const pull = (1 - dist / MAGNETIC_RADIUS) * strength;
      state.offsetX += (dx * pull - state.offsetX) * 0.15;
      state.offsetY += (dy * pull - state.offsetY) * 0.15;
    } else {
      // Spring back to origin
      state.offsetX += (0 - state.offsetX) * 0.1;
      state.offsetY += (0 - state.offsetY) * 0.1;
    }

    // Apply transform
    if (Math.abs(state.offsetX) > 0.01 || Math.abs(state.offsetY) > 0.01) {
      el.style.transform = `translate(${state.offsetX}px, ${state.offsetY}px)`;
    } else {
      el.style.transform = "";
    }
  });

  requestAnimationFrame(tick);
}

requestAnimationFrame(tick);

// ── Hide cursor when leaving window ──
document.addEventListener("mouseleave", () => {
  ring.style.opacity = "0";
  dot.style.opacity = "0";
});

document.addEventListener("mouseenter", () => {
  ring.style.opacity = "1";
  dot.style.opacity = "1";
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Magnetic Cursor — stealthisdesign</title>
  <link rel="stylesheet" href="style.css">
  </head>
<body>
  <!-- Custom cursor elements -->
  <div id="cursor-ring" class="cursor-ring" aria-hidden="true"></div>
  <div id="cursor-dot" class="cursor-dot" aria-hidden="true"></div>

  <main class="page">
    <header class="header">
      <span class="eyebrow">Demo 16</span>
      <h1>Magnetic Cursor</h1>
      <p class="subtitle">Hover over the interactive elements below. The cursor ring and target elements are drawn toward each other with spring physics.</p>
    </header>

    <section class="demo-area">
      <div class="button-grid">
        <button class="mag-btn" data-magnetic data-magnetic-strength="0.4">
          <span>Explore</span>
        </button>
        <button class="mag-btn accent" data-magnetic data-magnetic-strength="0.4">
          <span>Create</span>
        </button>
        <button class="mag-btn outline" data-magnetic data-magnetic-strength="0.3">
          <span>Discover</span>
        </button>
        <button class="mag-btn" data-magnetic data-magnetic-strength="0.4">
          <span>Build</span>
        </button>
      </div>

      <div class="card-row">
        <div class="mag-card" data-magnetic data-magnetic-strength="0.15">
          <div class="card-icon">01</div>
          <h3>Spring Physics</h3>
          <p>Lerp-based interpolation creates a natural, organic following motion.</p>
        </div>
        <div class="mag-card" data-magnetic data-magnetic-strength="0.15">
          <div class="card-icon">02</div>
          <h3>Magnetic Zones</h3>
          <p>Elements detect cursor proximity and shift toward it within a configurable radius.</p>
        </div>
        <div class="mag-card" data-magnetic data-magnetic-strength="0.15">
          <div class="card-icon">03</div>
          <h3>Visual Feedback</h3>
          <p>The cursor ring scales and changes color when hovering interactive targets.</p>
        </div>
      </div>

      <div class="link-row">
        <a href="/" class="mag-link" data-magnetic data-magnetic-strength="0.3">Back to Gallery</a>
        <a href="#" class="mag-link" data-magnetic data-magnetic-strength="0.3">View Source</a>
        <a href="#" class="mag-link" data-magnetic data-magnetic-strength="0.3">Next Demo</a>
      </div>
    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>