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.
Hover and the label spirals into a singularity: each letter orbits into the centre, the far ones last, while an accretion disc spins up in 3D. The core flares and a new word emerges from it.
A blend mode picker with a live preview: two overlapping circles, the top one really blended, so normal covers, multiply darkens the overlap and screen lightens it.
A window blind whose slats tilt open in a wave from the top, letting the light through, then close the same way.
Gallery tabs where the new picture appears behind a set of blinds that open across it, slat by slat.
A window with venetian blinds. Switching on tilts the slats open one after another from the top, letting daylight through in stripes that also fall across the sill below; off tilts them shut again. Pure CSS on a native switch.
A liquid blob indicator morphs and slides between options using Framer Motion layoutId. The blob stretches horizontally during travel, then snaps back to a round pill shape, simulating organic liquid motion between selection points.
A falling blocks checkbox: ticking drops pixel blocks into the box row by row until they stack into a tick, each squashing as it lands; unticking clears the line with a flash.
Game world tabs with an underline built of blocks: new blocks fall in and stack, bottom row first, while the old ones crumble and drop away.
A growth stage picker on a flower: from a closed bud the petals spread out to half open and then to a full flower, the outer ones last, and the centre grows and glows.
A switch shaped like a flower: on, the bud opens its six petals one after another with a springy pop and the centre lights. Off, they fold back into a bud.
Hover turns the button into its own spec drawing: the face becomes a dashed outline on a grid, extension guides draw out, and dimension lines with arrowheads label its real measured width and height.
A flight ticket with a tear-off stub: on hover the little plane flies the dashed route arc from origin to destination, banking to follow the curve.
A lock switch drawn as a door bolt: the bolt slides across into the keeper and its knob turns down into the notch with a clack; unlocking runs the other way.
A hardback book card: on hover the cover swings open in 3D past the spine, and the book slides over so the spread stays centred, showing the inscription on the first page.
A bookmark icon as the checkbox. Checking pours a ribbon of fill down from its top and the whole ribbon swings on its pin a few times before it hangs still; unchecking drains it back up. Pure CSS.
A reading list as a real shelf of spines, each with its own typeface. Hover and one rises; click and it turns out to show its cover while the others make room.
On hover, a white light beam races continuously around the button border. A 2px-padded wrapper div clips a large rotating conic-gradient square: only the border gap is visible, creating the illusion of a beam orbiting the perimeter. The button interior stays dark. No dependencies.
On focus, four border lines trace around the input clockwise (top, right, bottom, left), each starting after the previous finishes. Pure CSS transforms, no dependencies.
A conic highlight spins continuously around the card edge; on hover it brightens to white and casts a soft blurred halo. Uses @property for the angle and a transitionable colour.
A checkbox that plays a spring-bounce keyframe animation on the box itself when toggled: compresses then overshoots on check, lightly expands then settles on uncheck. Fill and border color transition simultaneously.
Three dots that bounce vertically in sequence: the classic typing-indicator pattern. Pure CSS, no dependencies.
A squash-and-stretch ball with a synced shadow: multi-stop keyframes fake physical bounce physics. Pure CSS, no dependencies.
A gift wrap checkbox: ticking it, a ribbon crosses the box in two bands, the knot cinches, the loops spring out and the tails fall last.
A ball rolls down the lane, shrinking into the distance, and scatters the pins, which the pinsetter lowers back into place.
A ball rolls back and forth inside a bowl, slowing at each rim, with a soft trail behind it.
A draw-weight slider as a bow: drag and the string pulls back with the arrow while the limbs bend further, with the weight in pounds below.
Tabs marked by a pair of brackets: they glide over to the new label and clamp in around it with a little squeeze.
One braille cell spells L-O-A-D-I-N-G. Its six dots rise and settle for each letter, with the printed letter underneath.
A calm breathing session button: at rest its halo breathes slowly; press it and it guides you through breathing in, holding and breathing out for two rounds, the halo swelling and shrinking with each step.
A cup of coffee on its saucer with three threads of steam curling up and thinning out, each on its own rhythm.
The track is a strip of brush bristles seen from the side: the thumb rides on their tips, bending them as it passes and pressing them down where it stops, and they spring back up behind it.
A go live switch drawn as a broadcast mast: switching on, the tip light blinks, rings of signal pulse out from the top and a live tag pops up.
An article as a folded newspaper. It spins in like the old film trope and lands; Continued below the fold really does swing the bottom half down, with dense serif type all the way.
Browser tabs with curved feet: the new tab lifts into place, its icon spins once as the page loads and the page skeleton fades in.
A brush size picker: choose a size and the preview stroke is drawn again at the new width, with a ring for the brush tip tracing along it.
A flow slider whose fill is a single brush stroke: it lands at half pressure, runs solid at the start and dry and streaky by the end, with a wet edge at the thumb.
A link button that paints one dry-brush ink stroke behind its label on hover, left to right, while the thin rule beneath fades and the label turns to read over the ink.
Neo-brutalist style: on focus a hard 4px offset black box-shadow slams from an offset position to zero, while the border snaps to high-contrast. Snappy cubic-bezier easing.
A bubble wrap checkbox: ticking pops the bubble with a squash and a burst of lines; unticking puffs it back up.
A soap bubble swells on a wand, wobbles free, floats up with a turning sheen and pops into droplets.
A radio group with 30px spherical indicators that transform from a flat hollow ring into a 3D gel/bubble using a radial gradient highlight at the top-left and a specular gloss spot. Selected state glows with a soft white aura and inset shine.
An air pump switch drawn as an aquarium: bubbles stream up from the air stone, the weed sways, and the fish notices and swims over to nose at them.
An opacity slider whose value bubble leans against the drag like it has weight, harder the faster you move, then swings upright once the thumb rests.
A buckle up checkbox drawn as a seat belt: the tongue slides into the buckle, which jolts with the knock, and a tick shows on the button; unchecking presses the button and the spring throws the tongue back out.
The track has rubber stops at both ends: the thumb runs into the far one, squashes it flat and is pushed back out, bouncing a little before it settles.
LOADING on a string of pennants. A breeze runs along the line and each flag lifts, flips back and settles in turn.
A gas burner: choose low, medium or high and the knob turns while the row of flickering flames drops low or roars up, the glow under them following.
A heat switch drawn as a gas hob: the knob turns, the igniter sparks and a ring of flames catches round the burner one after another, then flickers.