Components
Loading preview...
A Magnetic Button is a UI component designed to enhance user interaction. When a user's cursor or touch input approaches the button, it subtly moves towards the user, simulating the effect of magnetic attraction. This interaction makes the button more enticing to click and adds a dynamic and engaging element to the user experience. This example was made with Tailwind CSS and Framer Motion.
@bundui
npx shadcn@latest add https://21st.dev/r/bundui/magnetic-buttonimport { MagneticButton } from "@/components/ui/magnetic-button";
function MagneticButtonExample() {
return (
<MagneticButton>
<button className="bg-indigo-500 hover:bg-indigo-600 transition-colors px-10 text-lg text-white py-4 rounded-full">
Magnetic Button
</button>
</MagneticButton>
);
}
export { MagneticButtonExample };