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 lap counter that keeps tally marks: tap the board and a hand-drawn stroke draws in, four uprights and then a slash across them for every five, while the count rolls up. Undo takes the last one back.
A streak counter drawn as tally marks: each mark draws itself in with a pen stroke, every fifth strikes through the four before it, and going back rubs them out from the end.
Seven solid pieces that slide and turn into a new picture on every press: a square, a sailboat, a cat, a fish. The button changes its whole silhouette.
A storage card filled with liquid. Move the cursor across it and the liquid leans toward you and sloshes, stirring the surface where you cross it; Clean up drains it to a lower level with a splash, and the percentage follows.
A packing checkbox: ticking slaps a strip of masking tape with a marker tick across the box, landing at a slight angle; unticking peels it away and off.
A tape measure runs its blade out, sags and wobbles at full length, then snaps back so the case jumps.
Collection tags held by washi tape: the tape peels off the old tag from one end and a fresh strip unrolls and presses down onto the new one.
A water flow picker: the handle turns further each step, from a drop that swells, falls and rings the water, to a thin running thread, to a full stream with splashes.
Four L-shaped corner brackets animate inward and lock around the selected option like a targeting reticle. The option glows white inside the locked frame. Unselected options show retracted ghost brackets.
HUD targeting brackets drift loosely outside the button. On hover or focus they snap onto it with a springy lock, crosshair ticks appear, and a readout above retypes itself from ACQUIRING to LOCKED.
A team card with overlapping avatars: hover the group and they spread apart one after another, the +3 chip folds away into the rest of the team, and pointing at a face names it.
A message field you key in Morse: tap the brass key for a dot or hold it for a dash, a lamp lights while it is down, the tape records each symbol, and pauses decode them into letters and spaces.
Click and the button is beamed out: it breaks into tiles that stretch up and vanish into a column of light, bottom row first, then rematerialises tile by tile from the top down.
A zoom slider as a telescope: the tubes slide out of each other and the moon in the eyepiece grows until its craters fill the view, with the magnification beside it.
A tempo slider whose thumb keeps time at the tempo you set: every beat it kicks and sends a ring and a pulse running both ways down the track, with every fourth beat accented.
A button that is a tiny terminal window. A click types out the deploy command, runs an ASCII progress bar to 100% in uneven steps, prints a success line, then resets to the prompt.
A tiny terminal window running an install: a braille spinner cycles through its ten frames beside a status line that rolls up through resolving, fetching, linking and building, then loops. Both are strips moved with steps() or held keyframes. Pure CSS.
A Wi-Fi switch as a tiny console: each change types the command in at a terminal pace and then prints the result, with a blinking cursor.
Agree to the terms only after reading them: the checkbox stays locked, a dashed box with a padlock, until you scroll the terms to the end. A bar fills as you read, then the padlock drops away and the box pops solid, ready to tick.
A plane of dots seen in perspective rolls with crossing waves, the crests rising and brightening, like a landscape breathing.
A button between two electrodes. At rest a short spark crackles now and then; on hover live arcs leap across the top of the button, redrawn many times a second, and a click discharges a burst of bolts with a flash.
A four-dimensional cube, a tesseract, turning through the fourth axis and projected down to a wireframe. The inner and outer cubes swap places endlessly while the whole shadow drifts, and the cube nearer in 4D is drawn brighter.
Water samples in a rack: the tube you pick lifts out and swirls, its contents spinning while the surface stays level, and the last one drops back with a clink.
The word "Loading" rendered in uppercase with a bright spotlight sweeping across it via background-clip:text, a text-as-canvas shimmer effect. Pure CSS, no dependencies.
A theme picker inside a preview panel. Choosing Light, Dim or Dark floods the panel with the new theme as a circle spreading out from the chip you picked, over the old theme, which stays put underneath until it is covered. Pure CSS: one layer per theme, stacked by z-index.
A heat camera as a button. The cursor leaves a warm trail that blooms outward in blocky cells and cools slowly, banded like a thermal readout, with the peak temperature shown in the corner.
A temperature slider as a glass thermometer: the column climbs the scale and the reading changes in degrees; near the top, the bulb starts to bubble.
A thrust slider for a rocket: the flame lengthens and flickers, the rocket lifts off its pad and shakes harder as it climbs, and at high thrust the stars start to streak past.
An exposure control set as a knurled roller in a slot: drag across it and the ridges roll past with real curvature, clicking into each third of a stop, with a fine line below showing where you are in the range.
A ticket with a perforated stub. Hover tugs at the stub; a click tears it off along the perforation and it tumbles away while the ticket reads Admitted, then a fresh stub slides back into place. The notches are radial-gradient masks, the perforation a repeating gradient.
A ticket quantity picker: choose one to four and the tickets fan out from the stack, one more for each step, or fold back in.
Mail tabs over a row of fine ticks: the ticks under the active tab stand tall and bright, and switching sends that crest travelling across to the new one.
Liquid rises inside the button on hover with two SVG wave layers rolling across its surface, and sloshes against the walls when the cursor moves fast: horizontal pointer speed tips the water on a spring. The label splits colour at the waterline through mix-blend-mode.
A tide picker: choose low, mid or high and the sea slowly rises or falls against the marks on the pier, with the waves running and a buoy bobbing on top.
A tide height slider drawn as a harbour: the water rises up the wall against its marks, the moored boat bobs up with it and the mooring line goes from slack to nearly straight.
The surface is a 12x4 grid of tiles. Entering flips them over in a wave that spreads from the exact point the cursor came in, each tile turning about the axis facing away from it; leaving flips them back from where it left. The label turns dark as the wave passes.
A puzzle checkbox: four scrambled tiles each turned a different way rotate back into place one after another, and the tick they make lights up.
App tiles: the chosen tile grows into the big slot with its icon and words, while the one it replaces shrinks down into the row of small tiles.
A Framer Motion button that rotates in 3D perspective as the cursor moves across it, using useMotionValue and useSpring to track mouse position into rotateX/rotateY transforms. A blurred white orb follows the cursor inside the button as a sheen highlight, and a depth shadow expands on hover. Requires framer-motion.
Card tilts in 3D toward the cursor using CSS perspective and rotateX/Y driven by mouse position. Springs back to flat on leave.
On hover, the box tilts in 3D perspective (rotateX + rotateY) giving depth and a subtle lift shadow. Clicking snaps it flat and fills with mid-gray. The tilt resets once checked.
Appearance tabs on a beam balanced over a pivot: pick a tab and the beam tips towards it, so the ball rolls down to it, and the beam levels out as the ball arrives.
A tilt-and-turn window as the picker: the handle turns down, across or up and the window closes, swings open on its side hinges or tilts in at the top, with a breeze coming through whenever it is not closed.
A tip picker with a jar. Choosing 10, 15, 20 or 25% drops that many coins into the jar one after another, each tumbling in and landing on the pile with a little bounce; picking less sends the extras back up out of the top. The amount updates underneath. Pure CSS.
A breakfast included checkbox: ticking it pops the toast up out of the toaster with a bounce, browned and ready, as the lever goes up.
Two slices sink into a toaster as the lever goes down, the light comes on and heat shimmers over the slots, then the toast pops up browned and drops back to rest.
A message tone picker: formal, casual or playful. The speech bubble changes shape, from a squared card to a rounded pill to a tilted blob, and the message rewrites itself in that voice.
An explore button whose letters tip over like dominoes on hover, each knocking the next, hold a moment and then stand back up in a ripple.