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)).