Baktiyar Ablaikhan

Magnetic Button

Source
Aceternity UI ↗
Author
Aceternity UI
Licence
Aceternity UI licence (free component)

Loading…

The button is pulled toward the pointer on a spring inside a dashed hit area.

Code

"use client";
import React from "react";
import { MagneticButton } from "@/lab/aceternity/ui/magnetic-button";

export default function MagneticButtonDemo() {
  return (
    <div className="relative flex h-full w-full items-center justify-center">
      <MagneticButton>
        <button
          type="button"
          className="cursor-pointer rounded-lg bg-linear-to-b from-blue-500 to-blue-700 px-4 py-2 font-medium text-white ring-1 ring-white/20 ring-offset-1 ring-offset-blue-500 transition-transform duration-150 ring-inset active:scale-98"
        >
          Follow @mannupaaji
        </button>
      </MagneticButton>
    </div>
  );
}
Prompt

Build "Magnetic Button", a button animation. What it does: The button is pulled toward the pointer on a spring inside a dashed hit area. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS, using motion. Technique: the Motion library, pointer tracking. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://ui.aceternity.com/components/magnetic-button (Aceternity UI, Aceternity UI licence (free component)).