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.
Menu tabs where the new list unfolds down from its top edge like a paper flap, with a shadow lifting as it opens.
A check box, literally: a flat cardboard net folds up in 3D into a box, sides first, then the front and back, and last the lid swings over and closes with a bounce, showing a tick on top. Clearing unfolds it.
A profile card whose Follow button turns into Following with a drawn tick, while the follower count rolls up by one and a ring draws itself round the avatar.
No box at all: a word stands on the floor and a small light follows your cursor, throwing long shadows that fan out and swing around every letter. Press and the letters hop.
Hover raises a honeycomb shield around the button. A click sends a ripple through the hex cells from the exact point you clicked (the centre, from the keyboard), lighting each ring of cells as it passes.
A forecast picker: sunny, cloudy or rain. A cloud rolls in over the turning sun, the sun hides behind it, rain starts to fall, and the temperature rolls to match.
Ask it a question. Tick it and the ball shakes, the water clouds with bubbles and the die floats up out of the dark to say YES; untick and it sinks back to NOT YET.
A fortune cookie card: click it and the cookie cracks in two, crumbs fall and the slip of paper slides out with your fortune and lucky numbers; click again for another.
A paper fortune teller. Pick a sign and it pinches open and shut once for each letter of it, the way the playground game counts, then a pencil rings the sign and your fortune is written out on a slip.
A paper fortune teller: pick a flap and it unfolds over its crease to show the fortune written inside, while the last one folds back down.
A frame rate picker: a bouncing ball is only drawn on frame boundaries, with its last few frames left faintly behind, so 12, 24 and 60 fps look steppy, filmic or fluid.
A Sierpinski triangle of 27 cells that light up in a wave running through the recursion order, corner by corner, then dim back down, over and over.
A tag field as a goods train: press Enter and a wagon with your tag rolls in and couples on with a jolt and a puff of smoke; Backspace in the empty field uncouples the last one.
A freeze card setting drawn as the card itself: ticking grows ice crystals in from all four corners and spreads a frosty haze behind them. Clearing thaws it and the frost fades away.
On focus, the input transitions to a frosted glass look: backdrop-filter blur increases and the background shifts to semi-transparent white. Clean glassmorphism aesthetic.
A frosted glass pill slides between options using Framer Motion layoutId. The translucent backdrop-blur pill springs smoothly from one option to the next, giving a glassmorphism selection indicator.
A delay slider drawn as a burning fuse: the cord still to burn is the fill, ash lies ahead of the thumb, and the spark at the thumb fizzes and spits more embers the faster you drag.
An ignite switch: a spark burns along the fuse leaving ash behind it, and when it reaches the end the bulb pops on.
Two spiral arms of twinkling stars wheel slowly round a glowing core, the outer stars smaller and fainter.
A thick-track slider split by a slim handle with a gap either side of it: the handle thins as you press, the value rises above it in a pill, and a stop dot marks the end.
A guest access switch drawn as a barrier gate: the striped arm swings up past upright and settles back as the lamp on the post lights; off drops it onto its rest with a little give.
A speedometer dial for CPU load: on hover the needle sweeps up from zero with a springy overshoot, the arc fills behind it and the readout counts up to match; leave and it all falls back to zero.
A gear selector for P, R, N and D: the knob clicks along the gate to the gear you pick with a little overshoot, and the display rolls to the new letter.
A gears checkbox: two meshed gears turn together, the small one the other way and faster, until the tick on the big gear stands upright and lights.
Two meshed gears, ten teeth and seven, turning against each other at the right ratio (the small one 10/7 as fast) so the teeth stay engaged all the way round. The tooth outlines are generated from real gear geometry. Pure CSS rotation.
A Geneva drive: the drive wheel turns steadily and its pin catches a slot once per turn, flicking the cross wheel a quarter turn and locking it again.
Draw a tick in the box with your pointer and it is checked, your stroke tidying into a clean tick; scribble over it to clear it. A plain click still works.
An email field that finishes the domain for you. Type the @ and the rest of a likely address appears in grey after your caret with a Tab key hint; Tab (or the right arrow, or tapping the hint) washes the ghost text solid and it becomes part of what you typed.
The box fades to near-translucency while the check mark materializes through it, then the box fades back to solid, creating a "materializing through" ghost effect. Eerie and subtle.
A gift card in a box: click and the bow unties, the lid lifts off and tips away, then the card with its code rises out of the box with a little overshoot.
A present checkbox: ticking pops the lid off the box, it flies up and lands askew, and a tick springs out of the box; unticking sinks the tick and closes the lid.
A frosted glass pane floating over drifting soft lights. Move the cursor around it and the lights behind the glass gather toward the pointer one after another, while a rim light slides round the pane's edge to face it.
A volume slider whose solid thumb turns into a glass lens while you hold it, magnifying the track underneath, then turns solid again when you let go.
Choose the glass: the full one lifts, tips toward the new one and pours an arc into it, which fills and gets its straw, ice cube, twist or rising bubbles.
A slider with momentum: flick the thumb and it keeps gliding, slowing with friction, and bounces off the ends with a squash.
Two cloned text layers are absolutely positioned over the button. On hover, staggered clip-path animations in steps() slice each clone into horizontal bands while offsetting them in opposite directions (one dark, one bright), creating a channel-split digital glitch effect. No dependencies.
On hover, two ghost copies of the card clip to random horizontal bands and translate sideways (one inverted, one overexposed), simulating a corrupted signal. Pure CSS keyframes with step() timing for a digital glitch aesthetic.
On toggle, light and dark ghost overlays jitter in opposite X directions and a horizontal scan line sweeps through, creating a digital corruption/glitch effect before resolving to the new state.
On failed validation the input briefly glitches (a CSS invert/brightness flicker plus translateX jitter keyframe over 500ms), then snaps to a bright border. Unsettling, memorable error feedback.
A glitch switch: the thumb teleports across in jerky jumps, trailed by offset ghost copies, while the scanlined track tears into displaced slices.
A wireframe planet of meridians and latitude rings spinning in 3D, with a satellite on a tilted orbit circling it.
On focus the border lights up and a soft halo radiates outward via box-shadow. Pure CSS transitions, no dependencies.
Toggle that emits a soft halo glow from the track when active. Box-shadow transitions in on activation, fades out on deactivation.
The golden spiral draws itself outward, and each Fibonacci square (1, 1, 2, 3, 5, 8) appears as the line reaches it.
Liquid metaballs from one SVG filter: everything inside is blurred and its alpha thresholded back to a hard edge, so shapes that come close melt together. On hover, droplets ooze out of the edges and bob; a click fires a drop that stretches off the side and breaks free.
A drop of goo pinches into two, spins a half turn while they stretch apart, and pulls back into one.
A liquid volume slider: the fill and the thumb are one blob, and a drop pulls off the thumb and melts back into it as you drag.
A segmented control whose pill is liquid: it pours from tab to tab, stretching a thinning bridge behind it before it pulls back into one drop.