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.
Particles spiral in from the rim of a vortex, slow at the edge and whipping round faster as they fall toward a pulsing dark core.
A leather wallet card: on hover the three cards inside fan up out of the stitched pocket, each to its own angle, a beat apart.
A starfield drifts slowly out from the centre of the button. On hover the stars stretch into hyperspace streaks and race past, and the label spreads as if accelerating.
Palette tabs marked by a watercolour wash: the soft blot glides to the new tab and blooms into the paper, its edge roughened like paint soaking in.
A wash switch drawn as a washing machine: water fills the drum, the clothes tumble round and the machine shakes; off stops the drum where it is and drains it.
Five vertical bars in distinct colors that scale up and down in a rippling wave sequence. Pure CSS, no dependencies.
Ticking sends a ripple along the label: each letter hops and brightens a beat after the one before it, as if the tick's landing ran through the words.
A pill button filled with equaliser bars that idle gently, then swell and dance around the cursor as if it were the sound source, brightening where the energy is highest.
A sound switch: the speaker unmutes and a flat line springs up into a running sound wave.
A caption field whose letters ride a travelling wave while it is focused; on blur the wave calms smoothly to a flat line, and new letters fade in on the swell.
A seal and send checkbox: ticking it, the envelope flap folds shut in 3D and a wax seal drops onto it with a soft press.
A weather card with light rain falling behind the reading. Hover brings the storm in: the rain thickens, the cloud darkens, lightning flashes with the sky, and the reading changes to match.
A camera switch drawn as a laptop webcam: the ridged privacy shutter slides off the lens and the camera light comes on; slide it back to cover it.
A volume slider shaped as a ramp: the track widens from a hairline to a full wedge, the fill brightens towards the thumb, and the whole ramp swells while you hold it.
A font-weight slider: the sample letters thicken from Thin to Black as you drag, and the weight name and number change below.
A what's-for-dinner picker on a prize wheel: pick a dish and the wheel spins forward, always at least two turns, and slows to stop with it under the pointer, which ticks as it passes the segments.
Days of the week on a turning wheel: pick one and the wheel rolls it to the front while the rest turn away into depth.
A candlelight checkbox: ticking it, the wick catches and a flame flickers up with a soft glow; unticking, it gutters out in a thread of smoke.
A network picker: choose a network and its signal arcs pulse while it connects, then it ticks and moves to the top of the list as the others shift down.
A flight card with a cabin window: on hover the shade slides up on clouds drifting past the wing.
A car window slider: the glass rolls down, a dog pokes its head out past a third of the way, wind starts to stream by halfway and near the bottom its ears flap.
A wind picker on a windsock: calm leaves it hanging limp, a breeze lifts it halfway and a gale flies it straight out, fluttering faster as the wind grows while the grass leans.
A wind speed slider drawn as a windsock: in calm air it hangs limp from the pole, and as the wind picks up it lifts level and fills, flapping faster, with the Beaufort name in the reading.
A clockwork checkbox with a wind-up key on top: ticking gives the key two quick turns and lets go, then the key turns back in clicks and the tick clicks in with it, step by step, while the box rattles.
Hover sweeps a clip-path from inset(0 0 100% 0) to inset(0 0 0 0): a bottom-to-top wipe that reveals hidden card content. A placeholder state fades out simultaneously. Sharp cubic-bezier easing gives the reveal a crisp, decisive feel.
Rain gathers on a windscreen, the wiper sweeps across and clears every drop it passes, swings home, and the rain starts to gather again.
On hover, the primary label slides out to the left while a secondary label simultaneously slides in from the right, both driven by the same translateX transition. Different from swap-text which moves vertically; this is a horizontal wipe with distinct label content. No dependencies.
A 3D slab drawn in wire, turned at an angle with dashed hidden edges. On hover it squares up to face you and materialises face by face, each side filling in a beat after the last.
On focus the input jiggles with a CSS keyframe combining rotation and translateX zigzag over 400ms then settles. Playful tactile feedback.
A pill crawls along a row of four dots like a page indicator, stretching onto the next dot before its tail follows, then reaches all the way back.
Gaming-style XP progress bar fills left-to-right on selection with a gradient bar and particle burst effect. Selecting an option "awards XP": the bar charges from 0% to 100% and confetti sparks pop at the fill edge.
On each click, a "+100 XP" label floats upward from the click position and fades out over 860ms via CSS keyframes. A running total increments in the button label. Click position is captured from the mouse event and used to place the floating element.
A finished card with an x-ray lens: move the pointer over it and a round lens follows, showing the wireframe underneath, the same layout drawn as dashed boxes on a grid with each element's spec.
Both states have visible content: unchecked shows a dim × (reject), checked shows a ✓ on a solid fill (approve). The × rotates away as the ✓ rotates in. The box shifts from faint to solid. A clear reject→approve narrative.
Two values on one pad, like a synth filter: drag the puck and it follows with a little lag, leaving a fading trail, with crosshairs through it and both values read out above.
A ball of yarn rolls away, paying out its thread and shrinking as it goes, then rolls back and winds itself up again.
A yo-yo drops spinning off a finger, sleeps at the bottom of the string, then a tug sends it climbing back up into the hand.
A bipolar exposure slider: the fill grows from the centre in either direction, the thumb sticks at zero for a moment as a drag crosses it, and the sign flips over.
A zip checkbox: ticking runs the slider along the zip, the teeth lock together one after another behind it, and the pull tab swings and shows a tick; unticking unzips from the far end.
An unzip slider: drag the pull along and the zip opens behind it, the teeth parting along both edges in a widening V.
A zip as a switch. The pull slides along the track and the teeth interlock behind it as it goes; switching off runs it back and the two rows part again. Pure CSS on a native switch.
Checkout tabs on a zip: the slider rides to the chosen tab, meshing the teeth behind it and parting them ahead, its pull swinging from the speed.
A Victorian spinning disc. Twelve drawings around the rim stand still as a disc, but spin it and the optical trick kicks in: the figures run and the balls bounce, with no video anywhere.
Focal lengths through a viewfinder: choose 24, 50 or 85 mm and the scene zooms in or out on the tree with a moment of focus breathing.