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.
A lock switch: the thumb carries a padlock whose shackle stands open while it is off. Switching on slides it across and drops the shackle shut with a little bounce and a jolt of the body; switching off pops the shackle back up. Pure CSS on a native switch.
A callback number on a pager: digits light up on the seven-segment screen as you type, and a complete number makes the pager buzz and ring.
An open book whose pages turn over one after another, each brightening as it lifts past the spine and settling on the left.
A frying pan dips and flicks, the pancake flips over in the air and lands back with a squash, again and again.
An attach receipt checkbox: ticking it, a paperclip slides down onto the crooked receipt and grips it, and the paper springs level under it.
A paper plane loops the loop along a dotted flight path, banking to follow every curve, then flies out and round again.
A paper size picker: choose A5, A4 or A3 and the sheet grows or shrinks against dashed outlines of the other sizes, with its size in millimetres underneath.
A paper weight picker: a sheet held in a bulldog clip droops under its own weight, and springs limper or stiffer as you change the stock, wobbling before it settles.
Walk tabs over a landscape in layers: switching slides the far hills a little, the near ground a lot and the place name furthest, so the scene has depth.
Small particles burst outward from the input corners on focus via absolutely positioned spans with staggered CSS animations. A festive, energetic focus confirmation.
The label is redrawn from every inked pixel of the word, one canvas particle each, springing to its home. The cursor brushes the particles aside like dust and a click blows the word apart, weakening the spring for a moment so it drifts before pulling back together.
A segmented range picker whose labels step up out of the way as the pill slides beneath them, more the faster it goes, then settle back.
Trips as tabs: pick a country and its entry stamp slams onto the passport page, giving the page a jolt.
Phone lines on a switchboard: the plug lifts out, arcs to the new jack and pushes in, and the cord swings after it on real rope physics until it hangs still.
A lock button with a 3x3 pattern pad. Drag through four or more dots to unlock: each dot lights with a springy halo and a glowing line follows your finger. Too short a pattern shakes it off; a plain click plays a demo pattern for you.
Pay in 4 at checkout: ticking splits the price bar into four equal parts with gaps opening between them, the first part (due today) lights up, and the amount rolls over from $48.00 to 4 × $12.00.
Press and hold a file tile to peek at it: a ring fills round the tile while you hold, the rest of the card blurs, and a larger preview grows out of the tile until you let go.
A password field whose show/hide toggle is a living eye. Hidden, the eye is shut; showing the password blinks it open, and while it is open the pupil follows your caret along the text.
A switch that previews the change before you make it: on hover the thumb leans toward the other end, the track hints at the next state and a line under the label says what a press will do.
A sticker on a card. Hovering curls its corner; drag the corner and it peels back along a true fold line (the perpendicular bisector of corner and pointer), the sticker clipped on one side and its paper underside mirrored on the other, revealing what is beneath. Pull far enough and it comes off; click the corner to stick it back.
A coverage slider whose fill is a strip of masking tape with its end folded back: drag back to peel it up, with the flap lifting higher the faster you pull, and forward to press it down.
A laundry out checkbox drawn as a washing line: a note hangs crooked from one peg until a second peg drops in and clips the other corner, and the note swings straight to show its tick.
A checkbox with a pencil in it: ticking, the pencil sweeps in and sketches a hand-drawn tick; unticking, it flips round and the eraser scrubs the mark out, shedding crumbs.
A pencil twists in a sharpener while a curled shaving grows out of it, then it pulls out with a fresh point and goes back in.
A switch that saves to a server: the thumb moves at once and a spinner runs inside it until the save lands, then it ticks. If the save fails, the thumb shakes and slides back, and the line under the label says so.
A pendulum wave seen from above: twelve bobs swing at slightly different periods, so they fall in and out of step, forming snakes, travelling waves and apparent chaos before lining up in unison again every twelve seconds.
A pot of pens: the one you pick lifts out, flies to the card and writes a line in its own stroke (grainy pencil, swelling brush, flat marker, fine ink), then drops back in.
An edit mode switch drawn as a fountain pen: switching on, the cap slides off the nib and parks behind the barrel, and the nib writes a little line of ink.
The tick drawn with the pen tool: ticking brings in a pen cursor that clicks three anchor points with a path following it, drags a bezier handle out of the last one, and then the anchors go and the path becomes the finished tick.
A progress ring with a percentage that loads the way real progress feels: a quick start, a long slow middle, a stall near the end, then the last stretch at once, a tick, and round again.
A watch switch drawn as a periscope: it rises out of the water with a ripple and turns to look both ways; off lowers it back under with another ripple.
A moon phase picker: choose new, crescent, gibbous or full and the shadow slides across the cratered moon while its glow grows towards full.
Pick a day of the lunar month and the moon shows its phase with a true curved terminator, over a track of little moons.
Multi-select on a photo grid: a picked photo pulls in from the edges of its tile, a check pops into its corner, and the count above updates.
Song section tabs as piano keys: the key you choose stays pressed down, and a note floats up from it each time you play a new section.
Route a letter to a team: pick a cubby and the envelope comes out of its hole toward you, crosses the rack and slides into the new one, which gives a little knock as it lands.
A savings amount with a piggy bank: every digit drops a coin in the slot with a jiggle, deleting pops one back out, and the pig grows rounder as the amount rises.
A day picker as a weekly pill organiser: the chosen lid flips open on its hinge with a little spring and the pills inside rattle, while the last lid snaps shut.
A weekly pill organiser: pick a day and its frosted lid snaps open on the hinge, the pills inside give a little rattle, and the day you left shuts.
Neumorphic soft UI: unselected options have raised outer shadows creating a pillowed surface. Selecting presses it inward with dual inset shadows (dark and light), simulating a physical depression on a soft matte charcoal surface.
At rest it is a small chip with a speaker icon and the value; hover, focus or tap it and it unfolds into a full volume slider, then folds back once you are done.
A launch switch like a pinball lane: the plunger compresses and fires, the ball rattles off the end and drops into the hole, which lights up. Off, the ball rolls back.
A meeting place field: type a city and once it can only be one place, a pin drops onto a dotted world map where it is, a ripple rings out and the country appears in the field.
A rack and pinion: the track is a toothed rack and the thumb a gear that turns as it rolls along, its teeth meshing with the rack, the travelled length inked.
Notes on a corkboard: the pin pulls out of one note, arcs over growing as it lifts, pushes into the next and that note swings straight while the old one tilts.
A paper pinwheel on a stick: a gust spins it up hard, it coasts down almost to a stop, and the next gust catches it.
A deploy pipeline that runs itself: build, test and deploy each spin while they run, tick and hand off along a filling connector to the next, with a log line under the stages narrating every step until it reads Deployed.
An oscilloscope frequency slider: the wave on the screen tightens and runs faster as the pitch climbs, with the reading in hertz across three octaves.