Gravity Button

A magnetic wrapper that pulls any control toward the pointer on a spring, with a parallax inner layer and a field outline while engaged.

Customize

Strength40%

Radius24px

Parallax30%

Stiffness170

Damping18

Field outline

Usage

import { GravityButton } from "@/components/lazy-ui/gravity-button";

export function Demo() {
  return (
    <GravityButton strength={0.45} radius={26}>
      <button className="rounded-lg bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white dark:bg-white dark:text-neutral-900">
        Hover me
      </button>
    </GravityButton>
  );
}