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.
On toggle, the box visually shatters into three angled polygonal shards that briefly separate outward, then collapse back revealing the new state. A satisfying destructive-reassembly metaphor.
A stats card with four faces on a 3D cube: the arrow buttons turn it to the next face with a springy rotation, and the dots below track which face is showing.
On click, a 3D cube rotates 90 degrees on the X axis to reveal a second face with a confirmation message. Uses CSS transform-style: preserve-3d with two absolutely-positioned faces, a front face (translateZ) and a top face (rotateX + translateZ). Auto-resets after 1.8 seconds.
Quarterly plans on the faces of a 3D cube: pick a quarter and the cube turns the short way round to that face.
A page turn slider: the corner of the page curls back as you drag, showing the next chapter underneath, until the page has turned.
A glowing gray pill indicator slides smoothly between selected options via translateY, acting like a cursor homing in on the active choice. Labels brighten on select; the pill springs with a cubic-bezier overshoot.
A cursor picker that shows each cursor where it belongs on a little panel: the cursor glides to its spot and turns into it, the arrow resting on empty space, the hand lighting the button, the I-beam in the text with a caret blinking.
Two gray half-panels slide apart like theater curtains on check, revealing the check mark behind them. Unchecking slides the panels back in to conceal it.
Theatre acts as tabs: the curtains sweep shut, the scene changes behind them and they open again on the next act.
A dandelion clock in hair-thin line. Press and a gust takes the seeds, each one turning upright under its parachute as it drifts off, then a new head grows.
A dartboard checkbox: ticking throws a dart into the bullseye, the board jolts, a ring flashes and the dart quivers before it settles; unticking pulls it out.
Hover and columns of glyphs start pouring down behind the label, each column at its own speed with a fading trail. Leave and the columns finish their fall and trickle out one by one.
A stay-dates calendar: pick a first night and a band previews the stay as you hover, then pick the last night and the band settles, gliding across each week row to join the two days.
A time-of-day picker with a little sky. The sun rides an arc from sunrise to sunset to the option you choose while the sky brightens or dims; at night a shadow slides over it to make a crescent moon and the stars come out. Pure CSS (offset-path for the arc).
A time-of-day slider: the sun arcs across the sky from sunrise to sunset, the sky brightens towards noon, the stars fade out and the clock reads the time.
A letterpress checkbox: ticking brings a press plate down onto a paper square, it gives under the pressure, and the plate lifts to leave the tick pressed into the paper with a shadow and a highlight.
Project tabs where the heading scrambles through symbols and locks into the new words letter by letter, left to right.
Shipping options with a little delivery truck on a one-week road above them. Choosing an option drives the truck to the day it would arrive (Tomorrow, 2 days, 5–7 days): its wheels spin and its body bobs while it drives, and it turns round when it has to go back.
Grab the thumb and a ghost stays at the value you started from, with a bracket and a signed change between them; let go and the ghost slides over and joins the thumb.
Destination tabs on a split-flap board: pick a city and every letter of the destination, time and gate flaps over to the new one, cell by cell from left to right.
The numbers along the scale are sharp near the thumb and fall out of focus further away, and the plane of focus trails the thumb and hunts past it a little, like a lens racking focus.
A size slider with detents: the thumb drags sticky against each stop and quick between them, clicks into place with a ring at each new size, and springs onto the nearest stop when you let go.
Trip tabs as instant photos: pick a place and the new print develops in its frame, surfacing dark and soft from a pale blank and clearing to full contrast.
A rotary knob like the one on a fan or an oven. The settings sit round its top arc with a tick each; choosing one (click, or the arrow keys) turns the ridged knob so its pointer swings to it with a mechanical overshoot. Real radios underneath. Pure CSS.
A gain knob: drag sideways or use the arrow keys and the knob turns through its sweep while a ring of lights fills in around it.
A pickup time field: type a 24-hour time and the clock beside it sweeps its hands round to the time with a little overshoot, and says whether it is morning, afternoon or night.
A diamond-shaped button using a 45-degree rotated wrapper with counter-rotated text. On hover, the button scales up, the background gradient brightens, and a pulse box-shadow animation radiates outward. No clip-path: pure CSS rotate transform.
Pick a number from one to six and the die tumbles over in 3D to land on that face, with a hop and its shadow.
Pick a number and a 3D die rolls to it: it hops up, tumbles a full extra turn on its way to the chosen face and lands with a squash while its shadow shrinks and grows underneath. Each roll adds another turn (a tiny script), so it never just rotates back.
A code card with Before and After: removed lines get struck through and fold away, added lines open up in their place, and the gutter marks each change with + or −.
A smart-light card: drag the wide slider and the bulb fills with light, the card warms with a glow behind it and the readout follows, down to Off.
A paper-cut landscape behind a window frame. On hover the card turns in 3D and its four paper layers (sky, far mountains, near hills, frame) pull apart in depth, each casting a shadow on the next; the cursor keeps steering the turn.
A send button that folds into a paper plane: on click the plane glides off in an arc, banking as it goes and leaving a fading trail, and the button settles on Sent.
A hold to delete button: while you hold it, a bar fills and the label crumbles into sand from the right, each letter drifting and turning away. Let go early and the letters gather back; hold to the end and it offers Undo.
A depth gauge beside the sea: take the diver down and the water darkens, the light rays fade, and past 25 metres the torch comes on.
App tabs in a dock that magnifies the icons near your pointer, with a dot under the open app and its screen above.
Checking turns the box into a sheet of paper and folds its top corner down in 3D, the way you dog-ear a page you have read, showing the paper's darker underside. Pure CSS.
An email field that finishes the domain for you: after the @ it ghost-completes the likeliest domain, the arrow keys cycle through the alternatives, and Tab accepts with a sweep under the field. A tick draws in once the address is valid.
Seven dominoes topple in a chain, each falling faster as it goes and coming to rest leaning on the next (the last one falls flat), then they stand back up one by one in the same order. Pure CSS.
A count slider whose track is a row of dominoes: drag forward and they topple one into the next to make the fill, drag back and they stand up again.
A chain-reaction switch: the dominoes topple one after another, faster as the chain goes, and the last one rings the bell. Off, they stand back up in reverse, like a rewind.
A hotel door hanger on the knob. It sways as you come near; tick it and it swings and flips over from Please make up my room to Do not disturb.
Rooms behind doors: the chosen door swings open on its hinge to show the lit room, a beat after the one you left starts to close.
A guest access switch drawn as a door: switching on, it swings open in 3D on its hinge and light spills out from the doorway across the floor.
A dark room with light under the door. Hover and the door falls ajar, spilling a wedge of light across the floor; press and it swings wide, with someone standing in the doorway.
An LED dot-matrix panel spells the label in lit dots. On hover or focus it scrolls the message like a station marquee, starting exactly where the resting word sits, and settles back when you leave.
Eight dots arranged in a clock face, fading in and out in radial sequence: the classic OS-native loading indicator pattern. Pure CSS, no dependencies.
A read receipts checkbox: ticking draws one tick, then a second slides in from behind it and bumps the first along, and both brighten.