Magnetic, bordered, liquid — the smallest hero on the page.
12 effects
light Clicking “Add to bag” clones the product image and flies it along a cubic bezier arc — shrinking and tilting — into the header bag, which squash-bounces while the badge count rolls up and the button wipes to a drawn-check “Added”.
light Four buttons on a membership page: on hover or focus a slanted lime pane sweeps across in 0.55s power3.out, carrying a counter-moving copy of the label so the text inverts exactly under the fill, then leaves through the far edge.
light Buttons, list rows, chips, icon buttons and a FAB each spawn a translucent circle of ink at the exact press point (keyboard: the centre); it scales to the farthest corner in 0.55s, holds while pressed, then fades out and removes itself.
light A pill "Celebrate" button squashes on press and launches pooled canvas confetti — rectangles, discs and thin ribbons — that spin, flip and flutter down under gravity and drag, while the label rolls to a drawn check "Celebrated".
light A product card and a control panel where every button, switch, segment and record key compresses to 0.94 and sinks 2px on pointer or key down, then springs back with back.out(3) on release or when the press is cancelled by sliding off.
light An invite form refuses an invalid submit: each field that needs attention jitters 10px left and right four times with a shrinking range (0.5s total), lands exactly at 0, turns red and shows a message saying what to fix.
light Click → the pill collapses to a circle holding a spinning arc, waits, then the arc morphs into a tick while the fill floods green and the pill re-expands around "Done"; a second button plays the declined variant with a red cross and a shake, then both reset.
light Three pill buttons flood with colour from the exact pointer position on hover: a clip-path circle grows from the entry point and the label inverts as the edge passes it; clicks add a translucent burst and a press squash.
light Luxury CTAs whose label is two stacked SplitText copies in a mask: on hover the top characters roll up and out while the second copy rises in, 0.02s apart, as the arrow slides out and its twin slides in and a hairline draws across.
light Three button variants share a 1px conic-gradient ring that orbits forever via a GSAP-tweened --angle; hovering triples the orbit speed, sweeps a highlight across the face and rolls the label up to a second copy. Active presses scale to 0.97.
light Three pill buttons attract toward the pointer inside an invisible radius, their labels leading slightly for parallax, flood with colour from the entry point, and spring back with an elastic snap on leave.
light Four triggers spawn stacked toasts bottom-right: each slides in from x 40 with a back.out overshoot while earlier toasts shift up via Flip, an icon draws itself with DrawSVG, a hairline counts down 4s (pausing on hover) and dismissal re-flows the stack.
No effects match these filters.
Try “pinned”, “SplitText”, “WebGL”, “cursor”…