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 woodwork checkbox: the second half of a dovetail joint slides down into the first, completing the tick that runs across both, and the joint thuds as it seats.
A segmented health bar: take some away and the lost chunk flashes and drains after a beat; add some and a ghost shows the new level while the bar fills up to it.
A drawbridge slider: the two leaves lift apart as you drag; while it is down a car drives across, and once it is well open a boat sails through underneath.
A connection switch drawn as a drawbridge: the two leaves fall under their own weight on their chains, meet over the river and bounce; off winches them smoothly back up.
A checkbox where the SVG checkmark stroke draws itself on via stroke-dashoffset when checked, combined with a brief scale pop on the box. The path writes itself left-to-right rather than snapping in.
The glass drinking-bird toy: liquid creeps up its neck, it leans further and further, tips over to dip its beak in the water, then swings back up and sways.
A drop falls, stretching as it speeds up, splashes a crown of beads up off the surface and sends two ripples spreading outward.
Every letter you type drops into the field from above with a little tumble and bounce, and letters you delete fall out through the floor. A real input keeps the caret, selection and typing; a mirror line draws the letters over it.
Range tabs over a stats panel: the old panel falls out of the bottom tipping over, and the new one drops in from above and bounces to rest.
An alarm-time picker made of 3D drums: hour, minute and AM/PM wheels you drag, scroll or arrow through. The numbers sit round real cylinders that turn under a raised lens and snap to the nearest row.
An iOS-style picker wheel built on a real radio group. The options sit round a 3D drum that turns to bring the chosen one into the lit band; spin it with the mouse wheel, drag it up and down, click an option, or use the arrow keys. The edges fade away like the curve of a real drum.
Two concentric rings rotating in opposite directions at different speeds: bright outer ring clockwise, dimmer inner ring counter-clockwise. Pure CSS, no dependencies.
A connect switch drawn as an earbuds case: the lid flips open on its hinge, both buds rise out one after the other and the status light comes on.
An easing picker that shows the curve and the motion: the chosen curve draws itself on a little graph while a square beside it runs the motion in a loop, steady for linear, quick then gentle for ease out, past the end and back for spring.
Ghost copies of the button hide behind it. On hover they fan out up and to the left in depth, each fainter than the last and lagging slightly; a click slams them all back into the button with a punch.
A solar eclipse on loop: the moon slides across the sun, slowing as it covers it, and at totality the corona flares out around the black disc before the moon drifts on and the sun returns. Pure CSS.
A dark-mode switch as an eclipse: the moon slides over the sun, the track darkens, and the corona flares out round the covered disc and turns slowly.
Code editor tabs: the accent line slides over to the new file and its lines of code come in one by one.
A boiled egg picker: soft swells a glossy yolk that runs over the white, jammy sets it round the edge, hard shrinks it pale and crumbly.
Boiling time for an egg: the yolk goes from runny and glossy to jammy to firm and pale as the minutes go up.
A tiny e-reader screen as the checkbox: ticking refreshes it the way e-paper does, flashing ink then blank paper before the tick appears, and clearing leaves a faint ghost of the tick that fades away.
A volume slider with rubber-band ends: pull past either end and the track stretches and thins with growing resistance, then snaps back with a wobble. The thumb squashes with your speed and the value bubble leans with it.
On click, a CSS keyframe animation fires, squishing the button horizontally then snapping back with an overshoot oscillation that simulates spring physics. The animation is re-triggered cleanly on every click by removing and re-adding the data attribute with a forced reflow. No dependencies.
A rubber-band selection pill stretches horizontally as it springs between options via Framer Motion layoutId with high-stiffness spring physics. The distortion gives a tactile elastic band feel to the transition.
An SVG overlay traces an electric arc around the input border via stroke-dashoffset animation on focus. White neon sparking effect that completes a full perimeter trace.
An elevation picker: the card lifts on a spring while its shadow drops further, spreads and softens, from flat on the page to floating.
An Art Deco floor dial: the needle climbs floor by floor, settling at each, lights the arrow at the top and sweeps back down.
Floors as a lift: press a button and the doors close, the dial above sweeps to the floor with the arrow lit, then the doors open on the new floor.
A photo card that enhances on hover: the picture starts as a few big pixels and resolves step by step, 6, 12, 24, 48 columns and then full resolution, with the resolution shown beside the title.
An envelope with a seal. On hover the flap swings open in 3D and, once past edge-on, drops behind the letter through a delayed z-index; then an invitation card slides up out of the pocket. Leaving reverses it in order. Pure CSS.
Letters from friends as postage-stamp tabs: pick a stamp and that friend's letter rises out of the envelope.
A sound picker drawn as an equaliser: choose warm, flat or bright and the curve and its fill bend smoothly into the new shape across the frequencies.
Five bars each running an independent height animation at a different duration: the unsynchronized cadences create an organic music-equalizer feel. Pure CSS, no dependencies.
A sketch toy checkbox: ticking turns the two knobs and a line draws the tick on the screen; unticking shakes the toy and the drawing fades away.
A black hole: a spinning accretion disc passes in front of the hole, and light from the disc's far side is lensed into a glowing ring arching up and over it, flickering softly.
A compact article row that opens into a full card: the thumbnail grows into a banner, the title and meta slide down beneath it and the summary fades in; close it and it all folds back.
Icon tabs where the active one opens out to show its label inside a pill, while the others close back down to their icons.
Instead of sliding, the thumb expands from a small circle in the corner to flood-fill the entire pill track in mid-gray. Toggling back shrinks it. No dependencies.
A headline field that renders your text as solid 3D type above it: the extrusion turns to face the pointer, swaying gently on its own when you are elsewhere, and each new letter pops out of the depth.
A storage bar seen from a little above: the filled part rises out of the track as a solid block with shaded faces, and grows taller while you hold it.
A reading size picker on an optician chart: the pointer moves to the row you pick, which racks into sharp focus while every other row blurs by how far it is from it.
A visibility switch you can read at a glance. Off, the eye is shut with its lashes down; on, the lids part, the eye glances left and right, then settles and blinks now and then while it stays open. Pure CSS on a native switch.
A mixing-desk channel fader: push the cap up its groove past the dB scale and the stereo meter beside it bounces up to the level you set, with the reading in decibels below.
A shooting gallery difficulty picker where the smaller the duck, the harder the shot. Hit a tin target and it spins round on its post with sparks and a PING to show its star, while the last one spins back.
A paper folding fan flicks open stick by stick into a half circle, flutters, and folds shut again.
Pick a card. Four playing cards are fanned out in a hand; hovering one nudges it up, and choosing it lifts it clear of the fan, straightens it and turns it face-lit while the rest stay tucked in. Pure CSS.
A fan-speed slider with five settings: the blades spool up and wind down smoothly rather than jumping, and air lines stream off faster at each step.
A desk fan with its own switch. Switching on, the blades spin up with real momentum (and a motion-blur disc fades in as they get fast); switching off, they coast down and come to rest wherever they happen to stop, rather than snapping back.