"use client";

import { useRef } from "react";

export function MagneticPulseHero() {
  const ref = useRef<HTMLDivElement>(null);
  const ctaRef = useRef<HTMLAnchorElement>(null);

  function onMove(e: React.MouseEvent<HTMLDivElement>) {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    el.style.setProperty("--x", `${e.clientX - rect.left}px`);
    el.style.setProperty("--y", `${e.clientY - rect.top}px`);

    const cta = ctaRef.current;
    if (cta) {
      const r = cta.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      const dist = Math.hypot(e.clientX - cx, e.clientY - cy);
      if (dist < 170) {
        cta.style.transform = `translate(${(e.clientX - cx) / 9}px, ${(e.clientY - cy) / 9}px)`;
      } else {
        cta.style.transform = "translate(0,0)";
      }
    }
  }

  function onLeave() {
    const cta = ctaRef.current;
    if (cta) cta.style.transform = "translate(0,0)";
  }

  return (
    <div
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      className="relative min-h-[680px] w-full overflow-hidden bg-[#080711] text-white antialiased flex items-center px-10 lg:px-20"
      style={{ ["--x" as string]: "50%", ["--y" as string]: "40%" }}
    >
      {/* cursor-follow glow */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0"
        style={{
          background: "radial-gradient(460px circle at var(--x) var(--y), rgba(167,139,250,0.28), transparent 50%)",
          transition: "background 60ms ease",
        }}
      />
      <div
        aria-hidden
        className="absolute inset-0 opacity-[0.08]"
        style={{
          backgroundImage:
            "linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px)",
          backgroundSize: "46px 46px",
          maskImage: "radial-gradient(circle at var(--x) var(--y), black 10%, transparent 60%)",
          WebkitMaskImage: "radial-gradient(circle at var(--x) var(--y), black 10%, transparent 60%)",
        }}
      />

      <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-10 lg:px-20 py-6">
        <span className="text-[13px] font-semibold tracking-[0.18em] uppercase text-white/85">Velynkit Canvas</span>
        <span className="hidden font-mono text-[11px] uppercase tracking-[0.2em] text-white/40 md:inline">Move your cursor →</span>
      </div>

      <div className="relative z-10 max-w-2xl">
        <p className="mb-5 font-mono text-[11px] uppercase tracking-[0.3em] text-violet-300/70">
          Designed for designers
        </p>
        <h1 className="text-[clamp(44px,6vw,96px)] font-semibold leading-[0.92] tracking-[-0.04em]">
          A canvas with
          <br />
          <span className="bg-clip-text text-transparent" style={{ backgroundImage: "linear-gradient(90deg,#c4b5fd,#f0abfc,#a5b4fc)" }}>
            opinions on motion.
          </span>
        </h1>
        <p className="mt-6 max-w-md text-[15.5px] leading-relaxed text-white/55">
          A prototyping tool with real CSS, real interactions and a magnetic
          feel — what you mock is what you ship.
        </p>
        <div className="mt-9 flex items-center gap-4">
          <a
            ref={ctaRef}
            href="#"
            className="rounded-full bg-white px-6 py-3 text-[13px] font-medium text-[#080711] transition-[transform,background-color] duration-300 ease-out hover:bg-white/90"
          >
            Try the canvas →
          </a>
          <a href="#" className="text-[13px] text-white/55 underline-offset-4 hover:text-white hover:underline">
            See examples
          </a>
        </div>
      </div>
    </div>
  );
}
Cursor Glow Hero

A canvas withopinions on motion.

Dependencies

A canvas with
opinions on motion.
