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 checkbox whose interior is a 4×4 grid of micro-squares that fill in one by one in a randomised stagger order on check, and clear in reverse on uncheck. Retro pixel game aesthetic.
8-bit retro radio: a 4×4 grid of micro-pixels fills in sequentially with staggered CSS animation-delay on selection, like a low-res screen rendering pixel-by-pixel. Each pixel pops in from scale 0 to 1.
A chunky 8-bit spinner: a ring of square pixels with a bright segment and a fading tail stepping round it, one pixel at a time.
Game level tabs: the new level shows through tile by tile as a cover of pixels clears in a scattered order.
An 8-bit switch. Chunky pixel corners, a square thumb with a highlight pixel, and movement that jumps in five hard steps instead of gliding, with the track filling in a checker pattern a step behind it, like a sprite on an old console. Pure CSS (steps() timing).
A destination picker with a paper plane: choose a city and the plane flies to it in an arc, banking slightly, then hovers over it with a gentle bob.
A planet card: a shaded world turns as its cloud bands drift across it, and a small moon orbits, passing behind the planet and then in front of it.
Live turbulent energy churns inside a pill button: bright filaments of plasma that never repeat. At rest they smoulder faintly; hover turns them up to a blaze behind the label, with a glow round the rim.
A plasma globe: live filaments crawl from the glowing electrode out to the glass, each wandering and flickering, their feet drifting slowly round the sphere where they strike it.
A licence plate: each character presses up out of the metal as you type, the caret waits in the next space, and a character a plate cannot take makes it rattle.
A slider whose ribbon folds like an accordion: the part ahead of the thumb is pleated and packs tighter as you push, then pulls flat again as you drag back.
The thumb is a blade pushing sand: behind it the floor is scraped clean as the fill, and pushing forward builds a heap against the blade, bigger the faster you push, that slumps flat when you stop.
A string checkbox: the tick is a string between two pins. Ticking pulls its middle down taut into a tick; unticking lets go and it twangs back and forth across the line before it settles.
A tension slider drawn as a taut string with a bead for a thumb: press and the string bends under the bead, pull up or down to bend it further, and let go to make it twang.
A plug type picker for a travel adapter: choosing EU, UK or US reshapes the plug face and slides, turns and resizes its three pins into that country's pattern.
An office tube system: the valves turn toward the department you pick and the capsule shoots through the glass tubes to it, then lands with a jolt.
An instant photo that develops as you hover: the milky film clears and the blurred, flat image sharpens and gains contrast over a couple of seconds, while the print tilts and lifts. A handwritten caption sits on the white border.
An instant photo checkbox: ticking gives the print a shake and the picture slowly develops, from dark and blurred to a sharp tick over a little landscape.
A poll card: vote and the options turn into result bars that grow to their share one after another while the percentages count up, with your choice ticked.
A statement field wired to a chart recorder: every keystroke kicks the skin pen, the pulse quickens with your typing, and the reading calms down when you stop.
A striped cinema bucket of popcorn where kernels keep popping out of the pile, puffing open on the way up and tumbling back in.
On hover, the button pops toward the viewer using CSS 3D transforms: translateZ(28px) and scale(1.06) with a spring cubic-bezier. A deep drop shadow grows to reinforce the depth illusion. Requires a perspective wrapper on the parent element.
A framed planet card: on hover the planet breaks out of the frame toward you, rising and growing with a drop shadow, while the frame tilts back and sinks away.
A pop-up book checkbox: the tick lies folded flat on an open book in perspective, and ticking makes it spring up and stand out of the page, casting a soft shadow.
Chapter tabs that lie flat on the page like a closed pop-up book: the active label stands up on its hinge with a little spring, and the one you left folds back down.
A teleport switch: the ball dives into a portal at one end of the track, vanishes, and pops out of the portal at the other end; each gate flares as it passes through.
A postcode field drawn as postage stamps: each character is stamped into its own perforated stamp at a slight angle, and the row is franked with wavy lines once it is complete.
A type poster: on hover the headline flips letter by letter from MAKE IT to MOVE IT, each letter swinging on its baseline, while hazard stripes slide in across the top and keep moving.
A potter's wheel: pick a form and the wheel spins up while the clay rises, swells and narrows into it with real give, then the wheel slows to a stop.
A fill-level slider as a glass of water: drag up and the glass fills, the surface rolling and bubbles rising through it, with the level marked on a scale beside the glass.
A standalone 56px circular power button with no track. Off: dark neumorphic inset. On: radial white gradient with a multi-layer glow. Every click spins the power icon 360° and fires an outward ripple ring.
A chunky RPG-style button with a thick box-shadow that simulates physical depth. On mousedown it snaps down 5px while the shadow collapses, then springs back on release, replicating the feel of pressing a physical arcade or game controller button. No dependencies.
The entire box squishes flat (scaleY 0.28) under simulated finger pressure then springs back up with an overshoot, revealing the checked fill. Distinct from raised (3D): this is a flat squeeze-and-spring.
Site tabs with a hover card that sketches each page: the card glides and resizes from tab to tab instead of reappearing, then fades when you leave.
A price field written on a hanging tag: the tag grows with the number and swings on its string with every digit, the other way when you delete.
A plan card with a Monthly and Yearly switch: the knob slides across, the price digits roll to the new amount a beat apart, the billing note changes and a Save badge drops in for yearly.
On selection, a metallic gradient sweeps left-to-right across the selected label via CSS background-position animation, then settles into a bright chrome finish. Other options show dim monochrome text.
A spectrum switch: a beam of light enters the prism and, when on, fans out the other side into a spread of graded tones.
An indeterminate progress bar: a gradient shimmer slides across a pill-shaped track from left to right on loop. Pure CSS, no dependencies.
The input background fills left-to-right proportional to the typed character count relative to a target length. A calm, satisfying completion indicator with smooth transitions.
A hologram switch: a scanline figure floats on a cone of light above an emitter bar. Switching, it glitches out where it stands and rematerialises at the other end, and it flickers faintly while on.
A segmented control with a raised puck sitting in a recessed groove: it leans into the slide like something with weight and settles flat when it stops.
A shield switch drawn as a pufferfish: on, it gulps water and swells round on a springy overshoot as its spikes stand up one after another; off, it deflates.
A lamp switch: a cord hangs from the button with a bead on the end. Drag the bead down past the trigger point and let go to turn it on; the cord springs back and swings like a pendulum. Clicking the button itself toggles it too and tugs the cord, so keyboards get the same switch.
A hanging lamp with a pull chain. Each switch tugs the cord down and lets it spring back with a bounce, and the bulb lights (or goes out) at the bottom of the pull, throwing a soft cone of light.
Three dots that scale and fade in a left-to-right wave. Staggered CSS keyframes, no dependencies.
A checkbox that emits a gray ring radiating outward (scale 1→2.4, opacity 0.65→0) when checked. The ring only fires on check, not uncheck. The check mark draws in via stroke-dashoffset.
A command typed onto a punch card: every character punches its real column code, the chads fall out, the letter prints along the top and the punch head waits over the column the caret is in.