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.
An abacus counting: a bead clicks across the bottom rod at every tick, and when the rod fills its beads slide home and one bead carries on the rod above.
A counter of ten beads on a rod: drag the gap and the beads slide across one after another, knocking to a stop against the row with a small rebound.
An FAQ card: open a question and its answer slides open to its natural height as the plus turns into a minus, closing the one that was open.
Click to unlock an achievement: the badge flips over from a lock to a glowing medal, rays burst behind it and sparks fly out, and the XP bar fills with the points gained. Click again to reset.
An inbox row you swipe: drag it left and Archive and Delete slide out from under it with some resistance, or right to Flag; let go past halfway and it stays open.
An add-on row in an order summary: ticking gift wrap sends a +4 down to the total, which rolls from $48 to $52 like an odometer, the ones wheel carrying the tens as it passes zero. Clearing rolls it back.
Two hazard-striped doors seal the button. Hover cracks them apart a few pixels; a click slides them open on an angled seam to show a lit ACCESS GRANTED inside, then they close again.
Airplane mode where the thumb is the plane. Switching on, it races down the track, noses up to climb and leaves a dashed contrail behind it; switching off, it levels out and taxis back as the contrail fades. Pure CSS on a native switch.
Text alignment buttons above a paragraph of placeholder lines. Choosing left, centre or right slides every line across to its new edge one after another; justify stretches all but the last line to the full width. Pure CSS: each line knows its own width, and one --k (0, 0.5, 1) says how far across it goes.
A tear-off desk calendar card: click it and today's page tears free from the binding, twists and drops away, showing tomorrow underneath.
Waypoints on a mountain: choose base, camp or summit and the climber follows the zigzag trail up or down to it, the walked trail drawing behind them, and the altitude rolls.
An ampersand written in one unbroken stroke behind a glowing nib, held for a moment, then wiped away from where it began.
An optical illusion: a cloud of blocks hanging at different depths looks like nothing, until the camera swings head-on and they line up into one clean tick.
A dial for gradient angles: drag round the ring and the hand follows, pulling toward each 45-degree mark (Shift snaps to 15), the nearest tick lights, and the number field and a live gradient swatch follow.
An exam form with timing marks and a cut corner, the sort you fill in with a soft pencil. Tick it and a pencil scribbles the oval in, going over the lines a bit.
An aperture picker: choose f/1.8, f/4 or f/11 and six iris blades turn in or out over the light, leaving a wide or a tiny hexagonal opening.
A camera iris. Six overlapping blades swivel outward together to open a hexagon onto the lens glass, and swivel back to shut it. Pure CSS on a native switch: each blade is one rotated, translated plane.
Power sources as tabs: an electric arc jumps from the old source to the new one, crackling and flickering for a moment before the new node lights.
A high-voltage switch: off, two dim electrodes sit apart; on, a crackling arc jumps the gap and never holds still, the electrodes glow and the track lights faintly.
A volume slider drawn entirely in monospace characters, [=====> ] style: the bar redraws one character at a time and the head spins while you drag.
Sixteen scattered particles fly in from all sides and lock together into a block, the block turns a quarter, then bursts apart in new directions and gathers again.
Three bars lying as one line fan out into a six-point star, then fold shut again as they keep turning.
A glowing nucleus with three electrons on orbits tilted 60 degrees apart, each racing round its own ellipse at a different speed. The orbits are rotated boxes and each electron rides an elliptical offset-path inside its own. Pure CSS.
Three blurred light blobs of different brightness drift slowly behind the card content; on hover the aurora blooms brighter and wider. Pure CSS keyframes, no dependencies.
Blurred bands of light drift around the input on focus: a conic gradient whose start angle rotates via an animated @property. When unfocused, the glow fades out.
An auto-accept setting that acts it out: ticking brings in a cursor of its own, which glides over to the box, clicks it with a ripple and glides away as the tick draws in.
A profile card whose signature writes itself on the line when you hover, the name first and then the flourish, at a pen's pace.
A switch that turns itself off, like a stairwell light: on, the track's own outline drains away as a countdown, with the time left under the label. Hovering or focusing it pauses the timer.
A save and spend split drawn as a balance scale: the heavier pan tips down, overshooting a little before it settles, and the reading shows both shares.
A name in foil letter balloons on strings: each letter inflates with a wobble and bobs on its own clock, and a deleted letter is let go and floats away.
A lift off switch drawn as a hot air balloon: the burner flares, the slumped envelope fills out, then the balloon rises and bobs as its shadow shrinks; off lets it sink back down.
An I voted checkbox: ticking it drops the folded ballot down through the slot into the box with a little thunk; unticking lifts it back out.
A time range whose fill is a rubber band looped round two pegs: it thins as you pull the pegs apart and thickens as they close, buzzes as you drag and twangs when you let go.
A brushed-metal bank card. On hover it lifts and tilts, the contactless waves pulse, and the masked number scrambles into view digit by digit, left to right; leave and it masks again.
A barber pole: the striped glass tube turns forever, its stripes climbing endlessly between the domed caps.
A bass slider as a speaker: the woofer cone pumps harder and throws a wider shock ring around the cabinet the more bass you add.
A battery charging: its four cells light one at a time with a hard step, then the full battery blinks twice and drains to start again. A bolt is cut into the fill, so it only shows through where the cells are lit. Pure CSS.
A lighthouse on its rock: the beam sweeps round, narrowing and flaring as it faces you, then swings out the other side, over a slow rolling sea.
A name bracelet: every letter is a bead that slides along the cord into place and clicks against the last, and deleting slides one off the end.
A metal hilt as a switch. Switching on shoots a blade of white light out of the emitter with a soft halo that hums (a faint flicker) while it is lit, and the button on the hilt glows; switching off draws the blade back in, faster than it came out. Pure CSS on a native switch.
A notify me button: pressed, the bell swings and settles with its clapper a beat behind, sound rings ripple out from it and the label confirms you are on the list.
A bento-box dashboard whose four tiles reshuffle into a new layout every couple of seconds, each gliding and resizing to its new place without overlapping the others for long.
A bike gear picker on the drivetrain: choosing climb, cruise or sprint moves the chain onto the big, middle or small rear sprocket, the derailleur shifts and the speed rolls, while the crank keeps pedalling.
A byte counting up in lit bits, nibble by nibble, with its hex and decimal value counting beside it. It wraps from 255 back to zero and keeps going.
Two stars of different sizes orbit their shared centre with comet trails behind them, while a small planet circles both on a wider, slower path.
A debug-flag switch: a byte of zeros flips to ones bit by bit in a wave from the left, and back from the right when switched off.
A ring binder with index tabs down the edge of the page: the chosen tab pulls out and the page turns to its section.
A switch with two valleys and a hill between them, like the spring inside a real one: the ball climbs slowly over the hump, then drops into the other valley and rocks there before it settles.