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 recipe card: change the servings and every quantity rescales, the old figure rolling out as the new one rolls in, one ingredient after another.
A stitch picker on a sewing machine: the needle keeps sewing as the cloth feeds by, and the new stitch starts right at the needle while the old one travels off with the fabric.
An ink-strength picker: the track is the ramp from paper to full ink, the thumb carries the shade you pick, and the swatch beside the name fills with it.
A dark mode switch drawn as sunglasses: the lenses tint from the top down like photochromic glass and a glint slides across them.
On invalid submission the input rattles horizontally to signal an error: a rapidly damping shake with a bright border. Pure CSS keyframes, no dependencies.
The box rattles in a rapid X-axis jitter sequence as if locking in, then snaps to the checked silver fill. Unchecking plays a shorter reverse shake. Kinetic, mechanical feel.
A shape picker whose preview morphs: circle, square, triangle and star are all 20-point polygons drawn from the top clockwise, so choosing one melts the preview straight into the next with a springy overshoot. Pure CSS (clip-path interpolation).
A click breaks the button into 24 irregular triangular shards, each a clone of the face clipped with clip-path. They burst away from the click point in 3D, hang in the air for a beat with their own lighting, then fly back and lock together with a small snap.
A sealed mystery card. Click and it cracks from exactly where you clicked into 3D shards that fly apart and fall away, revealing a reward underneath; click again and the shards fly back and reassemble.
Book spines as tabs: the book you pick tips forward off the shelf and the others settle back, and its title, author and a note appear below.
A tiny terminal: type commands like help, ls, date, whoami, echo or theme and the output slides up, Tab completes a command name shown as a ghost, the arrows recall history and clear wipes the screen.
A private switch drawn as a turtle: on, it pulls its head, legs and tail into its shell and settles down; off, the shell lifts and it peeks back out.
A gear stick in a gated plate. Switching on drives the knob out of P along its slot, round the corners and down into D, which lights up; off takes it back the same way. Pure CSS: the knob rides an offset-path drawn to match the groove.
A bright diagonal light streak sweeps across the card on hover using a CSS ::after pseudo-element, and the border stays lit while hovered. Resets instantly on mouse-leave. Pure CSS, no dependencies.
A skewed diagonal glare band slides across the button from left to right on hover. The glare is a semi-transparent white gradient on an absolutely-positioned span. The transition is one-shot on mouseenter (no reverse on mouseleave), giving a clean premium feel. No dependencies.
On click, 3 bright rings burst from the click point with staggered delays (0ms, 120ms, 240ms), each expanding and fading for a shockwave effect. Rings are spawned as DOM elements with CSS custom properties (--delay, --dur) and removed when done. No dependencies.
Sliding paper screens over a garden: pick a view and the screens slide one after another to open that bay, the scene showing softly through the paper.
A product on a turntable: a small 3D cube speaker turns slowly on a plinth above its own floor reflection. Hover spins the turntable up without a jump and sweeps a band of light across the card.
A password field over a paper shredder: each character feeds down into the slot and comes out as strips on the pile, leaving a dot on the slip. Show pulls the letters back out whole.
A deck is cut, riffled together card by card, squared up, and the top card flips over to show an ace.
The checked fill opens like a camera iris/shutter using clip-path polygon animation: panels spread outward from a collapsed line to full coverage. Sharp, mechanical feel.
Camera mode tabs as icon buttons: the active one fills as six iris blades close over it, and they open again on the tab you left.
A spring-loaded shuttle from an edit suite: push the handle either way and the time runs faster the further you push it, with chevrons lighting up; let go and it springs back to centre.
A plain Delete account button that does not want to be pressed: it leans away from your cursor and runs, pleading as it goes, then gives up on the third try and lets you. Keyboard and touch press it straight away.
A filter field over a sieve: as you type it sifts, the items that do not match fall through the mesh into the bowl, and the rest gather in the middle.
A wireless signal: the source lights first, then each arc outward in turn, all hold, then go dark together and start again.
On selection, three concentric arc rings broadcast outward like a radio transmission signal. Each arc scales and fades in sequence (120ms stagger), then a persistent inner glow ring settles. The radio icon vibe made literal.
A signal-strength slider: five bars rise and light one by one as you drag, and a word for the strength changes from No signal to Excellent.
A ready switch drawn as a railway semaphore: the arm drops to clear under its own weight and bounces on its stop as the lamp lights; off hauls it back up.
A signature pad with real ink: strokes thin out when you move fast and pool when you slow down, smoothed into curves. Type your name instead and it is set in a script face on the line; Clear starts over.
An open for orders switch drawn as a shop sign on a nail: it spins round from Closed to Open and swings on its string before settling.
Two sine waves flow past each other in opposite directions while their height swells and settles.
A size picker that shows the size. Above the S, M, L, XL pills, a T-shirt springs bigger or smaller to match the one you choose, and the chest measurement under it updates. Pure CSS with :has().
A skateboard rolls along, pops off its tail, kickflips a full turn in the air and lands rolling.
A morning skate checkbox drawn as an ice rink: a blade carves the tick into the ice, stops hard at the end and throws up a spray of shavings.
A shimmer content placeholder: avatar, name, and body line shapes with a sweeping highlight. Pure CSS, no dependencies.
A parallelogram-shaped button using clip-path. On hover, a gradient fill sweeps in from the left with a skewed transform, while the text colour transitions to white. The clip-path outline remains visible at all times.
A block skipping rope: the rope swings over the top and down in front, and the block hops just as it passes under, squashing on each landing.
An activity grid as a 3D city: twelve weeks of days become bars that rise in a diagonal wave. Move the pointer and the whole city turns to follow it; hover a bar to light it and read its date and count.
A small plane writes your text across the sky: it flies just ahead of the caret and each letter puffs out of its smoke trail.
Do not disturb. Off, the thumb holds a bell; switching on slides it across as the bell swings away and a moon turns in to replace it, the track goes night-dark with two stars, and little z's keep drifting up off the moon while it is on. Pure CSS on a native switch.
A pizza slice picker: choose 4, 6 or 8 slices and the cuts swing round to their new angles, a new cut drawing in when one is needed.
A mid-gray fill slides in from the left to fill the button on hover, then retreats on mouse-leave. Pure CSS transitions, no dependencies.
A 3x3 sliding puzzle where the gap walks round the edge forever, so the ring of tiles keeps rotating with a springy slide, the bright key tile riding round with them.
Classic on/off toggle: the thumb slides with a spring overshoot and the track fades between colors. Pure CSS transitions, no dependencies.
A fling switch on an elastic band: pull the thumb back against the band and let go, and it fires across to the other side and wobbles to rest. A plain click flicks it over too.
The fill is liquid in a sealed glass tube: drag and its face leans back against the motion, then sloshes forward past upright when you stop and settles level.
A post-title field that builds its URL slug live underneath: accents are stripped, symbols become dashes, and each character of the slug pops in only when it actually changes. Copy puts the full link on the clipboard.