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 mechanical keyboard key. Pressing it travels down as its side wall shrinks; checked, it latches half-way down like Caps Lock and the LED on the cap glows. Pure CSS.
A hotel key-slot switch: on, the card slides down into the reader, the signal bars fill one by one and the light turns on. Off, it pops back up at an angle.
A checkbox on a tiny animation timeline: ticking scrubs the playhead along the track while the tick draws in step with it, the span between the keyframes fills in, and an end keyframe pops in where the playhead stops.
A six-digit code cut into a key: each digit grinds a notch to its depth with sparks and drops into its cell below, and the finished key slides into the lock and turns.
API keys as real keys on a ring. Brush past and they jingle; pick one and it swings to the front. Its teeth are cut from the key itself, so no two look alike.
A note picker drawn as a two-octave keyboard: the key under the thumb goes down and darkens, its neighbours dip a little, and the note name rides above.
Tool tabs as keyboard keys: the active key stays pressed down with its light on, and the number keys switch tabs like shortcuts.
A glazed tile as the checkbox: ticking cracks it along a jagged tick, then gold runs into the crack from end to end, the way a broken bowl is mended. Clearing lets the gold fade and the tile is whole again.
A parcel weight field on a kitchen scale: the plate sinks and the needle swings round to the weight you type, a parcel on top grows with it, and past 5 kg the needle strains at the stop.
A diamond kite swoops and climbs through a lazy figure of eight on its string, its tail of bows rippling behind it.
A lab knife switch for main power: the blade drops from upright into the contact clips with a bounce and a spark, and the lamp on the base comes on. Off, it swings back up.
The thumb is a hole cut through the plate: you see the ribbed surface underneath through it, its rim casts a shadow inside, and the plate lights up around it as it slides.
A label field typed on a label maker: the letter wheel turns to each letter, the handle squeezes, and the letter is punched up out of the tape as it feeds out longer.
A library bookcase with a rolling ladder: pick a section and the ladder rolls along the rail to it, its wheels turning and its weight lagging as it starts and stops.
Reading tabs under a hanging lamp: the lamp swings over to the tab you pick, sways and settles, lighting it with a cone of light.
A folded paper lantern on a string: ticking drops it open with a bounce and a little swing, and the candle inside catches with a flicker so the tick painted on the paper shows against the light. Clearing puts the light out and folds it back up.
A dash laps a rounded-square track like a car on a circuit: it stretches out on the straights and bunches up as it brakes into each corner.
The check mark draws itself with a glowing white laser effect using stroke-dashoffset animation and a pulsing drop-shadow filter. Visually distinct from draw-check: hot, fiery, continuous glow.
An outlined label waits to be engraved. On hover a laser line sweeps across the button, filling the letters in solid behind it and throwing sparks from the beam, then switches off once the pass is done.
On focus a white laser beam sweeps left-to-right along the bottom border via scaleX keyframe (300ms), leaving a persistent glowing hairline underline.
Meal tabs caught with a rope: the loop loosens, flies over spinning, drops wide round the new label and cinches tight, the rope trailing off to a hand.
A latte art picker on a cup seen from above: choosing heart, tulip or rosetta pours the new pattern in from where the milk lands, while the old one swirls away into the crema.
Click to launch: the button counts down T-3, T-2, T-1 while it rumbles and its engine flickers, then lifts off with a full flame and smoke puffs fanning along the ground, drops back in and lands with a bounce.
A lava lamp. Blobs of wax drift up from a warm pool at the bottom, stretch, pinch off and melt back into it, merging whenever they touch. The goo is a blur + contrast filter on the layer, so there is no SVG filter or id to collide. Pure CSS.
Hover explodes the card into its stacked layers in isometric view, like a design file: surface, media, text and action float apart in depth, each labelled with its name.
Map layers in a 3D stack: choose map, satellite or terrain and that layer rises to the top of the stack and lights, while the others settle beneath it.
A layout grid setting with a tiny artboard as its picture: ticking drops four columns over the artboard one after another, and the two cards on it, a pixel or two out, snap onto them. Clearing lifts the grid off.
A view switcher (grid, list, feature) whose preview actually rearranges: the four tiles glide and resize into the new layout one after another with a springy settle, so you see what you are choosing. Pure CSS (each layout is a set of positions picked with :has()).
A horizontal radio group styled as neumorphic LED indicator buttons. Unselected state is a dark recessed circle with deep inset shadows. Selected state lights up as a glowing white LED: radial gradient from bright center to deep gray, multi-layer glow box-shadow, and a slow repeating pulse.
Search that starts as a magnifying glass. Focusing it stretches the glass's ring sideways into the field itself while the handle tucks away and a small lens settles inside; empty it and click away and it shrinks back into the glass. Pure CSS.
View tabs with a liquid glass lens: the glass slides to the new tab, stretching as it moves and settling with a wobble, blurring and brightening what is underneath.
A ridged plastic lenticular card holding two pictures. Moving across it tilts the card and switches day to night through interleaved strips that widen with a registered custom property, flickering exactly like printed lenticulars, with a sheen running along the ridges.
A felt letter board: each letter you type is pushed into the groove with a little wobble and stays a touch crooked, like the real plastic letters.
Audio balance as a spirit level: choose left, centre or right and the level tilts, while the bubble drifts to the high side, overshoots a little and settles like it is floating in liquid.
A wake switch drawn as a laptop: the lid swings up from shut on its hinge and the screen glows awake, then a few lines of interface fade in.
An opacity slider whose thumb you pick up: it lifts off the track over a softening shadow and swings as you drag, then drops back with a squash and a ripple.
A beacon switch shaped like a lighthouse: on, the lamp lights and its beam sweeps round over a moving sea.
A string of fairy lights: switching on lights the bulbs one after another from the plug, then they twinkle; off puts them out from the far end, so the current seems to travel.
A photo card you like by double-clicking the picture: a big heart pops over it and floats away, the small heart below fills with a burst of sparks, and the count rolls up.
A tiny falling-block game: pieces drop and settle until the bottom rows are complete, the rows flash and clear, and the board starts again.
A silver liquid rises from the bottom of the box using translateY on a fill layer inside overflow:hidden. A faint curved surface ripple rides the top of the liquid. The check springs in after the fill completes.
A polished metal pill. Its banded reflections drift slowly on their own and slide against the cursor as you move over it, the way they would on a curved surface, with a specular hotspot following the pointer.
An animated liquid wave rises from the bottom of the input via clip-path polygon updated by requestAnimationFrame on focus. The wave oscillates continuously while focused.
A pill toggle where the knob stretches to fill the entire track mid-transit like a blob of mercury, then snaps back to a circle at the other end. Keyframe animates left + width + border-radius simultaneously for the liquid effect.
A dot with a fading tail traces a Lissajous knot, and the knot slowly reshapes itself as the two rhythms drift apart.
On click, the button transitions through three states: idle (padlock icon) → loading (spinning SVG arc, 1.6s) → done (checkmark, bright white). Auto-resets to idle after 2 seconds. Each state has distinct icon, label, and colour scheme.
A steam engine running on the spot: drive wheels turning, the coupling rod circling with them, steam puffing back from the chimney as the sleepers rush past.
A loom weaving: a shuttle carries the weft over and under the warp threads, row by row and back again, until the cloth is woven, then it is cleared and begins again.