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 pocket knife: the tool you pick swings out over the top on its pivot and clicks open, the last one folds away, and the knife slides over to keep the open tool in the middle.
A pocket multitool: pick a tool and the last one folds shut, the body slides over if it has to, and the new one swings out on its pivot and locks open with a glint.
A music box mechanism: the pinned drum turns, each pin plucks a tooth of the steel comb, the tooth twangs and a note floats up. It plays a nursery tune.
A sound switch: switching on, the sound waves spread from the speaker one after another and keep a soft pulse, and the mute slash wipes away.
A "Hello, my name is" sticker: your name is written on in marker one letter at a time, and the sticker lifts at the corner while you type and presses flat when you are done.
A reminder field that reads plain language: write "next fri 3pm", "tomorrow 9am" or "in 3 days" and a calendar chip flips in with the exact date, time and how long until then.
A row of compass needles above the track all swing to point at the thumb; the ones it has passed are inked, the ones ahead stay faint, and they wobble a little as they settle.
A dark box with a near-invisible border that transforms into a white neon sign on check. A brief 400ms flicker keyframe (simulating a neon tube buzzing to life) plays on activation. The check stroke has a drop-shadow glow matching the neon color.
On hover the card border lights up in silver and a layered box-shadow creates a bright neon halo effect. Pure CSS transitions, no dependencies.
A white neon glow breathes in and out continuously around the button using layered box-shadows, ideal for a primary CTA that demands attention. Pure CSS, no dependencies.
A neon glow box-shadow breathes in and out on a looping CSS keyframe while the input is focused. Sci-fi terminal aesthetic in glowing grays.
Three concentric light rings that expand outward from a glowing core dot. Pure CSS, no dependencies.
An OPEN sign as a switch. Off, the tubes are dark glass; on, the word stutters to life with a few flickers before burning steady with a glow that lights the board, and the E keeps catching now and then, like a real sign that needs a new transformer. Pure CSS on a native switch.
Neon signs as tabs: the chosen sign stutters on a few times before it holds, the old one fades off, and a letter of the lit sign buzzes now and then.
An SVG rectangle border traces around the selected option using stroke-dashoffset animation, drawing a neon white circuit-board outline from the top-left corner around the full perimeter. The glow persists after tracing.
Choose how many dolls: each new one hops out of the last as its top lifts off, and they line up by size.
Outer raised dual-shadow transitions to an inset pressed dual-shadow on focus, making the input appear to sink into the soft surface. Smooth 250ms transition.
A dark neumorphic toggle with a recessed track and physically-raised knob created entirely from layered box-shadows. Off: dark extruded knob on dark track. On: light knob with glow slides right, track gains a soft inner glow.
Six node dots arranged in a hexagonal halo around the radio indicator light up in ripple sequence with staggered animation-delay on selection, connected by faint SVG lines. Simulates a neural network firing pattern.
Five balls hanging from a bar on strings. The end ball swings out and falls back; the knock travels through the still middle three and kicks the far ball out, and back again, with easing that slows at the top of each swing like a real pendulum. Pure CSS.
A nib size picker: choose fine, medium or broad and the pen signs the line again in that width, the nib riding the stroke from the first letter to the flourish.
The thumb is a pen nib and the fill is the line it draws: drag slowly for a heavy stroke and quickly for a hairline, so the fill keeps a record of how you moved.
A size picker with five detents: the thumb clicks into each notch with a little overshoot, the notch pulses and the chosen size label lifts.
A bottom bar with a notch cut under the active icon, which rises into a floating circle above the bar; pick another and the notch flows along to it.
A reporter's notebook card: on hover the elastic band slips off and the cover flips up and over the spiral to the to-do page underneath.
A note on a spiral notebook in handwriting on the ruled lines; when the page is full it flips over the rings and you carry on on a fresh one, and moving the caret back flips it back.
A sticky note pinned to the card: sweep the pointer past it and its bottom edge lifts in the draft, harder the faster you move, then flutters back down on a loose spring.
Three notifications stacked into one: open the stack and they spring apart into a list, a beat apart; clear them and they slide away one after another before the empty state fades in.
The value label rides above the thumb and shoves the Off and Max labels out of the way as it comes near: they get knocked down, out and tipped over, so the three never overlap.
An 8-sided button shaped with a CSS clip-path polygon. On hover, the entire shape rotates 22.5 degrees with a spring overshoot, the background gradient fills in, and the inner text counter-rotates to stay upright.
A number stepper whose digits are mechanical wheels: each one rolls to its new figure (the tens wheel slides in and out as it is needed), and you can step with the buttons, the arrow keys, or by dragging the number sideways to scrub. Pushing past a limit bumps against it.
Rolling digit reels count from 000 to 100 percent in uneven jumps, like a real transfer; each reel rolls forward through its digits with a little bounce, then the count holds and starts over.
A budget slider with an odometer: each digit of the amount rolls on its own drum to the new value, a beat apart, and leading zeros fold away.
Neo-brutalist hard offset shadow: unselected options sit with a (4px, 4px) black drop-shadow offset; on selection the shadow collapses to (0,0) with a snappy transition, as if the block was pushed flush into the wall.
A three-step intro card: Next slides the new step in from the right and Back from the left, while the progress pill stretches across to the new dot and pulls its tail after it.
A dot orbits a center point along a faint circular track. Pure CSS rotation, no dependencies.
On hover, 6 dots orbit the button in a continuous circle via CSS keyframes. Each dot shares a single rotate→translateX→counter-rotate keyframe; staggered negative animation-delay offsets each dot to an evenly-spaced starting position. The lead dot is slightly larger.
A profile card whose skill tags orbit the avatar in a tilted ring, passing in front and behind. On hover the orbit stops, the avatar and name lift, and the tags fly down and settle into a neat row.
A glowing white dot orbits the checkbox perimeter for ~700ms on check, then vanishes and the check mark snaps in. Unchecking instantly removes the check. Gives a satisfying "loading then locking" sequence.
Planet tabs with a small moon orbiting the active label, passing behind it and in front of it on a tilted ellipse; pick another and it swings across into orbit around the new one.
An orbit switch: the planet travels half an orbit round the star with every press, always moving forward, and the star lights up when the switch is on.
Rank your picks: each box you tick shows its place (1, 2, 3) instead of a tick, and unticking one moves the later picks up a place, their numbers rolling over.
A sort control: choose name, price or rating and the rows slide into the new order with a little spring, while the column you sorted by lights.
A button with a live oscilloscope screen. The trace runs as a sine at rest, bends into a square wave and speeds up on hover, and a click fires a pulse that travels along the line.
A cloud cover slider: clouds drift in from either side one after another as the cover rises, the sky greys over and the sun dims behind them.
A short bio field with a limit: letters past it sag off the end of the line, each a little lower than the last, struck through as if spilling over, and the count turns into how many too many.
Library tabs where switching zooms out to show every panel side by side, slides along to the new one and zooms back in on it.
A pace picker: choose walk, jog or run and footprints appear along the trail, spaced further apart and coming faster at each pace.