MagneticButton

magneticbutton-1779394345640.tsx

'use client'
import { useState, useRef } from 'react'

export default function MagneticButton({ label = 'Hover me ✨', strength = 30 }) {
  const [pos, setPos] = useState({ x:0, y:0 })
  const ref = useRef(null)
  const onMove = (e) => {
    const rect = ref.current.getBoundingClientRect()
    const cx = rect.left + rect.width / 2
    const cy = rect.top + rect.height / 2
    setPos({
      x: (e.clientX - cx) / rect.width * strength,
      y: (e.clientY - cy) / rect.height * strength,
    })
  }
  const onLeave = () => setPos({ x:0, y:0 })
  return (
    <div style={{ display:'inline-block', padding:'16px' }}>
      <button
        ref={ref}
        onMouseMove={onMove}
        onMouseLeave={onLeave}
        style={{
          transform: 'translate(' + pos.x + 'px,' + pos.y + 'px)',
          transition:'transform 0.2s cubic-bezier(0.25,0.46,0.45,0.94)',
          background:'linear-gradient(135deg,#6d28d9,#2563eb)',
          color:'#fff', border:'none', borderRadius:'14px',
          padding:'16px 32px', fontSize:'16px', fontWeight:700,
          cursor:'pointer', boxShadow:'0 6px 20px rgba(109,40,217,0.35)',
        }}
      >{label}</button>
    </div>
  )
}

Component info

CategoryAnimations

Frameworkreact

TierFREE

Copies0

About

Magnetic hover button that follows cursor movement with spring physics

More from Animations

'use client'
import { useState, useEffect } from 'react'

const STRINGS = ['Build faster.', 'Ship better.', 'Design smarter.', 'Scale effortlessly.']

export default function TypingAnimation({ strings = STRINGS, speed = 80, pause = 1500 }) {
  const

TypingAnimation

Animations

'use client'
export default function PulseIndicator({
  label = 'Live',
  color = '#10b981',
  size = 12,
  rings = 2,
}) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:'10px' }}>
      <div style={{ position:'relative', widt

PulseIndicator

Animations

'use client'
import { useState } from 'react'

function Shimmer({ w = '100%', h = '16px', r = '6px' }) {
  return (
    <div style={{
      width:w, height:h, borderRadius:r,
      background:'linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%

ShimmerCard

Animations

'use client'
export default function GradientText({
  text = 'Empire UI',
  size = '48px',
  gradient = 'linear-gradient(90deg, #6d28d9, #2563eb, #0891b2, #10b981, #6d28d9)',
}) {
  return (
    <div>
      <style>{'@keyframes flow{0%{background-posi

GradientText

Animations