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 tap. Switching on lifts the lever and water pours from the spout, the stream running down into rippling rings on the basin; off drops the lever and the last of the stream falls away from the spout. Pure CSS on a native switch.
A ferris wheel turning slowly with chase lights running round the rim, its cabins hanging level and swinging gently as they go.
A slider whose number is the thumb: the figure rides a hairline that parts around it and leans into the drag like italic type, then rights itself with a small swing when you let go.
A light bulb checkbox whose filament is the tick: ticking flickers it on until it glows with a halo; unticking lets it cool slowly, the way a real filament does.
A field of 52 compass needles inside the button, every one turning to point at the cursor wherever it is on the page, brighter and longer the closer it gets, with a springy transition between headings. A click spins the whole field once in a staggered sweep.
On focus, a tinted background layer scales from scaleX(0) to scaleX(1) with transformOrigin left, flooding the input with color from left to right. Border color transitions simultaneously. Pure transform, no opacity flash.
Drink tabs that fill up like a glass: the chosen tab fills from the bottom with a moving wave on top, and the one you left drains.
Acts on a strip of film: the strip advances through the gate in steps, a jump and a hold per frame, with the shutter blinking over each pull.
Press and hold to scan a fingerprint. A beam sweeps over the pad while the ridges draw in one after another; let go early and they fade back. Hold long enough and it reads Verified, then resets.
Press and hold to confirm. While held, the fingerprint's ridges light up one by one from the centre outwards; let go early and they drain away. Held to the end, it checks and a badge pops in. Space still toggles it from the keyboard.
A paint finish picker on a sphere: matte spreads the highlight wide and soft, satin tightens it, and gloss sharpens it to a glint with a reflected window and a rim of light.
Animated flame gradient rises from the box bottom with a jagged flickering top edge (clip-path polygon keyframes). Light-to-dark gray fill with continuous flicker: clearly distinct from liquid (smooth, no animation while filled).
Seven fireflies drifting on their own slow paths and blinking in turn, each with a different pace and rhythm.
Two shells take turns: each climbs on a fading trail, bursts into a ring of sparks that sag under gravity, flicker and go out.
A mattress firmness picker: each pick drops a ball onto the bed, which sinks deep and settles slowly on soft, and barely gives and bounces on firm.
Fishing spots on a pond: the float is reeled in, the rod whips and the float flies to the spot you pick, lands with ripples and bobs, nibbling now and then.
Settings tabs whose box eases to the height of each panel, the old content blurring out as the new rows fade in one after another.
A flag for review switch: the flag runs up the pole from half-mast, unfurls and starts to wave; switching off, it slides back down limp.
Type a destination and a split-flap departure board rolls every cell through the alphabet to the new letters, one flap at a time, with the status reading Updating until the board settles.
A round-bottom flask fills with a sloshing liquid as bubbles rise through it, holds full for a moment, then drains, over and over.
An image upload on a flatbed scanner: drop or choose a photo and a light bar sweeps down the glass, scanning it to black and white as it goes.
Scrub a flipbook frame by frame: a ball bounces across the page with squash on each landing, the last two frames ghosted behind it and a page flicking at every step.
Card rotates 180° on the Y axis on hover to reveal a back face. Uses CSS preserve-3d and backface-visibility for a physical 3D flip.
Plan cards that flip. Choosing one turns it over in 3D with a springy settle to reveal its lit back (a tick, the plan and "Selected"), while the card you had before flips back to its front. Pure CSS.
A checkbox that performs a full 360° Y-axis coin flip via CSS keyframes when toggled. The fill color and stroke-dashoffset check mark transition during the rotation.
A gradient rounded square continuously tumbling on its Y axis using CSS 3D perspective: a satisfying single-element loader. Pure CSS, no dependencies.
A contact card as tabs: the card flips over on its vertical axis to show the new side, turning left or right with the direction you moved.
The thumb squishes flat at mid-travel then snaps back (like a coin flipping) as it moves between positions. Bright track on active state. No dependencies.
The label lives inside the field at rest and floats above the text on focus or when a value is present. Pure CSS transitions, no dependencies.
A formation picker: seven flapping birds fly into a line, a V or a ring, one after another.
Sales tabs with a dotted underline that flies to the new tab like a flock of birds: each dot takes its own arc, a beat after the last, and they line up again on landing.
Lift buttons as a radio group: press a floor and the doors close, the car rides up or down the shaft to it, and the doors open again; the pressed button lights.
Disks as tabs: the disk in the drive ejects and goes back to its place, the one you pick slides into the slot, the light blinks and its files list out.
A hand-drawn box and an inked tick flicked on fast, its long stroke overshooting the box. Every tick lands at a slightly different angle and size, like handwriting.
A spam filter switch drawn as a Venus flytrap: the jaws snap shut fast with their teeth meshing and the plant shakes, but the fly escapes just in time; off opens the jaws slowly and the fly lands again.
The track is a slab of memory foam: the thumb presses a dent into it, deeper while you hold it, and where the thumb has just been the dent fills back in slowly.
A lens picker drawn from above: as the focal length goes up from 24 to 85 mm the field of view narrows from the camera, leaving fewer of the subjects inside it.
A scene in depth that you focus like a camera: move the pointer up and down and the focus pulls between the far mountains and the near grass, with a distance readout and a scale marker following.
A camera focus slider: the scene sharpens from a blur as you drag, the focus box closes in on the subject, and at sharp focus it locks with a flash and the AF light comes on.
Topic tabs with depth of field: labels soften with distance from the chosen one, and switching racks focus across the row; pointing at a tab racks to it for a look.
Views through misted window panes: the chosen pane is wiped clear in the direction you moved, and the one you left slowly mists back over.
A members button with foil-stamped lettering on a deep plate: the metallic sheen follows your pointer across the letters, sweeps through on keyboard focus, and a press debosses the plate.
A brightness slider in brushed metal with a polished bead for a thumb: the sheen slides back across the metal as you drag, like foil tilting under a light, and the bead's highlight shifts with it.
The button is a sheet of paper. A click folds the top half down over the bottom like a letter, its underside showing and the crease casting a shadow; it holds folded while the label changes underneath, then unfolds with the new label. Hover lifts the top flap a little to say it can fold.
A file folder that opens on hover: the front flap tilts down toward you and the papers inside fan up and out, one after another.
Three file folders stacked in a drawer, each with its tab at a different place along the top. Choosing a tab brings that folder to the front with a little lift and tips its front flap open in 3D to show the papers inside; the folder it replaces closes and drops back. Nothing rises above the bodies, so every tab stays in view. Pure CSS.
File folder tabs: the active tab rises and joins the folder body, and the new page of files slides up into it.
A square of paper folds in half from the bottom, then in half again from the right, holds, and opens back out, with each flap shading darker as it turns away from the light.