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 boarding-pass checkbox: ticking brings a ticket punch down on the stub, it bites a tick-shaped hole, the chad tumbles out and the ticket jolts.
A pin to board checkbox: ticking it drops a pin into the crooked note card and the card swings level on the board.
Three dividers on one track that cannot pass each other: drag one into the next and it shoves it along, so the four segments always add up to the whole.
A hole out checkbox drawn as a putting green: the ball rolls across and drops into the cup, then the flagstick lifts out showing a tick on its flag; unchecking pops the ball back out.
A ticket card whose QR code assembles itself: at rest it shows random noise, and on hover the modules sort themselves into a code with staggered pops, then the three finder squares spin in and lock into the corners.
The label sits in superposition: three faint copies of the button jitter between positions out of step. Hover or focus observes it, and they collapse instantly into one solid button with a ring of light.
A disc with one quarter missing: the pieces swing round into the gap one at a time, so the gap walks the other way.
A search field that understands filters: tag:, by:, is: and type: tokens become pills as you type them, -words are struck through, quoted phrases are marked, and a dropdown suggests keys and then their values.
A dedication field written with a quill: the quill rides the end of your words, fresh letters land in wet ink that blooms and then dries, and every few words it dips back in the pot.
A rack-and-pinion switch: the thumb is a gear that rolls along a toothed rack, turning exactly as far as it travels, and lights up when it reaches the end stop.
A round radar scope as a button. A beam sweeps round the range rings, and each contact lights up the moment the beam passes over it, then fades. Hover brightens the rim with a soft glow.
A radar scope: a beam with a fading wake sweeps round the rings and crosshairs, and each blip flares exactly as the beam's leading edge passes over it, then fades until the next sweep. Each blip's delay is computed from its own angle. Pure CSS.
A sci-fi radio group where selecting an option fires two concentric white rings outward in a looping radar-ping animation. The indicator core glows with a radial gradient and a center dot springs in. Monospace labels shift from dim to bright white.
A conic gradient sweeps clockwise from the top, filling the box like a radar scan over ~700ms. The check mark appears once the sweep completes. Driven by a requestAnimationFrame loop.
An FM tuning dial: drag the needle along the band and the screen fills with static between stations, then clears to a clean wave and the station name as you tune one in.
A corner-radius slider: the square softens into a circle as you drag, a guide shows the radius at its corner and the thumb itself rounds with it.
A rainfall slider: more and more drops fall as the rate rises, the puddle spreads and ripples ring out on it, from a drizzle to a downpour.
The checked state looks physically raised off the surface. A sphere-like radial gradient (silver → dark gray) combined with six layered box-shadows (rim highlight, outer glow, ground lift shadow, inner top shine, inner bottom depth) creates a convincing 3D embossed button. The box also lifts 1px on the Y axis. Flat and recessed when unchecked.
A rest day checkbox drawn as a zen garden: a rake draws the tick through the raked sand as a groove; unchecking smooths it back into the lines.
Two paddles keep a ball in play across a dashed net, like the first video game: the ball bounces off the walls, picks up a little spin off each paddle, and each paddle tracks it only while it is coming its way.
Letters cut out of different newspapers, every scrap a different typeface and torn shape. They jitter in stop motion on hover; press and they fall off and slap back on as a new message.
The thumb carries a pawl that rides over teeth cut in the track: it lifts up each ramp, drops off the edge into the next tooth and lands with a small click.
A round reactor core as a toggle button: three segmented rings counter-rotate around a breathing core. Hover spins the rings up without a jump; a click ignites the core with a flash ring and keeps it running faster while it is on.
A power switch whose thumb is a reactor core inside two gyro rings. Switching on, the thumb springs across, the rings spin up and brighten, the core glows and energy streams down the track.
The box is four sticks: ticking swings two of them into a tick while the other two fall away, and clearing builds the box again.
A pay button with a printer slot along its bottom edge: click it and a receipt prints out under it a line at a time, it reads Paid, then the receipt tears off and falls away.
A payment terminal card. On hover its light blinks and a receipt prints out of the slot in steps() jerks like a thermal printer, line items, total and barcode, with a torn zigzag edge from a conic-gradient mask; leaving pulls it back in smoothly. Pure CSS.
A receipt checkbox: ticking prints a receipt out of the slot line by line, ending in a tick, and the printer light comes on; unticking pulls it back in.
A receipt printer feeding out a slip line by line while its light blinks, then the slip is torn off and flutters away for the next one.
Cabin class as a seat: pick economy, premium or business and the seat reclines further for each, its legrest rising to match.
A record turning under a fixed shine, its label text going round, while the tonearm creeps inward, lifts and returns.
A notes field that hides private details as you type: phone numbers and email addresses get a solid redaction bar wiped over them. Reveal wipes the bars off to an underline; Hide wipes them back.
A reduce motion setting that shows what it does: a ball bounces beside the label while motion is on, and ticking calms it, each bounce lower than the last, until it rests on the floor. Clearing lets it bounce again.
A lunch slot machine: pick a dish and the lever pulls, the reel spins a full turn with a motion blur and stops on your pick.
A feed you pull down to refresh: the list stretches with growing resistance, the arrow turns over as you near the release point, and letting go spins a loader and slides a new item in.
A thin track where a long dash accelerates across and a short one darts after it, taking turns.
Tabs you can drag into a new order, the others shuffling out of the way; Alt with the arrow keys moves them from the keyboard, and the new position is announced.
A video quality picker: choose 240p, 720p or 4K and the picture breaks into blocks or sharpens, stepping through the resolutions in between.
The box interior is a 5×5 dot matrix. On check, white LEDs light up in a staggered sequence that traces a check-mark pattern through the grid. Off state: all dots dim. Retro display aesthetic.
8-bit game-style button with a chunky pixel border (outline + box-shadow), scanline overlay via repeating-linear-gradient, monospace font, and a stepped jitter shake animation on press. The outer wrapper uses a black frame to simulate a cartridge slot border. No dependencies.
Send me a copy: ticking it draws a line down from the box that turns into an email field below and puts the cursor in it; unticking folds it away.
Times of day as tabs: the new panel opens in a circle spreading from under the tab you picked, over the one you left.
An undo button: each press spins its arrow backwards with a fading motion trail, and the undone action runs back out of the label, skewed and smeared like tape, revealing the one before.
Recipe tabs with a bookmark ribbon: it drops down onto the active tab while the old one pulls back up.
A ringer mode picker: silent draws a slash across the bell, vibrate shudders the phone in short bursts, ring swings the bell with sound waves rolling out.
An activity rings card: each ring sweeps round from empty to its share of the goal, a beat after the one outside it, with the totals listed beside them.
A tree age slider drawn as a cut stump: the trunk widens with the years and growth rings appear from the pith outwards, a little uneven like real wood.
LOADING · PLEASE WAIT set round a circle like a badge, turning slowly, while a bright highlight chases round the letters and a dot breathes in the middle. Each letter is a span placed by its index. Pure CSS.