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 magnifying glass follows the cursor across the button at 2.5x, rendered from a clone of the content shifted by CSS so the point under the cursor sits in the middle of the lens. The fine print under the label is only readable through it.
Collection tabs read through a loupe: the magnifier glides to the chosen tab and inside it an enlarged copy of the row slides along in register, so the label is always magnified.
A light slider made of slats that turn face-on as the thumb passes over them and edge-on as it leaves, so every drag sends a wave along the row.
The moon running through its phases, new to full and back to new, with a true curved terminator and faint craters showing through.
A light level picker drawn as a pendant lamp over a table: its beam and the pool of light on the table widen and brighten with each level.
The button follows the cursor with spring physics, pulling toward the mouse like a magnet and bouncing back on leave.
Card layers move toward the cursor at different strengths (the orb the most, the backdrop at 30%, the text at 15%), creating a parallax depth illusion without any 3D rotation or perspective.
The label springs from center-left into the top-left corner of the input on focus using Framer Motion layout animation. Springs back on blur if the field is empty.
The selection indicator snaps to the chosen option with a magnetic spring-overshoot cubic-bezier: fast pull-in followed by a damped overshoot, simulating ferromagnetic attraction. Field lines ripple out on snap.
A recommended value marked on the track pulls the thumb in when you drag close, with the pin leaning towards it and a pulse when it catches; drag on past to break free.
A magnetic lock switch: on, field lines flow round the magnet and the steel ball accelerates into it and hums against the poles; off, it is pushed away and coasts back.
A mailbox checkbox: ticking slides a letter in through the door and then swings the flag up with a bounce, lighting it; unticking lowers the flag again.
An email signup with a mailbox: the door drops open once the address is valid, sending flies the letter in, the door shuts and the flag goes up.
A marble run checkbox: ticking rolls a marble down the ramp, over the edge and into the hole in the box, where it lands with a bounce and the hole glows; unticking pops it back up the ramp.
A marble zigzags down four ramps, spinning the way it rolls, and a lift carries it back up to the top.
A Markdown task checkbox: ticking blinks a caret between the brackets and types an x into them; unticking deletes it, and the task text dims while it is done.
A ticket button framed in theatre marquee bulbs: on hover the lights chase round the border, and when you press they all flash together.
Showtime tabs with the active one framed in chasing marquee bulbs; pick another and the frame of lights travels across to it.
A phone field with its format printed in place: digits drop into the slots of +1 (___) ___-____ as you type, the remaining slots stay faint, and a tick draws in once it is complete.
A restaurant booking card drawn as a matchbox: on hover the drawer slides out of its printed sleeve with the booking inside, a row of matches beside it.
A confirm password pair: beads between the two fields light and link up as each character of the confirmation matches, shake at the first wrong one, and close into a chain when they all match.
A switch drawn as a match: it strikes along the box, sparks and catches into a flickering flame; switch it off and the flame goes out in a thread of smoke.
On selection, the label characters cycle through random glyphs (0–9, symbols) before resolving to the real character: a Matrix-style decode effect. Monospace light gray font on dark background. Each character resolves on a staggered delay.
A generated maze solves itself: the route draws from the entrance in the top corner to the exit in the bottom one, the goal flashes as it arrives, and the line fades before solving again.
A blueprint title field: your text sits on a grid between baseline and cap-height guides, and a dimension line with end ticks measures its real width in pixels, the number counting as it changes.
Inspector tabs with a designer's dimension line spanning the active tab and its width in pixels; it stretches across to the new tab while the number counts through every width on the way.
The button is a rubber skin drawn as an SVG path. Leave it and the edge you exit through stretches after the cursor until it lets go and wobbles home on a spring; a press squishes every side inwards and the release boings. A small rAF spring integrator, no dependencies.
A git branch checkbox: ticking draws the branch curving back into main, the merge commit fills with a tick and pulses; unticking leaves the branch open again.
A price range with two thumbs, each with its value above it; bring them close and the two labels slide together and merge into one range label.
A message field on a sheet of paper: sending rolls the note up into a bottle, the cork goes in and it floats off over the waves while a fresh bottle drifts in.
A metronome: the weighted arm swings across its scale and a light flashes at each end of the arc, exactly on the beat.
A tempo picker on a metronome: choose largo, andante or presto and the weight slides along the arm while it swings at the new speed, with a light on every beat.
Stop tabs on a metro line: the train rides the line to the chosen stop, easing in and braking, its doors open once it stops and the stop's notes appear.
A merge switch made of goo: a cell stretches, necks and splits, and the drop that breaks away re-forms as a full cell at the other end.
A Mobius band built from slices: each one is twisted by half its angle round the loop, so the band carries a single half twist. The slices roll round their own loop endlessly while the whole band turns slowly in 3D.
Two identical ring gratings overlap inside the button. One centre circles slowly by itself and follows the cursor on hover, so the overlap beats into moving op-art fringes around the label.
An engraving name field: as you type your name, your initials set themselves into an interlocked monogram in the crest above, the second letter in italic, each rising out of a blur.
A rating slider with a face: drag it and the mouth bends from a frown to a grin, the brows tilt, the eyes open wider and the cheeks blush as the mood rises, with the word flipping above. The face blinks now and then.
How was it? Five faces from a deep frown to a big grin. The chosen face springs up larger, fills in light with its features turning dark, and its mouth gives a little bounce while its name rises in underneath; the others stay small and dim. Pure CSS.
A rating slider with a face: drag and the mouth bends from a frown to a grin, the brows go from worried to raised, the eyes widen and a word names the mood.
A short horizontal line morphs into a check mark using SVG path d attribute animation, extending first, then bending into the check V-shape. Unchecking reverses the morph back to a line.
A single element that continuously morphs through three shapes (circle, blob, and square), while rotating and shifting color. Pure CSS, no dependencies.
On hover, the button morphs from a pill shape to a circle: the width collapses and border-radius transitions to 50%. The text label fades out and a decorative symbol fades in with a spring-bounce entrance. Both transitions are CSS-only.
Border-radius morphs through a personality arc on focus: sharp (2px) → pill (50px) → settled rounded (10px), played with the Web Animations API so typing is never interrupted.
On hover the label melts into the next word. Both words blur through each other while letter-spacing shifts, and an SVG alpha-threshold filter turns the overlap into liquid letterforms instead of a crossfade. Pure CSS, no script.
Hover and the button transmits its label in Morse code: a paper tape of dots and dashes runs past a read head while a lamp blinks in time with every mark. Leave and the tape stops where it is.
A signal switch that speaks Morse: off, the track spells OFF in dim dots and dashes; on, it keys in ON symbol by symbol and then transmits it on a loop.
A 3×3 grid of grayscale tiles that pulse in and out with a ripple delay, creating a vibrant mosaic shimmer effect. Pure CSS, no dependencies.