ButtonsSpring

Gravity Button

A spring button face and soft shadow that pull toward the cursor.

"use client";

import { motion, useSpring } from "framer-motion";

function clamp(value, max) {
  return Math.max(-max, Math.min(max, value));
}

export default function GravityButton() {
  const config = {
    label: "Button",
    bgColor: "#111827",
    textColor: "#dbeafe",
    shadowColor: "#3b82f6",
    radius: 999,
    pull: 0.35,
    stiffness: 300,
    damping: 18
  };
  const x = useSpring(0, { stiffness: config.stiffness, damping: config.damping });
  const y = useSpring(0, { stiffness: config.stiffness, damping: config.damping });
  const shadowX = useSpring(0, { stiffness: config.stiffness, damping: config.damping });
  const shadowY = useSpring(7, { stiffness: config.stiffness, damping: config.damping });

function move(event) {
    const rect = event.currentTarget.getBoundingClientRect();
    const dx = event.clientX - (rect.left + rect.width / 2);
    const dy = event.clientY - (rect.top + rect.height / 2);
    const tx = clamp(dx * config.pull, 12);
    const ty = clamp(dy * config.pull, 12);
    x.set(tx);
    y.set(ty);
    shadowX.set(-tx * 0.4);
    shadowY.set(7 + ty * 0.3);
  }

function leave() {
    x.set(0);
    y.set(0);
    shadowX.set(0);
    shadowY.set(7);
  }

function press() {
    y.set(3);
    window.setTimeout(() => y.set(0), 160);
  }

return (
    <div onClick={press} onPointerLeave={leave} onPointerMove={move} style={{ position: "relative", display: "inline-block" }}>
      <motion.div
        aria-hidden="true"
        style={{
          x: shadowX,
          y: shadowY,
          position: "absolute",
          inset: 0,
          borderRadius: config.radius,
          background: config.shadowColor,
          filter: "blur(8px)",
          scale: 0.94,
          pointerEvents: "none"
        }}
      />
      <motion.button
        style={{
          x,
          y,
          position: "relative",
          zIndex: 2,
          padding: "12px 28px",
          borderRadius: config.radius,
          background: config.bgColor,
          color: config.textColor,
          border: "1px solid rgba(148, 163, 184, 0.34)",
          cursor: "pointer",
          fontSize: 14,
          fontWeight: 600
        }}
      >
        {config.label}
      </motion.button>
    </div>
  );
}