Animation Library

Magnetic Button

CTA button with magnetic pull, pill morph on hover, elastic snap-back, and celebratory confetti burst on click.

ButtonHoverGSAPConfetti
Asset previewStage · 16 : 10
Web · React + GSAPLive
transform · hoverconfetti burst
01 · About

Pointer proximity within a radius translates the button and label with separate strengths.

Pointer proximity within a radius translates the button and label with separate strengths. Hover swaps copy and morphs the border radius to a pill with accent fill.

Click triggers a scaled press animation and yellow confetti burst from the button center.

02 · Metadata
Status
Production ready
Category
Button
Engine
GSAP
Platforms
Web
Last updated
May 2026· v1.0.0
03 · Technical notes
Implementation

Uses @gsap/react useGSAP for scoped listeners and elastic easing on leave.

Confetti pieces are ephemeral DOM nodes removed after the GSAP timeline completes.

04 · Use cases

  • Primary CTAs

    Hero and featured cards where the button should feel tactile.

  • Library entry points

    Encourage exploration with satisfying click feedback.