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 soft white ripple circle expands from the exact click point and fades out: Material Design's satisfying click feedback pattern. Pure CSS animation, no dependencies.
A 9x9 field of dots with ripples spreading outward from the centre, each dot swelling and brightening as a wavefront passes.
A circular gray fill expands from the center outward via clip-path circle animation, like a water-drop ripple filling the box. The check mark fades in after the fill completes.
Three concentric ripple rings expand outward from the radio dot center on selection, with staggered 120ms delays. The rings fade as they grow, then collapse, leaving a solid glowing ring. Water-drop tactile feedback.
Library tabs where picking one sends a ripple through the letters of every label, starting from where you clicked and fading as it travels.
Each keystroke triggers a brief border-color ripple pulse on the input via a CSS keyframe that spikes to accent then settles back. The input visually feels each character typed.
Uppercase tabs whose letters roll up one by one into the lit word, and keep rolling upward out of the word you left rather than back down, with a hairline rule sliding under the active tab.
A roast picker: choose light, medium or dark and the beans swell, oil comes up as a sheen and they crack once, twice or three times.
A wall light switch. The rocker paddle tips in 3D from one end to the other with a firm snap, its shading flipping as it turns toward the light, and a small LED on the plate glows when it is on. Pure CSS on a native switch.
Rock, paper, scissors as a radio group: pick your move and the hand shakes twice, then throws it, fingers unfolding for paper and two of them spreading for scissors.
A contact list on a real wheel. Drag it or turn the knobs: cards flop forward off the top one by one around the axle, each stopping upright to be read.
Dial a number on a rotary phone: drag a finger hole clockwise to the stop and let go, and the disc springs back at a steady speed while the digit is added. Typing digits in the field dials them too.
A knurled knob that turns a quarter turn between OFF and ON and snaps into its detent with a little overshoot, while an arc around it fills from one mark to the other. Pure CSS on a native switch.
On hover, a large conic-gradient layer (alternating dark and light grays) fades in behind the button text and spins continuously via a rotate(360deg) keyframe animation. A subtle dark overlay keeps the white text readable against the gradient. No dependencies.
The checkbox shape morphs from a rounded square (7px radius) to a perfect circle on check via animated border-radius with a spring overshoot. Clean and satisfying shape transformation.
A map card where a car drives the route between pins, the road ahead bright and the driven part fading back, while the ETA in the panel counts down to Arrived.
A destination picker on a railway line: choose a station and the train pulls along the track to it, accelerating and braking in; the platform lamp and its name light as it arrives.
An RSVP checkbox with the guest list beside it: ticking pops your avatar in at the front of the stack, the other guests shuffle along to make room and the count of everyone else rolls from +12 to +13.
A tall brightness capsule: drag past either end and it stretches after your finger, then springs back into shape when you let go, while the sun inside grows its rays.
Paper laid over a raised tick: rub across it with your pointer and graphite builds up until the tick shows through, like a coin rubbing. Once enough is rubbed the box is checked; a click or Space does the whole rub for you.
A weight picker as a tape measure: the ruler slides under a fixed marker as you drag and the big reading above changes kilogram by kilogram.
A sail switch drawn as a boat: the mainsail and jib run up the mast and fill with wind, and the boat heels over and rocks on the waves; off lowers them back to the boom.
Billing same as shipping, shown happening: ticking lifts each shipping line off its card and flies it down into its billing field, and the billing fields settle into a read-only look. Clearing empties them.
A message written in wet sand: the stick traces each letter into the beach, and Wash away sends a wave up the sand that smooths it out.
A ticket scanner checkbox: ticking sweeps a laser line down and back over a code, it flashes, and the code dissolves into a tick; unticking rebuilds the code.
A horizontal scan line sweeps top-to-bottom through the focused input continuously on a ~2s CSS keyframe loop. Futuristic active-state ambient indicator.
A white horizontal scan line sweeps left-to-right across the selected option on every selection change, then fades out leaving a glowing underline. Sci-fi terminal aesthetic with monospace labels.
A barcode scanner: a laser line sweeps up and down the code while a band of light travels with it, lighting each bar it crosses.
Drag the platform up the scale and the scissor arms open stage by stage under it, the sliding ends running along their tracks.
On hover, characters randomize from a pool of alphanumeric and symbol characters at 40ms intervals. Characters resolve to the real label progressively left-to-right. On mouse leave the original text is restored immediately.
A PIN pad whose keys glide to new places after every press, so the pattern of taps gives nothing away. Four dots fill as you go, and a full PIN shakes the dots and resets.
A diagonal clip-path wipe reveals the filled checked state from the bottom-right corner, like scratching a lottery card. Unchecking collapses the fill back.
A scratch card. Drag across the silver foil (a canvas) to erase it with destination-out strokes while flakes fall from the scratch; once about half is gone the rest dissolves and the prize pops. Keyboard users get a Reveal button, and Scratch again resets it.
Drawn by hand: the line boils like a pen animation, a marker hatches in the box on hover, and pressing scratches the word out and scrawls an answer above it.
More category tabs than fit: the row scrolls with faded edges and arrow buttons, and the one you pick glides to the middle under a sliding pill.
Decree tabs on a scroll: pick a numeral and the parchment unrolls from the top rod with its roll travelling down, revealing the new decree.
A month schedule you flick through: drag or flick the ruler and it glides on with momentum before snapping to a day, the ticks swell under the needle like a dock, and each day's events flip in from the direction you moved.
A video card you preview by moving across the thumbnail: the pointer position picks the frame of a paper plane's flight, a bar under it tracks the position and a chip shows the time.
A number field you can drag: pull sideways on its label and a ruler slides under the value as it scrubs, Shift for steps of ten; or type, or use the arrow keys.
A needle sews a line of stitches round a rounded square of cloth with the thread following it, then the seam is pulled away and it starts again.
A city at night through a round window. Tick it and a searchlight on the roof swings up and throws a tick onto the clouds.
A season picker on a tree: spring buds, full summer leaves, autumn leaves drifting down, then bare branches with snow on them and snow falling.
A tiny cinema seat map. Taken seats are crossed out and skipped by the arrow keys; picking a free seat lifts it with a pop and lights it, and the ticket below rolls its seat code over to the new one, like a departures board.
The track is a seesaw on a pivot and the thumb is a ball. Switching tips the beam the other way and the ball rolls downhill to the low end, picking up speed and actually rotating as it rolls (the stripe on it turns by the distance over its radius), then settles. Pure CSS on a native switch.
An iOS-style segmented control with two labelled options. A frosted-glass pill slides underneath the active segment, fundamentally different from a circular-thumb toggle. No dependencies.
A seven-segment display digit where a lit segment chases a figure-eight round the 8 (top, right, middle, left, bottom, right, middle, left), leaving a glowing trail that fades behind it. The middle bar is visited twice per loop, so it has its own keyframes. Pure CSS.
A parent checkbox over a branch of children. Checking the parent cascades down the branch one child after another; checking only some children turns the parent into an animated half-state dash that becomes a tick when the last one is done.
Mode tabs on a rotary selector: the knob turns to point at the chosen mode with a firm detent, and the labels sit round the dial at each stop.