A lab of small, crafted interaction experiments for React, built with Tailwind CSS v4 and Motion. Buttons, inputs, cards and playful objects, each with a live demo.
Months slide past in the direction you travel.
A tiny analog clock that sweeps in its city's time and turns dark after sundown.
The thumb is a face that frowns, grins and leans into the drag as you rate your day.
Shrinks into a spinner while it saves, then answers with a check or a shake.
One dropdown panel reshapes and slides as you move between menu items.
Slides between steps while the card grows around each one.
Rings when something new arrives, and the badge rolls up with each one.
A listening-to pill whose record slides out from behind the cover and spins while it plays.
Rolls each digit the way the count moves, and speeds up the longer you hold.
Rolls forward like a mechanical counter and wraps from 999 back to 000.
A setup checklist that counts up as you go and celebrates the finish.
Small photographs turn slowly round a name; hover one and the ring stops and makes room, click it and it grows into the middle while the rest bloom outward.
Drives a parcel across a street map to your door and stamps each stop as it arrives.
Six slots mirror one real input, so paste and SMS autofill just work.
Scrolls a long row of tabs, fading whichever edge still hides more.
A pill that inches between pages like a worm and counts down to the next.
Numbers roll in place like an odometer; the one you click never moves.
Drag a file into the shredder and it comes out in strips.
A word made of dots that part around your cursor and burst when clicked.
Reveals the password with a wave of dots turning into letters; the meter fills as it gets stronger.
Floods with the card network's colours from the corner the moment the first digits give it away.
A tiny pixel grid that cycles spiral, snake, pulse and checker, then draws a check when done.
Itemizes your bill like an invoice and upgrades the plan the moment your team crosses a seat threshold.
Each digit rolls to its new price on its own, and new digits grow in.
Fills the line toward the next step and unfills it in reverse.
One toast that morphs from saving to saved, or to an error with retry.
Pull the ball chain to switch the site's lights; light pours from the bulb as a cone.
Pull the feed down and new posts slide in at the top.
Bottoms out while you hold it, catches halfway when you let go and lights the lamp, and springs back on the next press.
The code leaves the button as a cloud of ink dust that billows up and settles, grain by grain, into a QR you can scan.
Lifts the words you select out of the paragraph and into a shareable quote card.
The selection ring glides to the plan you pick.
Two thumbs that glide, stop at each other, and show their value as you drag.
Tap a reaction to add yours, or pick one and watch it fly into its pill as the count rolls.
A progress bar fills as you read while the time left counts down.
Feeds a receipt out of the slot line by line; twist it against the cutter to tear it off.
Says "4 min ago" and changes only at the moment the words would change.
Picks rows up by the handle and slides the rest out of the way.
Drag a hole to the finger stop and each digit lands as the disc unwinds.
Stamps a document approved or rejected, with ink that looks pressed in.
Checks itself off with a quick pen stroke and strikes the words through.
Words light up one by one as you scroll through them.
Maps the article as a spine of bands, each as long as its section, filling in as you read.
Drag the label and a tape measure runs under the needle, or just type.
The pill stretches toward your pick like an inchworm, recoloring each label as its edge crosses.
A formatting toolbar that grows out of whatever text you select.
Opens with your current choice sitting exactly on the button, macOS style.
The plane takes off along a curve, and a check lands in its place.