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 ball hops up a staircase that slides down under it, so it climbs forever without going anywhere.
The check mark crashes down from above like a rubber stamp, with a blur-to-focus motion and six ink-splatter dots radiating outward on impact. Dramatic and tactile.
A rubber stamp seen from above presses LOADING onto a sheet at a new angle each time, while the older impressions fade.
Neo-brutalist rubber-stamp interaction: selecting an option scales it down (0.97) with a hard inset shadow, as if physically pressed into the surface. Bold black borders and high-contrast ink-black fills complete the aesthetic.
A five-star rating that is a real radio group. Hovering previews the rating in grey; choosing fills the stars up to it in a quick left-to-right cascade with a springy pop on the one you picked, and a caption says what the score means. Pure CSS with :has().
A steamed-up window with the city blurred behind it. Tick it and a fingertip wipes a tick through the fog, sharp lights showing through and drops running down; untick and the fog creeps back.
A tea-strength slider: the bag bobs in the cup, colour curls out of it into the water, steam rises and the strength word and steeping time change below.
A stencil checkbox: ticking, a metal plate with a tick cut out of it drops over the box, a burst of spray mist puffs, and the plate lifts away to leave a crisp painted tick with overspray round it.
A segmented control whose pill inverts the labels exactly where it covers them, so letters split in two as it slides between tabs.
A favourite checkbox: ticking it slaps a star sticker down at an angle, it flattens out and settles, and a sheen sweeps across it.
Pick a badge from a sticker sheet: it peels up by its corner, flies over and slaps onto the laptop with a glint, and the old one goes back to its spot on the sheet.
Sticky flags on a notepad as to-do tabs: the chosen flag stands up and the note under it settles into place.
Hover and a needle sews a running stitch round the button border, the stitches appearing behind it through pre-punched holes; leave and the stitches unpick in reverse.
The box is a patch of fabric and the tick is sewn in: a needle runs along the tick leaving dashed stitches behind it one by one, then slips away. Unchecking pulls the thread out. Pure CSS.
A disk usage card with a stacked bar of categories: point at a segment or its legend row and that segment swells while the rest dim, and the reading switches to its size.
Story tabs as progress bars: each bar fills while its story plays and moves on by itself, pausing while you hover or focus, with a pause button.
A slider made of five strands drawn through a ring: behind the ring they lie bound together as the fill, and ahead they fan out loose, rippling away from the ring as you drag.
A fasten checkbox drawn as hook-and-loop tape: the strap folds down and presses flat onto the patch; unchecking peels it back up, the loops stretching after it before they let go.
A slider whose fill is three layers of paper: the top one follows the thumb and the ones underneath trail on softer springs, so a drag fans their edges out and they settle back into a stack.
A weekly habit card: check in today and its circle fills from the centre, a tick draws, the streak count rolls up by one and the flame flares.
A password strength meter: a segmented bar below the input fills and brightens from dark gray to near-white as the user types, driven by character analysis.
A single arc runs round a faint ring, stretching while its head pulls ahead and shrinking while its tail catches up.
An opacity slider with an elastic thumb: drag fast and it stretches out behind itself, longer the faster it moves, then snaps back to a circle when you stop.
A to-do row. Checking ticks the box with a pen stroke, then a hand-drawn scribble runs through the task text, out and back, as the text greys out; unchecking rubs it out.
A tuner string picker on a guitar neck: the string you pick is plucked and rings out with a real blur envelope, its peg turns, and the tuner needle swings in and settles on the note.
Section tabs over a taut string with a bead weighing it down at the active tab: the bead slides over and the string twangs when it lands.
Places as tall strips side by side: the chosen strip widens to show its scene and words, its label lying down, while the rest narrow with their labels standing on end.
A slider whose thumb leaves fading afterimages as it moves, like a strobe photograph: spread far apart on a fast drag and bunched up on a slow one.
A line style picker: solid, dashed and dotted are one dash pattern the browser tweens between, and the pattern runs along the line once as it changes.
A saved checkbox drawn as a press stud: the loose cap hovers over its socket with a soft shadow, then presses down and snaps flat with a ring of give and a tick; unchecking pops it back up.
The sun arcs over a sundial and the gnomon's shadow sweeps across the hours, long in the morning, short at noon and long again by evening.
Forty-eight dots laid out the way seeds pack in a sunflower head (each turned by the golden angle and pushed out by the square root of its index), with a wave of light pulsing out from the centre as the head turns slowly. The layout is CSS maths on one index per dot. Pure CSS.
Three dots trade places in pairs, each pair circling round each other with one passing in front and one behind.
The button label slides upward out of frame on hover while a secondary label slides in from below: a clean way to surface a call-to-action hint. Pure CSS transitions, no dependencies.
A night-lights switch: fireflies drift loosely around the track; switching on, they fly over and gather into a glowing ring that becomes the thumb.
Restaurant tabs in italic serif: a calligraphic swash writes itself under the chosen word, ending in a small loop and a flick, while the old one unwrites.
Press on a box and drag down the column: every box you pass takes the same state, ticked or cleared, like painting. Works with a finger too.
A fairground swing ride: set the speed and it spins up with real inertia while the chairs fly further out on their chains.
A swipe-to-complete checkbox: ticking slides the task card aside to show a tick beneath, springs it back, fills its circle and strikes the text through; unticking nudges it the other way.
A deck of cards you fling. Drag the top card and it tilts with the throw while a Keep or Skip stamp fades in by direction; let go far enough and it flies off and tucks in at the back of the deck as the next card rises. Arrow keys swipe too.
Feed tabs over swipeable panels: drag the panels sideways and the underline tracks your finger between the tabs, snapping to the nearest when you let go.
A slide-to-confirm track for actions that should not happen by accident. Drag the knob to the end and the track floods light while the arrow redraws as a check; let go early and it springs home. One registered custom property drives the knob, the fill and the hint, so a single transition animates all three.
A sync checkbox: ticking spins the two sync arrows round and fades them into a ring that draws closed with a tick inside; unticking brings the arrows back.
A tiny synth module: drag the two knobs to shape a live waveform on the little screen. Freq packs more cycles in; Shape morphs it smoothly from sine through triangle and square to saw.
A bottom navigation bar as a radio group. The chosen tab's pill widens to make room for its label, which slides out from behind the icon while the icon fills in with a little bounce; the previous tab folds back to just its outline icon. Pure CSS (the label width animates through grid 0fr to 1fr).
A switch built for the hand: a halo on hover, the thumb stretches as you press it, and you can drag it across with the track filling as you go; let go past halfway and it switches.
A tag field. Press Enter or type a comma and the words you typed turn into a chip right where they were while the cursor glides along; Backspace on an empty field melts the last chip back into editable text. Repeats nudge the existing chip instead of doubling it.
On focus the label slides upward and a light pill badge background expands behind it via scaleX. The label transforms from a plain hint into a bold field identifier tag.