Buttons
Animated React Button Components
Magnetic pulls, ember glows, shimmer sweeps, and tactile press states for React buttons. Each component ships as one TypeScript file styled with Tailwind that you can copy-paste or add with the CLI. They stay fully keyboard-accessible and fall back gracefully under prefers-reduced-motion.
A magnetic button with the heft of forged iron — it leans toward the cursor with damped spring lag, snaps back elastically on exit, and presses like an anvil strike: sharp compression, slow spring recovery, hairline white flash at the base edge.
An animated gradient border cycling silver to blue to violet, like electroplating in progress. Hover accelerates the rotation and thickens the ring by a pixel. Pure CSS via a masked conic gradient.
A stateful submit button that runs its async lifecycle like a piston stroke: label and spinner slide along one axis while the width breathes, a check draws itself on success, and rejection plays a shake-and-retry beat. Pass an async onClick and it owns the state machine — aria-busy, live announcements, and real disabling included.
A celebration button: click it and a seeded plume of glowing sparks erupts upward, arcs out under gravity, and fades while the pill gives a satisfying squash-and-settle. Optionally latch into a success state with a settling checkmark. Seeded canvas particles torn down the instant they fade; under reduced motion the burst becomes a calm glow-and-check.
A click ripple that expands from the exact point of contact, like hot metal hitting water: a thin shockwave, a briefly desaturated cooled core, and ejected spark particles. Keyboard activation ripples from center.
A Material-style ink ripple that blooms from the exact point of contact, with a spring press-dip and rebound. Concurrent ripples stack; keyboard activation blooms from center.
A shimmer-sweep button. A white-silver light periodically crosses the face and brightens the rim, settling through a subtle neutral afterglow back to matte. Pure CSS, zero dependencies.
A light beam traveling the border in a continuous loop like a welding arc: a blinding white-hot head with a cool blue-white tail, corner sparks, and a fading heat discoloration. Pure CSS, corner-radius aware via offset-path.