Magnetic Button

A button that moves slightly when hovered, creating a magnetic effect. It follows the cursor within a set radius and returns to its original position when the cursor leaves. Use it to add subtle visual feedback to interactive elements.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/magnetic-button

npx layro-cli add @educlopez/magnetic-button

npx layro-cli add @educlopez/magnetic-button

bunx layro-cli add @educlopez/magnetic-button

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { Slot } from "@radix-ui/react-slot";
import { cn } from "@/lib/utils";
import { cva, type VariantProps } from "class-variance-authority";
import { motion, useReducedMotion, useSpring } from "motion/react";
import type { ButtonHTMLAttributes, ReactNode } from "react";
import { useCallback, useEffect, useRef, useState } from "react";

const magneticButtonVariants = cva(
  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    defaultVariants: {
      size: "default",