288 animated UI components: buttons, toggles, checkboxes, inputs, loaders, radios and cards. Zero dependencies for most, Framer Motion for a few, with a plain HTML/CSS version of each. MIT-0.
Arcade tabs in a claw machine: the claw lowers the tab it holds back into its slot, rides the gantry to the one you pick, swinging on its cable, then grips it and lifts it out.
Soft clay morphing: selecting an option triggers a squish animation on the indicator dot (scaleX 1.3, scaleY 0.7 then spring back to 1,1), with a soft tonal fill and layered soft shadow. Feels like pressing a clay button.
A framework picker that is a real terminal prompt: the caret and the highlight spring down to the line you pick, its dot fills, and the next step types itself out with a blinking cursor.
A silver dome over a plate: ticking runs a glint across the dome, lifts it up and away with a tilt, and the dish underneath is the tick, with a puff of steam. Clearing puts the dome back down.
A world clock: pick a city and the hands swing round to its local time with a little overshoot, while the seconds hand keeps ticking.
A small clock face with twelve ticks: the minute hand sweeps round once a beat while the hour hand creeps along at a twelfth of the speed, so time visibly passes while you wait. Pure CSS.
A world clock as tabs: pick a city and the clock hands spin forward to its local time, the minute hand whirling through the hours in between.
A one-time code field drawn as six cells. Digits roll up into their cell and a caret blinks in the next one; when the sixth lands, the cells slide together into one pill and a tick pops beside it. One real input underneath, so paste and SMS autofill just work.
A weight bobs on a spring hanging from a bar. The coil stretches open as the weight drops and bunches tight as it rises, with the back half of every turn drawn dimmer so it reads as a helix.
A tip jar checkbox: ticking drops the coin into the slot, the machine clunks and its little display lights with a tick; unticking pops the coin back out.
A spun coin wobbles lower and faster until it rattles flat, then is flicked up onto its edge to spin again.
A tip slider as a stack of coins: every dollar drops another coin onto the stack with a bounce, and taking one off lifts it back into the air.
Five dots (each a step lighter than the last), bouncing vertically in a rolling wave. A tonalul take on the classic typing indicator. Pure CSS, no dependencies.
A solid mid-gray overlay slides up from the bottom on hover, fully covering the card with secondary content. Pure CSS transitions, no dependencies.
A page layout that reflows from one to six columns, the blocks springing to their new places one after another.
A safe dial: spin it by dragging round, scrolling with the arrow keys, read the number under the marker, and enter three numbers in turn. When all three are set, the bolt slides open.
A slider made of fine ticks that rise around the thumb like a magnified dock, lean the way you drag, harder the faster you go, and stand back up when you stop.
A conic-gradient ring that spins like a comet tail: gray-to-white arc on a masked circle. Pure CSS, no dependencies.
A before-and-after comparison: drag the divider across two versions of a page and each side reveals more of its version, with the label on each.
A compass card whose needle swings toward the cursor anywhere on the page with a damped wobble, overshooting and settling like a real needle; left alone it hunts gently. The heading and direction read out below.
A chat composer. The box springs taller line by line as you write (up to a limit, then it scrolls) with the send button riding its bottom edge; the button wakes up as soon as there is text, and sending lifts the message out of the box into the thread above as the box springs back to one line.
On click, 22 grayscale rectangular particles are spawned from the click point inside a relatively-positioned wrapper. Each particle flies outward in an evenly distributed radial spread with slight randomness, rotating and fading over 500–900ms via CSS custom properties (--tx, --ty, --rot, --dur) and a single @keyframes rule. Particles are removed from the DOM after animation. No dependencies.
On check, 8 grayscale confetti pieces (alternating rectangles and circles) burst radially outward from the center in all directions, rotating and fading as they travel. Playful and celebratory.
For a setting you should not turn off by accident: on is one press, but off stops the thumb halfway and asks for a second press while a short timer runs out; leave it and it springs back on.
A line traces a spiral through a three by three grid like an unlock pattern, lighting each dot it reaches, then fades out.
Drifting points of light fill the button and wire themselves together whenever they pass close. Move the cursor over it and nearby nodes reach out to it with lines and drift toward it.
Make a wish: every letter you type becomes a star in the night sky above the field, joined to the previous one by a line that draws in, and the whole figure glides to stay centred as it grows.
On selection, five star dots appear around the option with SVG connecting lines forming a mini constellation. Each star twinkles with a looping opacity animation. Feels like the option is cosmically chosen.
Constellations as tabs: the stars glide into the next shape, the old lines vanish and the new ones draw themselves in once the stars arrive.
A cover photo picker on a darkroom contact sheet: two strips of film with sprocket holes and edge numbers, and a grease pencil that loops the frame you pick while the old mark smudges away.
Vertical tabs set like a contents page: italic numerals, and a leader line that draws out to the chosen chapter as its page fades in.
A unit converter in one field: type a value with a unit (km, mi, m, ft, kg, g, lb, °C, °F) and every conversion in that family appears below, each number counting to its new value as you edit.
Parcels ride a moving belt over turning rollers, then tip over the end and drop off, one after another.
Accept cookies, taken literally: ticking takes two bites out of the cookie, crumbs fall from the edge and the cookie jolts with each chomp. Clearing makes it whole again.
A rolling pin smooths the dough, then the cutter you pick lifts off the bench, presses into the dough and leaves its shape cut out.
A launch countdown: days, hours, minutes and seconds on rolling digit reels that spring to each new value, with a small ring draining once a minute in the corner.
A film leader counting down 5 to 1: a wedge sweeps round the rings each second while the frame jitters and the grain flickers.
A character counter and progress bar slide in below the input on first focus or keystroke. The counter and bar color shift from dim → light gray → white as the character limit approaches. Both slide away again when the field is empty and blurred.
An SVG circular ring fills via stroke-dashoffset around a character count badge as the user approaches the limit. The ring brightens from mid-gray to white near the maximum.
Each click increments a visible counter badge inside the button. The badge pops with a spring-overshoot scale keyframe animation on every increment, re-triggered via the removeAttribute/offsetWidth/setAttribute pattern.
A promo code on a coupon: a valid code sends scissors round the dashed edge, cutting it out so it lifts off the page; a wrong one makes it shake.
A Newton's cradle switch: the raised ball at one end drops and strikes the row, and the impact lifts the ball at the far end, which stays up. Switching back runs it the other way.
A tower crane whose jib is the track: drag the trolley out and the load swings behind it on its cable and settles.
An aspect ratio picker: choose 1:1, 4:5 or 16:9 and the crop frame reshapes over the photo with a little overshoot, dimming everything that falls outside it.
An expected guests slider drawn as a room of seats: people pop into their seats in a scattered order as the number grows, the way a room fills up.
A tiny CRT screen checkbox: ticking powers the tube on from a line to a glowing tick behind scanlines; unticking collapses the picture to a line, then a dot that fades.
A tiny CRT screen as a power button. A click switches it off the way old tubes did: the picture collapses to a bright line, then a dot, and an afterglow lingers. Another click powers it back up with a flicker.
Channels on an old television: the picture squeezes to a bright line and a dot, swaps, then springs back open on the new channel.