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
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.