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.
On click, a single transparent ring (border only, no fill) expands outward from the exact click point and fades, different from ripple which fills. Multiple rings can overlap. Uses React useState to track active rings and removes them after 540ms. No dependencies.
Library card-catalogue drawers as vertical tabs: the chosen drawer pulls out and its index card rises beside it with the entry.
A layer cake on a turntable: the slice slides back in, the cake turns to bring the new flavour to the front, and that slice slides out showing its layers.
An amount field that does arithmetic: type a sum and the total rolls in beside it digit by digit; Enter swaps the total in with a flash and keeps the sum it came from as a note below.
A tear-off calendar checkbox: ticking flips today's page up over the binding to show the day ticked off underneath; unticking flips it back down.
A burn time slider drawn as a candle: it melts down to a stub as the hours pass, drips lengthen down its side and the flame and glow follow it down.
A candle as a switch. Switching on, the flame swells up off the wick with a warm glow around it and keeps flickering; switching off snuffs it, and a thin wisp of smoke curls up from the wick and fades.
A latching keycap. Pressing it sinks the key into its well with a little overshoot and it stays half down while on, with the LED in its corner lit; pressing again pops it back up. Pure CSS on a native switch.
A captions setting beside a tiny playing video: ticking lights the CC badge and a caption bar rises over the picture, its words appearing one after another. Clearing takes the captions away.
A camera mode picker: the shutter button morphs between photo, record and portrait, video adds a blinking record tag and portrait melts the background behind the subject.
A card payment field: digits drop onto the card face in groups of four as you type, and the card turns over to its signature strip while you enter the security code.
A radio group where each option is a full card row with a title and subtitle. Selecting a card reveals a light left-edge accent stripe via inset box-shadow, brightens the border and background, brightens the subtitle, and springs a small dot indicator. Ideal for plan/tier selectors.
Product tabs over a card whose pointer slides along its top edge to sit under the active tab, while the new text slides in from the side you moved towards.
A card with a swipeable gallery that snaps to each slide; the dots below stretch and shrink with the scroll position itself, so they move mid-swipe rather than only when a slide lands.
A ring of dots seen at an angle turns in depth: the near dots swell and brighten, the far ones shrink and fade.
Product tabs whose label flies down and grows into the panel heading when picked, while the old heading shrinks back up into its own tab.
A product card: add it to the cart and a copy of the product flies in an arc into the cart icon, which bumps as its badge pops up with the new count.
A box size picker in 3D: the flaps open, the carton grows or shrinks to the new size, the short flaps fold in, the long ones close over them and a strip of tape runs across.
Tracks on a tape: pick one and the reels wind fast forward or back to it, the near-empty reel spinning hardest, the tape packs trading size and the counter running.
A playback switch shaped like a cassette: on, the reels spin and tape slowly winds from one spool to the other, and the play lamp lights.
A light slider whose thumb is a small lamp: the scale ticks stand up from the track and each throws a shadow away from it, long far off and short close by, swinging round as the lamp passes.
A catapult checkbox: ticking swings the arm and flings the tick in a spinning arc into the box, which lights as it lands; unticking hops it back into the cup.
A real pun on check box. A cat sits watching an empty carton; tick it and the cat crouches, leaps in with a thump and peeks over the rim while a tick prints itself on the carton.
A lesson done checkbox drawn in chalk: ticking it scrawls a grainy tick inside a hand-drawn box and a little dust falls from it.
Lessons on a chalkboard: an eraser rubs out the old underline, leaving a faint smudge, and a fresh chalk line scratches in under the new lesson.
A fighting-game style button: hover to charge a light gray power bar from left to right over 1.5 seconds via requestAnimationFrame. When the bar reaches 100%, the button fires, turning bright white with a pulsing box-shadow glow and "FIRED!" text for 800ms. Mousing away before full charge resets the bar. No dependencies.
A fast-charge switch shaped like a battery: the cells fill one by one, a bolt drops in, and the last cell keeps pulsing as if still charging. Off, they drain from the right.
A light gray progress bar fills left-to-right inside the box over 600ms like a battery charging. When full, the bar fades and a check mark springs in. Unchecking drains the bar.
A chart type picker: from bar to line, the bars shrink into points at their own tops and a line draws through them; area then fills in under it.
Six dots run round a circle, bunching up as they slow over the top and spreading out as they race round the bottom.
A conversation that plays itself out: typing dots appear, then each message springs in from its own side, until the thread is full and starts again.
A square checkbox that fills with mid-gray on check. The SVG checkmark springs in with an overshoot scale: a completely different shape from pill-style toggles. No dependencies.
The box is sixteen tiles: ticking flips them in a diagonal wave from the top left into a chequered flag, and the tick lands on top.
A to-do card: ticking an item draws its check and strikes its text, the progress ring steps round, and finishing the list pops in a new heading.
Tick it and the queen glides across the board, the king wobbles and topples over: checkmate. Untick and the king stands back up.
A checkbox where the SVG checkmark springs into view with a scale overshoot (cubic-bezier spring) on check and collapses instantly on uncheck. No keyframes needed: pure CSS transition on the SVG transform.
The other kind of check. A proper paper cheque with fine print and perforations: tick it, the Sign here flag peels away, a signature writes itself and a PAID stamp lands.
A whose-turn switch drawn as a chess clock: the plungers rock across, one clock stops dead and the other starts ticking from where it was, its flag standing up.
A pawn promotion picker: choose queen, rook, bishop or knight and the piece drops onto the square with a flash.
Pick how many squares to break off a bar: they snap off from the end and land on a little pile, and slide back if you change your mind.
A little monster sits next to its own label and watches your cursor. Press and it opens wide, sucks the word in letter by letter, chews, says Yum and spits the word back out.
A password field where every character scrambles through glyphs for a moment before it settles into a dot. Show decodes them all in a wave into the real characters; Hide scrambles them back.
No box: a circular ring indicator. On check, an SVG circle stroke draws around the full circumference via strokeDashoffset, then the check mark springs into the center. Completely different shape from square checkboxes.
A button wired into a circuit board. On hover, current pulses race along every trace from the pads into the button, and the button powers up as the first pulses arrive.
A circuit switch: a chip slides into place on a small board, current runs along the traces from it, and the LEDs at the end light up.
An inset slider drawn as a vice: drag either jaw and both close in from the ends together, and once they reach the word between them they squeeze it narrower.
A video card as a film slate. Press and the sticks snap shut in a puff of chalk, the slate drops away, the old film countdown runs, and a silent reel plays until the iris closes on The End.
A claw machine checkbox: ticking lowers the claw into the bin, opens it and lets the tick drop; unticking sends it back down to grab the tick and lift it out again.