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.
Stream tabs lit by a soft torch that follows your pointer along the row, above an underline that slides to the active tab.
A twister of spinning rings, narrow at the ground and wide at the top, sways from side to side while dust kicks up at its foot.
A torus made of 300 points tumbling in 3D: it spins round its own axis so the points flow round the ring, rocks and sways, and the near side glows larger and brighter while the far side falls away.
An office block at night, the way buildings spell things in lit windows: the random lights go off and a tick comes on window by window, under a rooftop sign.
Photo library tabs where a line draws itself around the active tab and unwinds from the one you left.
A parcel tracking card: on load the route line fills down the timeline to the current step one segment at a time, each dot filling as the line reaches it, and the latest step pulses.
A letter-spacing slider: the letters of the word spread apart and draw together as you drag, each a beat after the one before, with the value in em below.
A traffic light where each lamp is an option: choose stop, wait or go and that lamp lights at once, while the old one fades out slowly like a real bulb.
A trail-distance slider over an elevation profile: drag and the hiker walks the line, the walked part fills in and the distance and height above update.
Three dots travel the edges of a triangle corner to corner, stretching as they move and rounding up as they arrive.
A folded brochure showing its cover. On hover the right panel swings open, then the left, each shading as it turns away from the light, laying out three steps side by side; leaving folds it back up in reverse order. Pure CSS.
A block tumbles over and over along a dashed floor: it tips onto its next face about its leading corner and lands, again and again, while the floor slides back under it in step, so it rolls forever without leaving its spot. Pure CSS.
Forecast tabs whose pill turns over end on end like a domino, hinged on the edge it is heading for, once for every tab it crosses.
A shuffle switch: a die tumbles over its edges to the other end of the track, lifting at each corner, and a light comes on where it lands.
Station presets on an old radio dial: pick one and the needle sweeps along the FM band to its frequency, the stereo lamp drops out while it travels and flickers back on as it locks.
Radio station tabs on a tuning dial: the needle sweeps across the frequency scale to the one you pick, and the panel tunes in from static as it arrives.
Rounded frames rush out of a point of light at the centre, twisting as they come, like flying down a wormhole.
A record player speed switch: Off, 33, 45 or 78 rpm. The tone arm swings onto the record when it plays, and the record changes speed smoothly without ever jumping: three nested spinners (33, +12, +33 rpm) are paused or played, never restarted, so their speeds simply add up. Pure CSS.
A music switch drawn as a record player: the platter spins up to 33 rpm, then the tonearm swings over onto the record; off lifts the arm home at once and the record coasts to a stop.
Five nested squares turn a quarter one after another, so the stack winds into a spiral and straightens out again.
A slider whose track is a ribbon with a half twist at the thumb: ink on one face, paper on the other. Drag fast and the twist stretches out behind you, then tightens as you stop.
A puzzle cube scrambles itself in four turns, pauses, then solves itself in four more.
A custom placeholder types itself out character-by-character on mount at 60ms per character. When focused, it instantly clears so the user can type freely.
Metal type drops into a composing stick letter by letter, mirrored as real type is, then the word prints on the paper below and the type lifts out.
On hover, the button label erases character-by-character at 45ms intervals then retypes an alternate label at 55ms intervals. On mouse leave the process reverses back to the original text. A blinking cursor is shown throughout.
Hover erases the card title and description character-by-character then retypes new content, terminal-style with a blinking cursor visible during the erase/type phases. Mouse leave reverses the animation back to the original text.
A note field that types like a typewriter: each key strikes the paper with its own slight tilt and ink density, the carriage slides the line along so the type always lands at the strike point, and a bell dings every twenty characters.
Loading... typed onto paper one strike at a time: the typebar flicks up, the carriage steps along, the bell rings and the carriage returns a line.
On selection, the option label types character-by-character at 50ms intervals with a blinking cursor. Switching options clears the previous and re-types the new one, giving each selection a deliberate, terminal-like personality.
Letter tabs whose text types itself out behind a blinking caret each time you switch.
Tyre pressure: at low psi the tyre sags flat on the road and bulges, and pumping it up rounds it out with a little bounce.
A rain cover switch: the umbrella snaps open with a springy flare, and the falling rain stops on the canopy instead of running through.
Hovering the label draws a line under it; ticking pulls that line back along the text into the box, where it turns into the tick.
Minimal borderless input: a bright line draws from left to right under the field on focus. Pure CSS transform, no dependencies.
A folded walking map. Hover and the gatefold flaps swing open in 3D, right then left, the inside catches the light, and the route draws across the map with its stops popping in.
Metric or imperial on a tape measure: the blade twists over from the case to the hook to show its other side, with a pinch running along it where it turns.
The box is a single line. Ticking it, the outline unwinds back into one corner and the same line pays out of that corner as the tick; unticking winds it back round.
A drop zone card: its dashed border marches while you hover or drag a file over it, and a dropped or chosen file gets a row that fills with progress, then ticks.
Paste a link and it breaks down below into chips: a lock for secure, the host highlighted, every path segment, and each query parameter as a key and value, each chip popping in one after another.
Connect a device, the way USB always goes: ticking pushes the plug at the port, it bumps the wrong way up, backs off, flips over and goes in, then the device's light comes on and a tick shows. Clearing pulls the plug out.
A right-side icon morphs between states: invisible on idle, a checkmark springs in on valid email format, an X shakes in on invalid submission attempt.
A sync switch drawn as a valve: the handwheel spins a turn and a half, the gauge needle climbs and twitches, and flow runs through the glass section of the pipe.
A vending machine as the checkbox: ticking turns the coil, the snack tips off the shelf and drops into the tray, and the little display lights a tick. Clearing takes the snack and the shelf restocks.
Show matches as a Venn diagram: ticking slides the two circles together until they overlap, and the overlap fills in with a tick inside it. Clearing pulls them apart.
A scrubber with fine control: drag down away from the track and the thumb slows to half, quarter, then fine speed, while the scale above zooms in around it and names the speed.
A stereo balance control shaped like a spirit level: the thumb is the air bubble, which stretches as it moves, wobbles as it stops and settles between the two centre marks.
A record in its sleeve: on hover the vinyl slides out of the sleeve and spins up, its grooves catching a fixed sheen, while the tonearm swings in over it a beat later.
A voice-note bubble: press play and the waveform fills from left to right as it plays while the timer counts, click anywhere on the waveform to seek, and it stops and resets at the end.