CrystalMagneticButton

GSAP-powered button that follows the cursor within its bounds and snaps back on leave.

CrystalMagneticButton creates a button that subtly follows mouse movement with configurable strength. On mouse leave, it snaps back to center with elastic easing. Renders as either <button> or <a>.

Open in Storybook→

Import

import { CrystalMagneticButton } from '@artasce/crystal-ui';

Usage

<CrystalMagneticButton>Start a Project</CrystalMagneticButton>
<CrystalMagneticButton variant="outline" as="a" href="#work">View Work</CrystalMagneticButton>

Props

CrystalMagneticButton Props

Token	Variable	Value	Description
`children`	`ReactNode`	(required)	Button content
`variant`	`'solid' \| 'outline'`	'solid'	Visual style
`as`	`'button' \| 'a'`	'button'	Element type to render
`href`	`string`	—	Link destination (when as="a")
`strength`	`number`	0.3	Magnetic pull strength (0-1)
`className`	`string`	—	Additional CSS classes

Values update live with theme changes. Click any row to copy the CSS variable.

All standard <button> HTML attributes are also supported.

Examples

CTA Pair

<div className="flex gap-4">
  <CrystalMagneticButton>Start a Project</CrystalMagneticButton>
  <CrystalMagneticButton variant="outline" as="a" href="#case-studies">
    View Work
  </CrystalMagneticButton>
</div>

Stronger Effect

<CrystalMagneticButton strength={0.5}>Magnetic</CrystalMagneticButton>

How It Works

Uses onMouseMove to calculate cursor offset from button center, then gsap.to with power2.out easing for smooth follow. On onMouseLeave, snaps back with elastic.out(1, 0.3) for a satisfying bounce. Respects prefers-reduced-motion.