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 comic-book bulb horn. Hold to squeeze the rubber, let go and a HONK bursts out of the bell with an impact frame. The longer you squeeze, the bigger the burst.
A basketball checkbox: ticking shoots the ball in an arc through the hoop, the net swishes and the backboard lights with a tick; unticking rolls the ball back.
A size picker where a ball hops tile to tile to the size you choose, one bounce for every tile it crosses, squashing as it lands on each.
A ten-step slider whose thumb hops from step to step in little arcs, squashing as it lands, with a dotted trace of each jump fading behind it.
Feed tabs where a dot hops in an arc from the old tab to the new one and lands with a squash.
A synthwave button: a perspective grid floor rushes toward you under a slatted sun on the horizon line. Hover hits the throttle, running the floor four times faster without a jump, and the sun brightens.
Water pressure: the stream arcs further from the nozzle and splashes where it lands; reach the pot and the flower perks up.
An hourglass: sand drains from the top bulb in a thin stream and piles up in the bottom one, then the glass flips over with a little overshoot and it starts again. The flip lands on the exact frame the loop restarts on, so it never jumps. Pure CSS.
A timer slider as an hourglass: drag up to add minutes and the sand flows back into the top bulb, while the stream keeps trickling into the pile below.
A focus-timer switch: the hourglass flips over and the sand runs through to the other bulb in a thin stream. Switching back flips it again and the sand runs back.
Card floats upward and casts a deeper shadow on hover. Spring overshoot easing gives it a satisfying pop. Pure CSS transitions, no dependencies.
Four L-shaped corner brackets animate inward on focus, locking the input in a targeting-reticle frame. Sci-fi HUD aesthetic.
A warp switch on a starfield track: switching on, the ship jumps across and every star stretches into a hyperspace streak racing past; off, the stars settle back to dots.
A drink option: add ice. Ticking drops three cubes into the glass one after another; each plunges in with a splash, bobs up and floats, and the drink rises as they go in. Clearing melts them away.
An ice the cake checkbox: a piping bag moves along the tick and pipes it on bead by bead; unchecking melts the beads back the other way.
A leading icon rotates and shifts on focus with a spring overshoot, while the border glows and a box-shadow ring appears. The icon color transitions from muted to accent, giving the field a lively focused state.
A bottom bar whose icons act out their meaning when picked: the door opens with a puff from the chimney, the glass scans, the bell rings and the head nods.
An icon style picker whose options are the same bell drawn three ways: the big bell restyles to match, the fill pouring up for filled, a lighter tone for duotone, and draining away for outline.
A dark-mode toggle pill with a sun/moon icon swap. The track shifts from a deep charcoal gradient to a light gray gradient. The knob slides with spring and crossfades between a moon (off) and a sun with rays (on). Each icon counter-rotates 90° as it enters/exits.
An access badge: on hover a scan line sweeps down it, each field ticks as the line passes its row, and a CLEARED stamp slams onto the photo at the end.
An engine switch: turn the key in the ignition barrel and the dash lights sweep round it in sequence. Off, the key springs back and the lights go dark.
An image fit picker with a portrait picture in a landscape frame: contain shows all of it with bars at the sides, cover fills the frame with the cropped parts showing faintly outside, and fill stretches it so the sun turns into an oval.
Dashboard tabs with an underline that moves like an inchworm: its leading edge reaches the new tab first and the tail draws up behind it.
A bright streak with a fading tail races endlessly round a figure-eight track, crossing itself in the middle. Two dash segments on the same SVG path, offset so the head always leads the tail. Pure CSS.
The box fill spreads via border-radius morphing through organic amoeba/blob shapes, animating through asymmetric four-corner border-radius values before settling square again. Feels like ink spreading.
An ink blot spreads from the center of the selected radio dot, scaling from 0 to 1 with a dramatic ease-out cubic-bezier and slight overshoot. The ink bleeds into a rich dark fill with a subtle paper-like texture vibe.
A dedication card where every letter bleeds onto the paper like ink: it lands blurred and slightly large, sharpens as it dries, and leaves a small blot spreading out beneath it.
A liquid blob of ink trails the cursor across the card, a head and a tapering tail of droplets melting together through an SVG goo filter inside an alpha mask, and wherever it flows it reveals an inverted version of the card. A click floods the whole card.
On click, a circular ink-blot radial gradient expands from the center of the button and fades out via a CSS keyframe animation. The effect is re-triggered on every click using the removeAttribute/offsetWidth/setAttribute pattern.
Mail tabs where ink spreads out from exactly where you pressed the tab and drains away from the one you left.
Checkboxes set inside a sentence: each sits on the baseline before the words it governs, and ticking it brings those words from grey to ink.
A wide volume bar with its label inside: the fill sweeps under the words and inverts them where it covers them, and the speaker icon gains and loses waves as you go.
An invisible ink checkbox: ticking sweeps a UV light across the box, showing the hidden tick only where the light shines, then the whole tick lights up and glows.
A camera aperture as a button. Six shaded blades meet in a closed iris; on hover or focus they twist open together to reveal the action glowing inside, and close again when you leave.
An aperture slider drawn as a lens iris: the blades close in and turn as you stop down from f/1.4 to f/16, and the soft lights behind sharpen into focus.
A compact now-playing pill with live equaliser bars that morphs into a full player card on hover, Dynamic Island style: it springs wider and taller, and the artwork, progress and controls stagger in once there is room.
A surprise switch drawn as a jack-in-the-box: the crank turns twice, the lid springs open and the jack pops out wobbling; off ducks him back in and shuts the lid.
On hover, the button squishes and stretches with a decaying scaleX/scaleY oscillation that simulates rubber or jello physics, starting with a large deformation and settling back to rest over 600ms. Re-triggers cleanly on every mouseenter. No dependencies.
A jelly cube checkbox: ticking squashes it and it wobbles, stretching tall and wide in turn, while the tick drops in and sets; unticking gives a smaller wobble.
A jellyfish pulses its bell to push itself up, then drifts back down while waves ripple along its tentacles.
A name and number on the back of a shirt: every letter is heat-pressed on in an arch across the shoulders with a puff of steam, and the number presses on below.
Profile completion without a progress bar: each step is a jigsaw piece. Drag the loose ones into the picture, or click to send them home, and the last one finishes it.
Two hands juggling three balls in a cascade, each ball thrown across in a real arc, caught and carried round to be thrown again.
A jukebox song picker: the old record slides off the deck, the new one slides on and spins, the tonearm lifts and drops back, and an equaliser plays beside the title.
A turning kaleidoscope: three drifting shapes in one wedge are mirrored into six, so they meet and part in symmetric patterns while the whole disc slowly rotates.
A two-column board: drag a task across and it lifts and tilts as you carry it, a dashed gap opens where it will land, and it settles into the other column as the rest glide over.
Collection tabs in small caps whose active label opens its letter spacing; the row reflows around it, so every other label slides aside to make room.
A kettle switch: the lever flips, the base light comes on, bubbles start rising in the water window and steam curls from the spout. Pure CSS.