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 silver highlight spins continuously around the button border; on hover it brightens to white and casts a soft blurred halo. CSS @property angle and colour, no dependencies.
The card header runs a multi-stop grayscale gradient that slowly drifts left-to-right in a continuous loop: an ambient living colour effect. Pure CSS, no dependencies.
A gradient type picker whose options are swatches of each kind: the big swatch takes on the one you choose, linear sliding in along its axis, radial blooming out from the centre, conic turning into place.
On focus a conic-gradient border continuously rotates around the input using a @property CSS custom property (--gr-angle) animated from 0deg to 360deg. The ring fades in with opacity and fades out on blur.
A spinning ring with a light-to-dark conic gradient in one continuous arc. Pure CSS, no dependencies.
A conic-gradient border rotates continuously while the input is focused, achieved by spinning a larger gradient square behind a clipped wrapper to simulate an animated gradient border.
When active, the track background runs a drifting dark-to-light gray gradient on a loop, making the track itself feel alive. The thumb glows on active state. No dependencies.
The check mark falls from above the box with realistic gravity physics, accelerates in, overshoots slightly, bounces twice, then settles. Unchecking tosses it back upward and fades it out.
A caption field where deleted text does not just vanish: every letter you delete drops out of the field and tumbles away with its own spin and drift, fading as it falls.
A selection ball falls from above with a gravity arc (ease-in) and multi-bounce settling via CSS keyframes. The ball squishes on landing and leaves a faint impact shadow. Physics-inspired with no library dependencies.
A five by five grid of dots with a ripple running through it from corner to corner, each dot swelling, brightening and settling as it passes.
A coffee grind picker: choose fine, medium or coarse and the crank turns, grounds pour from the chute, and the pile in the cup settles finer or coarser.
A hand coffee grinder: the crank turns as you drag and the grounds under the loupe go from coarse to powder, with the brew method that suits them.
A code-snippet field that grows line by line: the box springs taller as you add lines (up to seven, then scrolls), line numbers slide into the gutter, the current line's number lights and the footer tracks line and character counts.
A watering slider for a potted plant: the stem rises, leaves pop out along it in turn and the flower opens at the top once it is fully watered.
A height field on a door frame: the marker rides up and down the measuring scale as you type, and Enter pencils your line in beside the family's.
A Surprise me button with real physics: the knob turns, the balls rattle around the globe and settle, and one rolls down the marble run into the cup with your pick.
Three gimbal rings, each with a glowing bead, tumble in 3D around a pill button. Hover or focus locks them: every ring swings flat with a spring into one halo around the button, which lights up.
A haiku field in three lines with syllable beads beside each one that fill as you write five, seven and five; go over and the extra shows, and get all three right for a seal to stamp down.
Three dot screens on one 7px grid: a faint base, a brighter screen whose dots swell under the cursor through a radial mask, and a ring of bright dots that rolls across the surface from the pointer on enter and click, its radius animated through a registered custom property.
An ink coverage slider printed in halftone: dots far behind the thumb swell and fuse into solid ink, thinning to fine points at its edge, with faint dots ahead.
A hammer drives a nail home in three blows, the board slides along, and the next nail drops into place.
A hamster running flat out in its wheel: legs scrambling, body bobbing, the wheel spinning round under it.
A hold switch drawn as a handbrake: the lever ratchets up a click at a time; off presses the release button and the lever drops back down.
A username field that checks availability as you type. Characters a handle cannot use are refused with a nudge; three dots bounce while it looks (debounced, so only the name you stop on is checked); then a tick draws for a free name, or a cross pops for a taken one and free alternatives slide in underneath, ready to tap.
Pricing as an actual hand of playing cards, from the two of clubs (Free) to the ace of spades (Forever). They deal into a fan, rise under your cursor, and the one you pick is played to the table.
A clothes rail: the garment you pick turns on its hanger to face you and sways, the others turn side-on and are pushed along the rail.
Venue tabs with the panel hung from the active tab on two cords: pick another and the hook slides over, setting the panel swinging before it settles.
A switch you can almost feel: the thumb lands hard, the whole switch buzzes for a moment and vibration marks flick out from the end it hit.
A ready checkbox drawn as an egg in a nest: it wobbles, a crack runs round it, the top tips off and the tick pops up out of the shell; unchecking tucks it back in.
A profile card that scrolls inside itself: as you scroll the posts, the cover shrinks into a slim header and the avatar travels up into it, shrinking, while the name fades in beside it.
Newspaper section tabs: pick a section and the front page spins in from nowhere with its new headline, like a newsreel stop-press.
A game-style HP bar embedded in the button body. On hover, the bar drains from 100% to 28% over 800ms with a CSS width transition; the bar dims from bright to light gray to dark gray as HP drops. HP values and a status label update accordingly.
On check, a tiny SVG ECG heartbeat line draws across the box using stroke-dashoffset, then fades while the check mark reveals. Dark background with a soft white trace. Medical/vital signs aesthetic.
A heart monitor: a bright trace with a fading tail runs across the screen through a spike, led by a glowing dot that rides the same line, and fades out at the edges before coming round again. Pure CSS.
A message field that heats up with your typing speed: letters typed fast come out glowing hot and lifted, then cool to the normal colour over a couple of seconds, and a meter shows your words per minute.
Two dots oscillating vertically in opposite phase with scaleX depth: a DNA helix cross-section effect. Pure CSS, no dependencies.
A sync switch: off, two strands lie flat and parallel; on, they twist into a turning double helix.
A flat-top hexagonal button using clip-path: polygon(). On hover, a circular silver fill expands from the center with a spring overshoot (cubic-bezier(0.34, 1.56, 0.64, 1)), inverting the text color from silver to near-black. The hex clip-path is applied to the button element itself. No dependencies.
A testimonial whose key phrases get a marker swept behind them, one after the other and across line breaks, when the card comes into view; hover it to sweep again.
A checkbox that highlights its own label: ticking, a marker nib swipes across the text leaving a skewed band of ink, and the box fills with the same ink; unticking, the band retracts from the right.
A price-range slider over the distribution of prices: bars grow in on load, the bars inside the chosen range light up, the selection line follows the two thumbs and the product count rolls to the new total.
A price range drawn over its own histogram: bars inside the two handles rise to full ink, bars outside sink and fade, and the count of results updates as you drag.
Seven hexagon cells of a honeycomb: the six outer cells light round the comb in turn while the core pulses at twice the pace.
Hold the mouse button down to fill a circular SVG progress ring. Progress is driven by requestAnimationFrame over a 1.5-second duration. Releasing early resets to zero. When the ring completes, the button enters a confirmed state with a checkmark and colour change for 1.8 seconds.
A collectible trading card. It tilts toward the cursor while a silver holographic foil (light bands plus a sparkle screen, colour-dodged) slides across it and a glare follows the light, like a rare card turned under a lamp.
A button projected as a hologram: it floats above an emitter on a cone of light, with scanlines and a bright band rolling down its face. At rest it flickers like a weak signal; on hover the projection steadies, rises and the cone and emitter brighten.
Selected option flickers with brightness spikes (CSS filter + translate offsets) then stabilizes into a softly glowing holographic state. Simulates a projector flickering to life, with subtle scan-line stripes overlay.