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.
Snap to objects, the way a design tool does it: ticking drags the tick in as a selected object, slowing as it nears the box; at the last moment it jumps into place, the centre guides flash across the box and the selection lets go.
A little face as the checkbox. Unchecked it is a dark, straight-faced circle; checked it lights up with a bounce, the flat mouth swaps for a drawn smile and the dot eyes curve into happy arcs.
The text caret glides instead of jumping. Every move (typing, arrow keys, clicking, Home and End) slides a custom caret to its new place and leaves a short comet streak behind it that fades; it blinks only once it is resting. Selections fall back to the native highlight.
A snail crawling along: its foot stretches and gathers, the shell rocks, the eye stalks sway and a slime trail glistens behind it.
A five-segment snake slithers over a 4x4 grid of dots, cell by cell, weaving through every square on a closed path with its head brightest and its tail fading. Each segment rides the same offset-path with steps() timing, one cell behind the next. Pure CSS.
Let it snow: ticking sends a flurry down into the box, the flakes drifting as they fall, and as they settle the tick builds up out of the snow and a cap of snow forms on the rim. Clearing melts it all away.
A snowflake grows: six arms reach out from a hexagon and side branches sprout as each tip passes, then it melts back to nothing.
A place card you can pick up. Drag to shake and the snow lifts off the ground and swirls against the motion of the glass, then slowly settles on the town.
A snow globe gets a shake: the flakes swirl up round the little house and drift slowly back down to settle.
A cone slides under the nozzle, the soft serve swirls on tier by tier and finishes with a curl, then the cone slides off for the next.
A solar-charging switch: a small satellite unfolds its panels one by one on both sides, then light glints across the cells and its status light turns on.
A short to-do list that tidies itself. Checking a task slides it down below the open ones while the others glide up into its place, and a progress bar over the list fills and counts; unchecking floats it back up.
A circular spectrum: forty bars round a ring pump to their own beats in clusters, like frequency bands, while the whole ring turns slowly.
A stock card: on hover the day's price line draws itself across the chart with the area filling under it, and the price counts up from the open to the close as the line arrives.
On check, 8 short white spark-streaks shoot outward in all directions and fade quickly, like an electric discharge. More energy-focused and rapid than confetti: pure white, no color variation.
A collection item as a butterfly pinned in a museum case with its Latin label. Its wings stir as you come near; release it and it flaps off the page, leaving just the pin.
A typeface picker: choose serif, sans or mono and the specimen dissolves and resolves in the new face, like a lens racking focus.
A speed-limit slider as a car gauge: the needle sweeps the dial with a little overshoot, the lit arc follows it and the digital reading changes in km/h.
A heat level picker: mild, hot or fire light up one, two or three chillies in turn, heat shimmers rise above them, and at fire the chillies shake.
A circular ring with a transparent track and a solid arc that spins continuously. Pure CSS, no dependencies.
A spirit level rocking on a fulcrum: the bubble runs to the high end each time it tips, then it comes level and the bubble settles between the marks.
A toothed wheel rolls round inside a ring and its pen draws the eight-petal figure in step with it, then the line fades.
An airport departures board. Each letter is a split-flap tile; on hover the tiles flip left to right through a few random characters on hinged leaves before landing on the next label, and flip back when the cursor leaves. Interrupting mid-flip retargets cleanly.
A departures board that reads OFF or ON. Switching clatters each letter through a few flaps on its own beat before it lands, top half falling and bottom half dropping into place; a letter that doesn't change stays put, as on a real board.
Two opaque panels cover the input at rest like sliding doors. On focus they translate outward (left panel slides left, right panel slides right), revealing a gradient background underneath. A sharp cubic-bezier gives the reveal a decisive, mechanical feel.
A floating label that splits into its words: on focus each word rises above the field and shrinks on its own, staggered left to right, then drops back in reverse when the field is cleared.
A segmented control that is one continuous bar until you pick: the active tab parts from it, with gaps opening either side and its corners rounding off into a pill of its own.
A message with a hidden spoiler: the hidden words shimmer under drifting, twinkling specks, and a click scatters the specks outward from where you clicked as the words fade in.
A download button: the underline unwinds onto a spinning reel as the file comes in, the reel fills with the wound tape, then caps over and turns into a tick as it saves.
A length slider whose thumb is a spool of thread: it rolls along the track laying its thread down as the fill, shrinking as it runs out and filling out again as it winds back.
A soft circle of light fades in under the cursor and follows it across the button, written to CSS custom properties on mousemove so nothing re-renders. The rest of the button stays dark. No dependencies.
A soft radial light fades in and follows the cursor across the card, like a torch, while the border lights up. Pure CSS + mouse tracking, no dependencies.
A spotlight checkbox: ticking swings a spotlight round onto the box, its beam lights the floor, and the tick appears in the light; unticking turns it away and dark.
A radial gradient spotlight follows the cursor horizontally inside the input as the user mouses over it, creating a torch-light illumination effect within the field.
A tag it checkbox drawn as spray paint on a brick wall: the can sweeps along the tick, painting it in a soft haze with puffs of mist, then a drip runs down from the heaviest corner.
A radio group where selecting an option springs a gray inner dot in with overshoot, adds a soft glow ring on the outer circle, and brightens the label. Mutual exclusivity via native radio semantics.
A tension slider as a coil spring: drag and the spring stretches between the wall and the weight, its coils flattening out as it lengthens, with the force in newtons below.
Framer Motion spring physics drives both the thumb position and the track color: the thumb overshoots and bounces back with genuine physical weight.
A glazed donut as the checkbox: ticking showers it with sprinkles that fall spinning and land on the icing at their own angles with a tiny bounce. Clearing brushes them off.
Checking plants a seed: the box fills and ticks, then a stem grows up out of its top edge and two leaves unfurl one after the other before the little plant starts to sway. Unchecking pulls the sprout back into the soil.
An eco-mode switch: the stem grows out of the seed, two leaves unfurl one after the other and a bud pops at the top. Off, it all withdraws into the soil.
A playback scrubber whose played part is a travelling wave. Hold it and the wave settles flat so you can aim; let go and it ripples back, with the elapsed and total time below.
Notes tabs with a playful underline: it wiggles into a wave while it travels to the new tab and lies flat again once it arrives.
The thumb stretches horizontally as it slides, peaking at 1.5× width mid-travel before snapping back to a circle at the destination.
Three layered cards sit in a tight stack at rest. On hover they fan outward (back card rotates −6° and slides left, middle rotates +5° and slides right, front card lifts upward), using a spring cubic-bezier that physically overshoots before settling.
Three blocks drop one after another onto a shelf and stack up, each landing with a squash and a little recoil, then the finished stack slides off and the next one starts. Pure CSS.
Payment cards as tabs: the chosen card comes to the front of the deck and the others shuffle back behind it.
On hover, each letter of the button label jumps upward with a spring-overshoot cubic-bezier transition, staggered by 38ms per character. All letters return to baseline on mouse leave.