Fresh produce MANGOO Sun-ripened mangoes, hand-picked at dawn and delivered fresh. View site Single-origin NÉRO Single-origin dark chocolate — pick your dark. View site Synthwave gallery MOON ART An expanding gallery of synthwave moon & sky dreamscapes. View site Coverflow MONOLITH Impossible architecture, in a 3D coverflow. View site Specialty espresso CRÈMA A small-batch roastery — pick your roast, change the room. View site Interactive · pixel art LOVE LETTER Open the envelope — a cute pixel valentine that won't take no for an answer. View site Generative · canvas BIRTHDAY A little tree sprouts and blooms with colourful hearts into one big heart. View site Interactive · SVG DEADLINE A red deadline reaper chases a typing dev down a live countdown — ship it before it catches you. View site Code reel · CSS 3D LOVE, IN 3D A volumetric red heart built from a thousand "i love you"s, rendered live beside the code that draws it. View site Code reel · SVG + CSS CUTE LAMP A sleepy desk lamp that wakes up — eyes open, tongue out, light on — beside the CSS that builds it. View site Interactive · ask → date pass GO OUT WITH ME? Say yes — the No button never lets you say no. It bolts across the screen, shrinks, and changes its mind out loud ("are you sure?" … "last chance!") while Yes swells to meet you. Then the joke turns into a plan: a YAAS! bear flashes over the card and it walks you through when (the next five days, a time of day, or "surprise me"), where (coffee, dinner, a movie, a long walk), what I should bring and what happens after — then hands you a perforated date pass carrying the whole itinerary, counting itself down to the hour. Press Add to calendar and a month sheet opens, the day drops into it, and it says something — while a real .ics is written in the same gesture, the paper behind gets stamped SAVED and the button stops offering and starts confirming. The sheet is a native <dialog>, so the focus trap, Esc and the backdrop are the platform's job. Six steps live in one card that never changes height: the stage is fixed and the steps cross-dissolve inside it, so nothing reflows mid-transition. Each arriving step lifts its children in one after another, an aurora drifts inside the glass, the stickers breathe on their own axis (translate composes with the entrance instead of fighting it), and the ticket catches one pass of light as it lands. The pickers are real ARIA radiogroups with roving tabindex and arrow keys, focus follows each step's heading, every text run was measured against the lit pixels rather than the flat token, and reduced motion gets the whole story with the movement taken out — the No button still refuses, it just stops running. View site Interactive · login LUMEN Pull the cord to wake the bulb — the light comes on and the sign-in unfolds. View site Ad-film · scroll-scrubbed OAK & EMBER Poured slow — whisky pours, ice drops, the splash freezes mid-air and the bottle resolves. View site Eau de Parfum · scroll-film AETHER An aquatic fragrance — the bottle holds as you descend its note pyramid, top to base. View site Interactive · ask WILL YOU BE MINE? A very small, very serious cat pops the question — the No button flees, the hearts burst. View site Interactive · sign-in DEN A cuddly husky pup guards your login — paws over his eyes as you type, peeking only when you ask. Sign in is a little door a stickman walks through. View site Interactive · micro BUY NOW → 🚚 Tap Buy Now: the button packs your order, shrinks into a little delivery truck, and drives it clean off the screen — leaving Ordered ✓ behind. View site Interactive · dark mode DAY · NIGHT Drag the sun into a moon and this weather app flips to dark mode — the sky sinks from noon to midnight, clouds scatter into stars, and the whole city skyline lights up. View site Interactive · slider HOW WAS IT? Drag the slider and a big emoji face morphs sad → meh → happy → in love — and the whole screen shifts colour to match the mood. View site Interactive · ambient GLASS WEATHER A living glass card. Tap a day and the window changes weather — rain streaks down the pane, the sun drifts behind clouds, lightning cracks, snow settles on the sill. View site Interactive · fintech SLIDE TO PAY Drag the pill across the track and it snaps shut on a checkmark — a ripple of light bursts out and "Payment sent" locks in. Let go early and it rubber-bands back. View site Interactive · katana IAIDO Drag along the sheathed katana to draw the blade — the finished cut slices the wordmark clean in two, scattering ink and cherry petals as the kanji resolves. View site Interactive · login THE DOOR A sign-in form whose Sign in button is a little door — submit and a tiny person walks clean through it before you're let in. Log Out walks them back out. View site Interactive · delete CRUMPLE Delete a file and it crumples into a paper ball, arcs into the bin with a satisfying thud, and drops an Undo snackbar — click Undo and it flies right back out into place. View site Interactive · physics SNOW GLOBE Grab the glass and shake — a blizzard of snow bursts, swirls on the wind, and drifts down over a tiny lantern-lit village, then piles up in front. Let go and it settles with a chime. View site Interactive · fantasy EMBER Press and hold the dragon egg to warm it — cracks race out from your fingertip, molten light leaks through, then it bursts in a shower of shell and a tiny dragon unfurls, flaps, and blinks at your cursor. View site Interactive · seasons SOLSTICE One tree, the whole year in your hand. Drag the slider and watch it turn — buds to pink blossom to summer green to golden fall to bare winter snow — petals becoming leaves becoming snowflakes as you scrub back and forth. View site Interactive · WebGL MERCURY A blob of liquid chrome floating in the void, mirroring an unseen sky. Move your cursor and it stretches toward you like magnetized mercury — flick to pinch off mirror droplets that orbit and re-merge, click to splash, and the word rises out of its surface. View site Interactive · Canvas ABYSS Sink into a black ocean where your cursor is a soft light. Sweep it and bioluminescent plankton ignite, a school of fish scatters and the jellyfish shy away — click a sonar ping into the dark and something enormous drifts by, lure glowing, as the depth ticks down through the abyssal zones. View site Interactive · luxury SILLAGE A crystal flacon floats in a spotlight. Press the atomizer and a fine gold mist plumes outward, catching the light — as it drifts and thins, the fragrance notes condense out of the fog into a floating top–heart–base pyramid. View site Interactive · game GUN GAME A neon shooting range where your cursor is the crosshair. Click to fire — muzzle flash, recoil, tracers, flying shells — and every target you hit levels your weapon up the classic Gun Game ladder: pistol, SMG, shotgun, sniper… all the way to the knife. View site Interactive · reveal APEX A hypercar waits under a cover in a spotlit garage. Drag the cover off — a light bar sweeps, the drape whips away, the headlights ignite and the door scissors up with a hydraulic hiss and a throaty rev. Then tap a paint chip and watch the body colour flood across in a liquid sweep. View site Interactive · origami TSURU A single square of paper on a tatami mat. Drag to fold it, crease by crease, into an origami crane — the wings sweep out, a neck rises, a red tail lifts — then it flaps and glides up into a paper sky. Drag back and it unfolds, fully reversible. View site Code reel · SVG + spring CUTE LAMP II The sleepy desk lamp again — but now grab its cord and pull it anywhere. Let go past the detent and the switch clicks; the cord snaps back and rings on a springy recoil, like a real pull-chain. View site Code reel · reveal LET THERE BE LIGHT Pull the lamp's cord and the light clicks on — and a little handwritten note, invisible in the dark, warms into view on the desk. Turn it off and it disappears again. View site Code reel · reveal GOOD MORNING, CAT Pull the lamp's cord and the light reveals a little framed photo on the desk — a just-woken cat mid-yawn, grumbling "turn off the light?". Switch it off and it vanishes back into the dark. View site Interactive · checkout VELO · SHIP IT Press Buy Now and the sneaker packs itself: a flat cardboard blank folds up around it, tapes shut, takes a label — then a van rolls in, swallows the box, slams its door and tears off down the road, leaving your order confirmed. View site Interactive · sign-up THE VAULT A sign-up page you could actually ship — except the little lock beside the password field is real. Type, and it upgrades: a bent paperclip, a padlock, a deadbolt, then a bank-vault door that spins shut and seals. Delete a character and it un-builds itself. View site Interactive · messaging PNEUMA · SEND Write a message, hit Send — and the sheet rolls itself into a scroll, drops into a brass carrier, and a pneumatic tube fires it across the room, rattling through every elbow, before it clatters into the catch tray and your words unroll at the other end. View site Component · shippable DROPZONE A file upload you'd actually ship. Files fly in from exactly where you dropped them, and each thumbnail develops — dark to full colour, top down — as the bytes land. A failed one stays half-developed. Zero dependencies. View site Component · shippable PHOTOCOPIER A copy-to-clipboard button skinned as a photocopier. Hit copy and a light-bar sweeps the text, the machine chugs, and a warm duplicate ejects into a stacking tray — real clipboard write behind the theatre. Zero dependencies. View site Component · shippable CARRIER PIGEON A two-factor code input, done properly — paste the whole code, drive it from the keyboard, resend on a timer, validate for real. Hit Send code and a pigeon flaps in with a tiny scroll, perches on the form, and drops the six digits into the boxes one by one. Zero dependencies. View site Component · shippable SCRATCH & SAVE At checkout, a silver foil coupon panel. Scratch it off with your cursor — real scratching, foil crumbs flaking away — to uncover 20% OFF. The code auto-applies and the total counts down in front of you. Zero dependencies. View site Component · shippable REWIND · ⌘Z An undo / redo history you can actually watch. Knock the coffee over the board — it floods across the layout and shoves the cards aside — then hit ⌘Z and the whole mess un-happens: the spill flows back into the cup, the cards fly home. A real command-pattern stack with a scrubbable timeline. Zero dependencies. View site Component · shippable WHISPER A hold-to-record voice message, the way the messaging apps do it. Hold the mic and a live waveform grows as you talk; slide left to cancel, slide up to lock hands-free; release and the take furls into a playable voice bubble that flies into the thread — its waveform the exact one you just recorded. Zero dependencies. View site Component · shippable SWIPE TO DELETE The list row every app has, built the way it should feel. Drag left and a machined steel mouth yawns open on a cold oxblood recess — which heats as you pull, so the colour itself tells you how close you are. Past the point of no return the row is shredded into it, the lid chomps shut, and the list springs up to close the gap. Zero dependencies. View site Component · shippable SLINGSHOT Pull-to-refresh, except you're winding a slingshot. The band stretches, thins and creaks as it takes tension — past the notch it goes hot and locks. Let go and it fires the request up; the fresh posts come back down and land, staggered, while the list makes room. Real rubber-band resistance, a spring integrator seeded with the tension you wound in. Zero dependencies. View site Component · shippable SCOVILLE A menu item you could actually ship — except “Extra hot” stops being a word. Drag the heat slider and the pepper beside it ripens under your finger: green, then orange, then a red that starts glowing through its own skin — and at the last notch it catches fire, chars from the tip up, and the Add button asks you to sign a waiver. Real cultivars, real Scoville figures. Drag back and the fire un-burns. View site Component · shippable PROOF The “verify you are human” gate everyone has sat through — except this one shows you its working. It reads your mouse: how straight your path is, whether your speed rises and falls, whether your hand trembles. Move like a person and it waves you through with a checkbox. Move like a machine and it stops believing you, one rung at a time — traffic lights, a slide puzzle you can’t solve, and finally a retina scanner that just stares. It tells you which tell gave you away. Wander for a second and it un-escalates. View site Brand · lead-gen page HELLO A autoplay title film that is the hero of a scrollable page. It opens on black, hands you the screen as the name lands, then a vermilion dot falls and swallows the frame whole — your website, your app, your store, every letter hinging up from behind its own edge. Scroll on and the same kinetic type keeps going: what I build, why me (“No templates. Built to move. Fast by default. Yours, exactly.”), then Let's build yours. The Short is just the first ten seconds; the page is the pitch. View site Site · scroll-scrubbed film VESPER An architecture studio whose hero is a single continuous take — and you are the playhead. Scroll and the sun sets: the concrete goes warm, then blue, then gives up entirely, and the windows stop being windows and become the only light on the hill. Scroll back up and the sun comes back, frame for frame, because scroll position is the video's current time. A clock in the corner tells you the hour you're standing in. View site Site · scroll-scrubbed film SOLACE A headphone that sells itself by subtraction. The hero is one unbroken take and you are the playhead: scroll, and the camera pulls back off a milled aluminium edge while the room around it goes dark and simply stops existing. In the corner a readout counts the noise floor down — 78 dB, 39, 9, nothing — so the thing being demonstrated is the one thing a web page cannot play you. Scroll up and the world comes back. View site Component · password strength WARDEN The password field, answered honestly: how strong is it, really? Type, and a guardian hatches and grows through five distinct forms — a sleeping egg, a helpless hatchling, a fox, a dire wolf, an ancient dragon — each keyed to your password's real entropy, the whole card glowing that tier's colour. A line underneath does the maths a strength bar never shows you: “Cracked instantly” → “Cracked in 71 trillion years.” Delete a character and the guardian de-evolves, in exact reverse. Fuses the reactive-mascot idea with a real, teachable entropy engine. View site Component · liquid sign-in FLOW A sign-in where motion is the whole product. A drop of light — real metaballs fused by an SVG goo filter — breathes above the card and leans toward your cursor; every keystroke sends a ripple through the field; the focus underline pours in from the middle. Then the payoff: hit Sign in and the button melts — its surface bulges into droplets that drip and fall away — before it reforms as a checkmark with a splash. No mascot, no character; just liquid. View site Component · product card AXIS COLA An interactive product card for an ice-cold cola. It opens as a compact chilled can with carbonation quietly rising behind it. Tap it and the card unfolds: the can travels to a hero pose while the spec panel — volume, sugars, caffeine, energy — staggers in, and the whole scene floods with the flavour's colour. Four flavours (Original, Cherry, Zero, Lime) recolour the can, the glow, the bubbles and the price; and Add to cart packs your order into a little delivery van that drives clean off the screen, leaving “Added ✓”. Zero dependencies; the reveal is transform and opacity only. View site Interactive · a cute virtual date MWAH A ridiculously cute long-distance video date. Two little kawaii buddies — you and mira, 4,182 km away — sit in their pastel video bubbles, blinking and bobbing. Tap Blow a kiss (or boop a buddy) and a chunky glossy heart pops out, arcs across the gap on a springy bounce, and lands on your date — who squishes, goes heart-eyed, and blows one right back. Every caught kiss fills the connection heart floating between them; top it up and it bursts into confetti and the two of you are officially “in sync.” All spring-driven squash-and-stretch, drifting hearts and sparkles. Zero dependencies; one canvas. View site Component · sign-in LUNARA A cinematic glass sign-in set inside a layered photograph: a full moon over moonlit dunes, the Milky Way spilling to one side and a camel caravan that slowly crosses the ridge. The frosted card floats in front and tilts toward your cursor with a pointer-tracked sheen, while four real parallax planes drift behind it — stardust motes twinkle, the moon quietly breathes, wind lifts sand off the lit crest, a near dune slides underfoot and the odd shooting star streaks past. Floating-label fields, a password reveal, and a Sign-In button that spins then settles into an aqua checkmark. Sibling to NOCTURNE, re-scened from autumn forest to desert night. Zero dependencies; transform and opacity only, with a calm reduced-motion mode. View site Interactive · a living heart PULSE The classic “particle heart,” brought to life. Thousands of glowing points fill a real heart and beat — a physically-modelled lub-dub cardiac rhythm (S1/S2) that swells the whole shape and is traced, live, by an EKG line whose R-spike lands exactly on the thump. Move the pointer and the particles part like light, then spring back; click, tap or hit space for a flutter — the heart skips, the BPM races and settles, a shockwave ripples through it and little hearts drift up. A vitals-monitor readout counts the beats, and you can switch the heartbeat on to hear it. Additive-bloom glow sprites over one canvas; reduced-motion, keyboard and screen-reader friendly. Zero dependencies. View site Site · scroll-driven portfolio FOLIO A portfolio that plays like a title sequence. It opens on “Looking for a frontend engineer?” as a streak of light draws itself across the dark — then each section arrives by wiping the last one off the screen, a solid disc opening from the centre: cream for the introduction, espresso and gold for the writing, bone for the work, black for the timeline. Seven scenes live stacked inside one sticky frame, so scrolling doesn't move the page — it moves a playhead. The work is real: six of these builds, shot from the running projects. The journey is a single glowing curve that draws left to right, dropping each milestone the instant the light reaches it — every label positioned from the path itself. Zero pins, transform and opacity only, and it collapses to a plain stacked document for reduced motion. View site Component · volume slider AURIS A music player whose volume slider tells you the truth. Drag it and a hearing-safety instrument panel escalates through four objects — an earbud, city traffic, a concert speaker stack, a jet turbine — while a live trace grows behind them and eventually clips flat against the rails, the room starts to shake and the album art rattles. The numbers are real: NIOSH's exposure limit, 85 dB for eight hours, halved for every extra 3 dB. At 118 dB it reads “permanent damage after 14 sec” — and points out that the song you're playing is 3:58 long. Drag back down and the whole thing un-builds in reverse, because every pixel of the panel is a pure function of one number. Real range input, keyboard and screen-reader friendly, light and dark, zero dependencies. View site Component · client–server love story SYNC A love letter to how the web actually talks. It opens on a typed title — “isn't coding romantic?” — then a coral CLIENT and a teal SERVER face each other in the dark. You grab the glowing packet and drag it to carry the request across — your drag draws the bottom half of a heart; drop it short and it springs back. The server answers with its own packet, and dragging it home fills in the top half, closing the loop. It lands on a beating heart, both faces blush, their eyes close happy, 200 OK. The characters are cute and pokeable, their eyes follow your cursor, there's gesture-gated WebAudio and optional music, a screen-reader-only live status with a click/keyboard Send fallback, and an instant established state for reduced motion. Zero dependencies, transform-and-opacity only. View site Component · add-to-cart SOLA A footwear atelier where the cart is a real shopping bag that fills for real. Four hand-finished colourways sit on an editorial greige shelf; hit Add and the pair leaves the shelf — it arcs across the page on a true parabolic toss, tumbling and shrinking, and drops into a matte-black boutique bag that squashes under the new weight while the sneaker pokes out of the top. The count badge springs, the running total counts up, and the shelf quietly restocks. Click the bag and a peek drawer slides in — every pair listed with a thumbnail; remove one and it's pulled back out of the bag. A reimagining of the classic “fly-to-cart,” but the cart is a vessel you can actually watch filling. Cursor-tilt product shots, full keyboard + screen-reader support, a calm reduced-motion mode, and it collapses to a bottom bar on mobile. Zero dependencies; transform and opacity only. View site Ambient · pure CSS AURELIA Three glowing rose-pink flowers grow and bloom in the dark — petals opening, leaves unfurling, light motes drifting up, grass swaying. A pure-CSS night garden. Zero JS beyond the load fade. View site Interactive · isn't coding romantic? PING A pink client pings a blue server, and the round-trip draws itself into a glowing heart — the request traces the bottom half, the response fills the top. Grab the little red packet and drag it across (or press Send): drop it short and it springs back; deliver it and the two apps light up, blush, and beat as one, while a karaoke line pops in word-by-word. Cute googly-eyed characters that watch your cursor, synth SFX, custom cursor. Zero dependencies, transform/opacity only, fully interactive with an accessible Send fallback and a reduced-motion mode. Built from an @devashishig reel. View site Live clock · haute horlogerie ARACHNE A brass spider hangs from a single thread of silk on an obsidian dial, and its three long legs are the hour, minute and second hands. Every leg is a hand-drawn path that morphs between a relaxed and a flexed pose, so the clock idles like an animal: legs stretch, the face rearranges itself, gears turn behind a guilloché chapter ring. It tells the real time — one scheduler fires on each second boundary of the system clock, hands only ever sweep forwards through twelve, and a backgrounded tab snaps straight back to the truth on return. GSAP + MorphSVG, transform-only, with a reduced-motion mode that simply steps the hands. View site Component · e-commerce cart CARTA A cart drawer built to the current best practice, end to end. Add a pair of sneakers and the photo arcs into the bag; inside, a two-tier reward ladder fills toward free shipping and then a free gift, quantity edits apply optimistically and roll back when the fake server says only two are in stock, removal is one tap with a six-second undo, and variants can be swapped in place. Promo codes, gift wrap, save-for-later, contextual upsells, honest totals with estimated tax and a dated delivery window, an empty state that's a way back in, and a bag that survives reloads and syncs between tabs. Focus-trapped and inert-backed, keyboard-complete, drag-to-dismiss as a bottom sheet on mobile. Zero dependencies. View site Component · download button PARADROP A download button that conserves its own geometry. Press it and the ring doesn't vanish — it unrolls: the circle splits at the crown, both halves sweep down and outward, and the stroke lands flat as a track exactly one circumference long. The arrow is conserved too, flipping a half turn to point up, rising, and opening a parachute, so the download is literally a descent — the payload rides the canopy down while the bar fills beneath it, and the two meet at 100%. Touchdown flexes the bar on a spring and folds the arrow into a checkmark. Cancel mid-flight and the metaphor runs backwards: the canopy cuts away, the fill drains, and the track rolls back into the ring it came from. The progress is real — fetch with a streaming reader counting actual bytes, an AbortController behind cancel, an honest estimator when Content-Length is missing, and a minimum display duration so a fast transfer still reads without ever overstating what landed. Failure is a first-class state, with streamers and a hard landing. Keyboard-complete, screen-reader announced at the quarter marks, and a reduced-motion path where nothing flies. Zero dependencies, one rAF loop, ninety-six points of parametric path. View site Component · liquid glass bar LUCID A floating glass segmented bar that actually refracts. Most "glassmorphism" is a blur and a white overlay; this one paints a signed-distance field of its own rounded rect into a normal map, hands it to an SVG displacement filter and runs it as the backdrop, so the gradient and the hairline grid behind the bar visibly bow and compress at the rim the way they would through a real lens — then frost on top of the bend, not instead of it. The active capsule travels as a droplet would: leading edge first, trailing edge lagging, stretching through the middle of the trip and settling on a spring — a FLIP where the resting geometry is written in pixels so the caps stay perfectly round and the motion itself is one pure transform. A specular sheen tracks the cursor across the glass. The sun folds into a moon — rays collapsing, disc swelling, a masked circle sliding in to carve the crescent — while the whole page turns over behind a circular View Transition wipe from the button you pressed. Built as an APG radiogroup: roving tabindex, arrow keys, a visible focus ring, a remembered theme that still follows the OS until you overrule it, and a reduced-motion path where nothing travels. Zero dependencies. View site Component · 3D hover card OUT OF THE FRAME A poster card on a dark stage, and the character leaves the frame. Hover it: the card lifts, leans back on its own vanishing point and tilts to follow your pointer while a specular sheen tracks across the art — and the figure inside climbs up and out over the top edge, with light spilling from the gap he left. An accent bloom opens behind the card, a hairline draws itself in, and the bounty line slides up from under the frame edge. The whole effect is CSS: hover, focus-within and an active state drive every pixel, so it still works with JavaScript switched off — the script only adds the pointer tilt. Travel is measured against the card, not the image, so any character breaks out by the same amount whatever their proportions. Transform and opacity only, one shared rAF loop that stops when nothing is moving, keyboard-complete with a real focus ring, and a reduced-motion path with no travel at all. View site Interactive · mic + canvas WISH A cake in a dark room, five lit candles, and one thing to do: actually blow. The page listens through your microphone and turns your breath into physics — the flames bend away, gutter, fight back if you run out of air, and go out one by one in a sweep, each leaving a wisp of smoke and a beat of ember at the wick. The room darkens as the light dies, then warms back up while "Happy Birthday" resolves out of the smoke a letter at a time. Blowing is not just "loud": a blow is turbulence, so it is detected as a low rumble and a high hiss together, measured against a noise floor sampled from your own room — shout at it and nothing happens. The mic is offered, never forced. It is requested from a click rather than on load, and if it is denied, missing, or simply not hearing you, hold-to-blow drives the identical film. Audio is analysed on-device and never leaves the page; the stream is released the moment the last candle is out. One rAF loop, cake and candles baked to an offscreen layer keyed on light level, keyboard-complete, and a reduced-motion path that tells the same story as a still. View site Component · OTP field SIGIL A four-digit one-time-code field that seals itself. The message slides in from the bottom of the sheet, and one tap lands the digits one at a time — each dropping into its box on a spring while a charge enters the box and runs the whole way round its border, leaving the warmth behind it. One ring serves the entire row: instead of blinking on and off in four places it glides to the next box, carrying its own bloom and caret with it. The row completes, a light sweeps twice across it, and then the four boxes fly together into the centre and fuse — a ring draws itself, a check strokes on, a pulse rings out and the sheet floods with light while the copy turns over to "Number verified". Get it wrong and it is the same machine in reverse: the row shakes, the boxes turn rose, the wrong digits hold long enough to read, then roll out from the right and hand focus straight back so a correction can be typed without reaching for the mouse. It is a real field, not a picture of one: paste anywhere and punctuation is stripped, backspace on an empty box walks back, arrows and Home move you around, clicking past a gap lands on the next digit actually missing, and on Android the browser's own Web OTP offer fills it instead of the mock. Every state is one data-state attribute, so the look cannot drift from the logic; every announcement reaches a live region; and with JavaScript switched off it degrades to a plain four-box form that still shows what you type. Zero dependencies, transform and opacity only, and a reduced-motion path where nothing travels. View site Component · sign-in BAMBOO A sign-in that starts in the dark. Two things sit on one desk: a little lamp, fast asleep with Zs drifting off its shade, and a sign-in card you can barely make out beside it. There is no button to press — there is a brass bead on a cord. Grab it and it follows your pointer in two dimensions while the cord bends and hisses; release it past the detent and the switch clicks, the light pops on in a single frame the way a real lamp does, and the cord snaps back on an underdamped spring that rings like a rubber band. The lamp perks its head up and grins, the panda wakes beside it, and the card rises out of the gloom into the pool of light. Pull again and the whole room goes back to black. He reads along as you type your username, slaps both paws over his eyes the instant the password field is focused, and lowers them to peek the moment you reveal it — then squints happily when a stickman walks through the little door in the Sign in button. The dark state isn't decoration: while the light is off the card is inert, so nothing inside it is clickable, tabbable or announced, and the switch reports its own state to a screen reader. The cord is a real button — Enter or Space yanks it with the same physics. No JavaScript at all and the room is simply lit and the form plainly usable. Zero dependencies, synthesised audio, transform and opacity only. View site Component · bottom navigation MENISCUS A bottom nav whose top edge is a liquid surface. The selected tab is a bead lying on that surface, and the surface dips beneath it — not with a notch borrowed from a stack of welded pseudo-element curves, but as one path whose socket is solved for tangency: a convex shoulder that turns the flat edge down, a concave bowl that wraps the bead exactly, a second shoulder back up. Because the socket is computed rather than assembled, it can change shape while it travels, and that is where the liquid lives — the trailing shoulder draws out long, the leading one tightens, and the bead squashes along its own direction of travel, so the surface visibly smears behind the weight sitting in it. Icons are picked up as it passes: each one rises toward the bead on its own proximity curve, dips in, and is set back down, which means you can also just drag the bead along the bar and watch it collect them, then let go and let it snap to the nearest tab. The accent is not one colour but a ramp — lime, amber, coral, rose — lerped live from whatever is under the bead, and the room's ambient wash goes with it. Built as an APG tab list: roving tabindex, arrow and Home/End keys, one panel at a time, a visible focus ring, and and two tones of every accent — the bright one fills the bead, the dark one prints the label, because on a near-white bar the bright tone measures 3:1 and is simply unreadable at 11px. One rAF loop, one spring, and it parks itself when nothing is moving. With JavaScript off it degrades to a plain rounded bar that still works. Zero dependencies. View site Component · sign-in MOCHI A sign-in guarded by a cat, where every reaction is measured rather than canned. Put the caret in the email field and she locks onto it — a hidden mirror span renders your text up to selectionStart in the input's own computed font, and the fraction of the field that text occupies drives her pupils and her head turn, so she is genuinely reading along rather than playing a scripted sweep. Focus the password and both paws swing up over her eyes: each arm is authored in a local frame with the shoulder at the origin and the limb running down +y, so aiming a paw at an eye is one atan2 and one length ratio, and the two sweeps are mirrored so the gesture opens outward instead of both paws swiping the same way. Tap show password and the right paw slides clear — she peeks with one eye, and that eye looks down at what you are typing. Get it wrong and the card recoils on a damped sine while she flinches, ears flat, tail drooping, paws slapped down; get it right and the paws fly up, her eyes become happy arcs, and hearts and stars burst out of her. Underneath it never stops: she breathes, she blinks on a randomised cadence with the occasional double, her tail swishes at a speed set by her mood, and her ears twitch on every keystroke — all of it second-order springs integrated in a single rAF loop that is the only writer of any transform in the rig. It is a real form: labelled fields, a genuine aria-pressed reveal toggle, a live region for the result, focus-visible rings, and a reduced-motion path where every pose still arrives, just instantly. Zero dependencies. View site Component · one-time code TUMBLER A six-digit verification field where the code is not compared to a string — it is machined into a shape. Above the boxes sits the cutaway of a pin-tumbler lock, its six chambers welded to the six columns below by shared geometry, and every digit you type cuts one notch into the key blade: 0 is the shallowest, 9 the deepest. The brass pin in each chamber drops into its notch, the steel driver above it follows, the spring takes up the slack, and the whole mechanism visibly rearranges itself under your hands. What makes it honest is the pin lengths: each one is a different length, cut so that one digit — and only that one — lifts its join onto the shear line. Submit and the plug takes tension: a bead of light runs the seam testing chambers left to right, the plug creeps another fraction of a millimetre with every pin that clears, and either the light reaches the end and the lock parts along the line of light — or it dies on the pin that binds, that pin glowing red, the plug snapping back, the key ejecting cut by cut. The error message stays generic on purpose, and the code says why. It is a real field underneath: six inputs, paste and Web OTP autofill into any box, arrow keys, backspace that walks backwards, a live region for every outcome, a focus ring on the box and a shaft of light in the chamber above it, and with JavaScript off the lock still renders at rest and the form still works. Zero dependencies, synthesised pin clicks, transform and opacity only. View site Component · bottom navigation ARC A bottom nav drawn with one filament of light, and the slab it lies on never moves. The filament has a fixed length, and that single constraint is the whole animation: length is radius times angle, so choosing how coiled it is fixes both at once — fully coiled it closes into a ring of exactly the right radius to sit around the active icon, fully uncoiled it is a straight run of the same length, and everything between is the arc those two are the extremes of. So the indicator never slides from tab to tab; it unrolls, sweeps as a wide shallow bow, and winds itself back up around whatever you chose, ends meeting at the bottom. Because the length is conserved rather than tweened, the widest it can ever stretch is the filament laid straight — measured at 132px of a possible 148px, which is why the sweep looks like it is genuinely being paid for out of the ring. It is one open curve sampled point by point, not an SVG arc, because an arc command cannot draw a full turn: at 360° its start and end coincide and it renders nothing. The glow is three passes of that same path — a wide faint one, a body, and a near-white core — instead of a blur filter, which on a path rebuilt every frame would cost a full-surface re-raster. Two ghosts of where it was a couple of frames ago give it real motion blur, a pool of accent light travels with it and widens as it straightens, and a ring pulses outward the instant it finishes closing. Uncoiling is driven by distance left to run, never by speed, because speed is momentarily zero at the top of the spring's overshoot and would flick the ring shut halfway home. Icons warm toward their own accent by proximity, so you can also just drag the light along the bar and watch each one light as it passes. Built as an APG tab list: roving tabindex, arrow and Home/End keys, one panel at a time, a visible focus ring, and every label measured against the slab it actually lands on — the emphasis is carried by colour alone, because dimming the resting label to 62% opacity measured 3.1:1 and had to go. One rAF loop, two springs, and it parks itself when nothing is moving. With JavaScript off it degrades to a plain bar that still works. Zero dependencies. View site Component · one-time code SPINDLE The sibling of TUMBLER, and the argument against partial credit. Here the six digits are drawn as the wheel pack of a combination safe: six steel discs on one spindle, each with a notch — its gate — cut into the rim, and above them a single rigid bar, the fence. Type a digit and its wheel turns 36° per step, taking the short way round because the angles are tracked cumulatively rather than folded into 0–360; the right digit is the one that brings that wheel's gate to twelve o'clock, and its hub lights to say you have set it. Submit and the pack is spun up — one extra turn each, picked up from the right the way a dial drives its wheels through drive pins — and then the fence is let go. The answer is a distance. Twenty-four units puts the lugs down into the gates and the bolt withdraws across the whole case into a slot that lights behind it. Twelve units lands them on a rim instead, and it does not matter how many of the other five were right: one wheel out of place holds a bar that has no hinge, so the lugs stop high, the offending wheel goes red, and the whole case takes the clang. Five out of six is exactly as locked as none out of six. Underneath it is a real field: six inputs, paste and Web OTP autofill into any box, arrow keys, backspace that walks backwards, a live region for every outcome, a focus ring on the box and a halo on the wheel above it, a reduced-motion path that skips the wind-up and still lands every state, and with JavaScript off the pack renders at rest and the form still works. Zero dependencies, synthesised detents, transform and opacity only. View site Component · one-time code OTP VERIFICATION V2 A four-digit code field where the payoff is not a tick that replaces the boxes — it is the boxes becoming the tick. Type the fourth digit and each box draws a breath — a small compression in place — before the row folds: one and three rise, two and four drop, and every one of them tips through depth on the way, because a fold that only translates is a slide. A charge then laps the border of each of the four while lit filaments grow across the gaps between them, all at once on a tight stagger, because four separate beats read as a checklist and one reads as a connection. The moment the last filament lands the whole square changes colour — the edges, the digits and the wires all leave indigo for the outcome's green together, because four inputs have just become one object. It blooms, holds there for a beat, and then the four spiral inward — turning about the centre of the square rather than their own middles, so they sweep in on an arc — while the tile arrives counter-rotating into the space they leave. One continuous turn rather than a swap. It lands with two shockwaves at different radii, a pass of light across its face, and eighteen slow motes. The whole thing is transform and opacity, and the row's layout box never moves once: the height the 2×2 needs is reserved permanently in padding, so the error line, the footer and the hint sit at the same pixel in every one of the five states — measured, not assumed. Underneath it is a real field: four inputs, paste and one-time-code autofill into any box, arrow keys, backspace that walks backwards, a live region for every outcome, and three separate hues doing three separate jobs — indigo is the box you are in, emerald is the outcome, red is the refusal — backed up by shape, because the error fills all four boxes where focus only ever rings one. Reduced motion skips the fold and still lands every state; with JavaScript off it degrades to a plain four-box form that works. Zero dependencies, synthesised tones, no libraries. View site Storefront · a cart that really fills SOLA ATELIER Two pairs, one bag, and the thing you press is the thing that lands. Press Add and the product tile is lifted bodily out of its card — the well behind it deepens into an empty recess, so you can see the goods are gone — then it swells, tumbles across the counter and packs itself into a canvas tote. It is the same DOM node the whole way: the tile that flew stops being a flier and starts being a packed pair without ever changing size or shape, so there is no frame where a clone hands off to a stand-in. The tote is drawn as two SVG layers with the pairs sandwiched between them — woven weft, stitched hem, strap tabs with rivets, an interior dark enough to read as an opening, and the near straps in front of what is in the bag, because behind it they detach into two floating arches. And it behaves like a container rather than a counter with a picture on it: the pairs already in it shuffle over to make room while the new one is still in the air, re-spreading tighter as it fills, and past six the oldest sinks in while the count stays honest. The bag has ground of its own — a lit pedestal on the shelf below the goods, not a corner FAB sitting on top of whichever card happens to be under it — so a pair is lifted clear of its card and dropped in, the way it happens in a shop. It stays in flow at every width: on a phone the two cards stay side by side rather than stacking, because stacking pushes the bag past the fold and the usual fix — sticking it to the bottom of the screen — puts it straight back on top of a card. Free-shipping meter, a cart drawer, remove-a-row that pulls that exact pair back out, keyboard and screen-reader support throughout, and a reduced-motion path where the bag still fills, just without the flight. Zero dependencies; transform and opacity only. View site Scene · particle heart NOVA Twelve thousand points, and nothing else. The page opens on a cloud of them filling the whole screen and they draw themselves into a heart — in slow motion, because the making is the piece and a thing worth watching should be given time to be watched. The whole scene runs at a quarter speed while it happens and comes up to full speed exactly as the shape lands, so the heartbeat itself starts slow and finds its tempo. Press Make it again and it lets go and does it a second time. Nearly half the points draw the silhouette, lit and crisp; the rest fill the volume behind it as haze, pulled in towards the centre and lifted out of plane so the flat curve inflates into something with a front and a back rather than a wire. Then it beats: a hard pulse, a softer second, a rest — the scale of the whole object and the bloom together, on a real lub-dub at sixty-five a minute — and it sways rather than spins, because a heart turned edge-on stops being a heart. One wave of disintegration travels the outline, about a fifth of it in the air at any moment, so the shape never stops reading while pieces of it are visibly leaving and coming back. Bloom, Tide and Aurum are three palettes walked in order along the curve — a core, a light, a deep, a near-black and a spark — and the haze is pulled back towards the core hue, because at low brightness the pale end of a palette reads as grey dust instead of as the colour. Switching palette cross-fades the sky, the wash and the chrome together: the tokens are registered custom properties, so they can actually be animated. Drag to orbit, scroll to push in. The loop is corrected for real frame time, it stops dead when the tab goes away, and reduced motion opens on the finished heart — still turnable, still recolourable, with the one control that needs motion honestly disabled. View site Component · sign-in HUDDLE A sign-in form that is being watched. Four flat shapes stand in the illustration panel like a group photo, and they have opinions about what you are typing. They follow your cursor — pupils and bodies, because pupils alone are too small to read across a panel. Touch the email field and the whole huddle cranes over towards the form to read it over your shoulder, the tall one folding at the waist to get a better look, the orange one's mouth going to a row of dots. Touch the password and they get polite: eyes screwed shut, bodies turned away — all except the black one, who can't help himself and sneaks a look with one eye until he's caught. Then hit the reveal toggle and the joke lands: everybody turns their back. The tall one folds right over with a frown, the yellow one flips to face the wall, and the black one turns around so completely that he simply has no face any more. It is all reporting something true. There is no decoration here that isn't a real state of a real form — which field you are in, whether it is secret, whether the secret is on screen, caps lock, refusal, and the way home. Every pose in the piece hangs off one derived word written to a single attribute, so the whole cast is a readable table rather than a pile of selectors, and every lean is paid for with a lift of exactly the dip it causes — measured, not eyeballed, so the ground line they stand on is the same pixel in all six states. Wrong details shake the panel and the huddle recoils; the right ones make them jump, twice, on a stagger, under a burst of their own colours. And it is specific about the refusal, in the way a person would be: an unknown address is named on the email field, a bad password says wrong password on the password field and hands it back already selected so the next keystroke starts clean, caps lock volunteers itself as the likely culprit, and only on the second miss — never the first, because a reset link waved at one typo is nagging — does Forgot password? light up. Room for two lines of message is reserved permanently under both fields, so the card is the same height in every one of those states. Live region for every outcome, a reveal toggle that keeps your caret where you left it, and a focus indicator built from the underline the design already had. Reduced motion lands every state without a single move. Zero dependencies, transform and opacity only. View site Component · one-time code OTP VERIFICATION V3 The third answer to the same question QUARTO asked: what if the boxes did not get replaced by a tick, but became one? Where v2 folded the row into a square and wired it shut, this one throws it. Type the fourth digit and each box draws a breath, and then the line curls: the four wrap clockwise onto a circle, the outer two pulling in to the sides while the inner two swing out to the top and the bottom — every one of them travelling in polar co-ordinates, angle and radius interpolated separately and only turned into x and y at the very end, which is what bends each path into an arc. Interpolating position directly would draw a straight line between the same two points, and a straight line to a circle is the one thing that would give the move away. They do not tilt at all on the way in — they travel flat and land upright. An earlier cut had them bank into the corners and level out again, which looked good and was wrong: a lean that returns to zero is a clockwise tilt followed by an anticlockwise one, so the two boxes that actually swing reversed for about seventeen frames right before the spin. One reversal in an otherwise single-direction move is exactly what the eye catches. Then it spins: a turn and a quarter as a single rigid body, wound up and braked, no stagger, each box turning with the rim by exactly the angle it travels — so the digits tumble on the way round. The quarter is free, because 90° is a symmetry of a four-point ring: the four land back on the same four marks, and a rounded square turned a quarter is the same rounded square. Only the digits are disturbed by it, and they unwind that quarter over the brake to finish upright — slower than the box they sit in, never against it, so nothing in the whole move ever reverses direction. The turn is not sampled into keyframes — keyframes interpolate a translate in a straight line, so a sampled orbit cuts chords across its own arc and the radius shakes. Instead each box's transform-origin is moved to the hub, and a plain rotate then sweeps it round an exact circle: the whole revolution out of two keyframes, drawn by the browser. Measured, the radius holds to within a pixel. The dotted track turns with the ring underneath it but at a fraction of the speed, so the separation comes from the difference between the two rates — parallax — rather than from a second, contrary motion for the eye to unpick. The brake is the beat the code is accepted on: the edges, the digits and the track drop their white light for the outcome's mint together, because four inputs have just become one object. It is held there, lit, for a beat — and then the radius is taken to nothing and the four screw down into the hub with one more part-turn while the tile turns in clockwise behind them. One continuous rotation from the first curl to the last, every degree of it the same way round — measured, the four never give back a single frame of travel. It lands with two shockwaves at different radii, a pass of light across its face, and eighteen slow motes. Colour is reserved for verdicts. Attention has no hue at all: the box you are in, the charge running its border and the four on the track are simply light — a cold blue-white, brighter than the type around it, carrying a faintly blue glow, because a pure white halo on black reads as fog where a blue one reads as a source. Mint is the outcome and red is the refusal, and they are the only two hues the component ever puts on screen, which is exactly what makes them impossible to miss when they arrive. Focus is still never light alone — it lifts the box's surface and adds a halo, where the error fills all four boxes. Colour never carries it alone anyway: the error fills all four boxes where focus only ever rings one. Underneath is a real field — four inputs, paste and one-time-code autofill into any box, arrow keys, backspace that walks backwards, a resend cooldown, a live region for every outcome — and the row's layout box never moves once, because the clearance the orbit needs is reserved permanently in the neighbouring margins, so the error line, the footer and the hint sit at the same pixel in all five states. Keystrokes are dry unpitched foley, never a tune. Reduced motion skips the whole gyre and still lands every state; with JavaScript off it degrades to a plain four-box form that works. Zero dependencies, transform and opacity only. View site Component · checkout PAYMENT METHOD A payment checkout — SABLE is the issuer printed on the card — where the card is the form — a white titanium plate that graduates into blue across the diagonal, with a cyan and an indigo bloom so the colour has somewhere to travel, engine-turned, and engraved rather than printed. What you are buying sits under the card on the left, where a checkout puts it; the right pane is only the details, the save-card decision and Pay. The name embosses, the digits roll into their groups one at a time — a pool of one span per position, so typing a digit animates that digit and leaves the other fifteen alone — and the scheme resolves itself out of the first few numbers you enter. Reach for the CVC and the card turns over, because that is where the code is printed. Type an American Express and it doesn't turn: Amex prints its code on the front, so the grouping goes to 4-6-5, the field becomes four digits long and the label changes to front of card. One derived object decides all four, and nothing in the piece is decoration that isn't reporting something true. Press Pay and the form gets out of the way — the white half of the panel washes out to the cool slate the card sits on, never the other way round, because a white card washed onto a white panel loses its edge. The card flies to the middle of the whole surface, grows, and takes a sweep of light across its face while the authorisation runs. Blue while it is thinking, green when the bank approves, red when it doesn't, with the halo travelling with the card because it lives inside the thing that flies rather than in the box it left — and drawn as a spread shadow rather than a radial fill, since a gradient inset behind an opaque card puts all its light where nobody can see it. The flight is measured off a slot that is never transformed, since the bounding box of a rotated card is not the card. Underneath is a real payment form: Luhn, a genuine expiry check, caret-safe formatting where backspace next to a separator eats the digit behind it rather than the space the formatter is about to put straight back, the correct autocomplete tokens, a live region for every outcome, and room for a message reserved permanently under every field so the panel is the same height in all five states. Stacked, the form is taken out of flow rather than faded in place, because on a phone a faded-but-present form is half a screen of empty panel. Reduced motion lands every state without a move; with JavaScript off it is still a card form that works. Zero dependencies, transform and opacity only. View site Component · loading LOADING ANIMATION Everybody’s indeterminate spinner is the same object: a dash on a circle turning at a constant rate — which is the one motion nothing in the world actually does. Same circle. This bead is falling. It is a bead on the inside of a circular track under gravity: it drops down one side, whips through the bottom, and coasts over the top with just enough left to get there. Solved rather than tuned — ½v² + g·h held constant, integrated and inverted into a table of where the bead has got to at each instant, with the single free number in it chosen to put the bottom at three times the speed of the top. Everything else falls out of that one decision. The tail is the head’s own animation delayed, never a drawn streak — so the comet stretches through the bottom and bunches up over the top entirely on its own, because the beads are separated in time and a speed that changes turns that into a distance that changes. Measured off the rendered element rather than off the stylesheet, by stepping the animation and differencing screen positions: 4.26 px per step over the top against 12.42 through the bottom, a 2.92:1 speed ratio where a constant-rate spinner is 1.00:1, and a comet that grows from 33 px long to 84 — two and a half times — on the way down. It stays honest, too: an indeterminate loader must never imply progress, so nothing accumulates, nothing fills, and every lap is identical to the last. It has a rhythm rather than a reading, which is the same reason there is no aria-valuenow in the markup — that absence is precisely how a progressbar says indeterminate, where a zero would announce something stuck at the start. The 300 ms rule is one declaration: the loader starts invisible and fades in on a delay, so a response that beats the deadline mounts and unmounts a loader nobody ever saw — no timer, no state, and no JavaScript on the page at all. Reduced motion drops the travel and lets the head come to rest at the bottom of the ring, where a bead with no energy left actually ends up, breathing there with the track — because a loader whose job is to say something is happening must still say it. Every colour measured against its surface: the bead clears 14.4:1 on graphite and 4.5:1 on paper, and the glow is switched to nothing on white, because a glow on white is grey. Zero dependencies. View site Component · order confirm ORDER CONFIRM A checkout button that does not swap in a spinner — it opens. Press Order Now and the label leaves, the inside of the pill becomes a street, and the parcel you have just paid for drops onto it. A van pulls up alongside, dips on its nose as it brakes, rolls its side shutter up into the roof, takes the parcel aboard in one hop, shuts the shutter over it, squats on its back axle and goes — and the pill closes behind it as a tick. Nothing in the vehicle is keyframed twice. The wheels are not animated at all: one registered custom property holds where the van is, the group is translated by it and each wheel is rotated by it at 7.639° per unit — which is 360 over the circumference of a wheel that size — so the wheels can never slip, lag the body, or turn the wrong way. Braking is a nose dip and a brake lamp rather than an overshoot, because a van that rolls backwards for two frames on arrival is exactly the reversal the eye catches. The roller shutter is a pattern, so scaling the curtain compresses its slats the way a real one stacks into its housing, and the rail rides up on the curtain's edge keeping its own height. The hardest part is the parcel: on a flat side view "in front of the van" and "inside the van" are the same two coordinates, so there is no painting order that can do both. It is drawn on top of everything while it is on the road — which is where it is standing — and once it is aboard it is cut off by exactly as much of itself as the descending shutter covers, computed from the same number that drives the shutter, so it is gone the instant the shutter is shut and never has to be switched off. It is a child of the van, and cancels the van's own travel so it can stand still on the road while the van drives to it. Underneath is a real submit button in a real form: it posts with JavaScript off, it is aria-disabled rather than disabled so it keeps focus while the van is out, its accessible name is right in all three phases — the label's own words when idle, "Placing your order" while the pill is a street with no words in it at all, and "Order placed — start a new order" at the end, because the visible tick cannot tell you what pressing it does next. The two stacked labels cross-fade through visibility, not opacity alone: faded with opacity only, both are still in the accessibility tree and the button announces itself as "Order Now Order Placed". The pill is the same size in every state, so nothing under it ever moves. Reduced motion skips the street entirely and still lands the colour, the label and the tick. Zero dependencies, transform and opacity only. View site Component · mode switch LIQUID BUTTON Three frosted-glass pills lying on a clear slab, and a toggle that does not light up — it fills. Press one and the liquid enters at the exact point your finger landed, runs out to both ends of the pill, overshoots the caps and settles. Press another and the first one drains back to the point it was poured from while the second fills, so for about a third of a second there is one liquid being handed between two pills and both are lighting the tray at once. Press the full one again and it empties to a bright line at the place you first pressed. It is one number per pill — how full it is — driven by a spring, and everything drawn is derived from that number and from the spring's own velocity: the front is rough exactly while the liquid is moving and flat when it stops, which is why none of it is a keyframe. The wobble is spiked on every hand-over and decays the way a disturbed surface does, and it is taken to nothing at both ends of the travel — an empty pill has no surface to disturb and a full one has to seal against the rounded caps, and without that taper the wave keeps cutting and bites a notch out of the cap the moment the liquid arrives. The idea usually arrives as a rendered 3D clip; this is real elements in a real perspective, so it answers the pointer, and it is a native radio group underneath — arrow keys, grouping and screen readers for free, no roving tabindex to get wrong. A rotated element's bounding box is not its box, so the canvas is sized from layout values and the press point is read in the face's own coordinates — which is why every child of it is pointer-inert, or an offset would be measured against the <span> it happened to land on. The glass is drawn over the liquid, because an inset shadow on the face paints under its own children and the canvas is a child. The ink on the legend is decided by how much of the legend the liquid is standing under rather than by the fill level, with two thresholds so it cannot chatter while a front sits on it, and the glow is a separate fact on a separate class, because a draining pill is still lighting the tray on its way out. Measured against real composited pixels, the ink clears 5.38:1 on the darkest of the three liquids. Reduced motion lands every state in one frame with no pour; with JavaScript off the canvas never paints and the checked pill fills flat instead. Every colour in it was sampled out of the reference clip rather than guessed at — the ice blue, the red and the amber are the pixels the clip actually contains, and because that clip shows the same object once on a white surface and once on a black one, the page does too, off prefers-color-scheme: only the room and the glass change between them, since the liquid is the same liquid. Three liquids of three different lightnesses cannot share one legend colour, so they don’t: near-black clears 9.3:1 on the ice blue and 4.8:1 on the amber but only 2.8:1 on the red, while white does the opposite — so the ink is a property of the liquid, not of the component, and the reference’s own dark-on-red label, which sits at about 2.5:1, is the one thing here that is deliberately not copied. Measured on real composited pixels rather than on tokens, worst case rather than average, the three land at 9.31, 4.78 and 4.74:1 — which is also how the white motes drifting inside the liquid were caught parking under a white letter and taking the red from 6.8:1 to 2.8, so they now fade out as they cross the legend. Zero dependencies, transform and opacity only. View site Component · sign in / sign up LOGIN & SIGNUP An auth card — VERSO is the brand printed inside it — split by a hard diagonal, where switching between sign in and sign up sends one raked blade of night straight across the whole surface. The two states are the same composition mirrored, which is the whole reason the move works: because sign-up is sign-in flipped, the blade never has to rotate to get there — it travels one way, in one straight line, and the card comes out the other side reversed. It is a rectangle 165% as wide as the card, skewed by the rake, moved by a single translateX; its left edge is the sign-in seam and its right edge the sign-up seam, so one translation carries both. For about a fifth of its travel it covers the card completely, and that dark is where the two states trade places — the outgoing form is dropped and the incoming one armed under a surface nobody can see through, which is why nothing ever cross-fades through itself. The headline is inside the blade rather than behind it, in a layer carrying the blade's own transform applied backwards: a translateX commutes with a skewX, so the inverse cancels on every frame, not just at the ends, and the text sits still in card co-ordinates while the diagonal border box slices it. Both edges of the blade are lit — a warm hairline glowing inward, into the night, because a halo spilling onto the bone would read as a smudge rather than a source. Then the incoming pane's rows arrive one at a time behind the trailing edge, springing up in order, which is the only part of the switch the eye actually reads as motion. Underneath it is a real pair of forms: labels that are labels rather than placeholders, the correct autocomplete tokens, submit-then-live validation that stays quiet until you have tried once and corrects itself as you type after that, inline messages with their space reserved permanently so no field ever jumps, a strength meter that scores what you actually typed — length in tiers, one point per character class, penalties for a held-down key and for anything on the common list — a Caps Lock warning that is only ever a warning, a reveal toggle that reports its own pressed state, one live region for every outcome, and the inactive form made properly inert rather than merely invisible, with focus handed over only once the blade has covered the pane it is leaving. Sign in and the card is sealed by a single hairline of light run across its face. Colour is evergreen and one warm metal, and the metal exists at two depths on purpose: the bright amber is only ever used on the night and the deep one only on the bone, because no single mid amber clears the contrast bar against both — measured off the painted pixels, not guessed from the tokens. Stacked, the blade turns with the card: same rectangle, same single translation, skewed on the other axis and swept top to bottom, with the two slots forced equal so the seams have somewhere to travel. Reduced motion lands both states without a move; with JavaScript off the card unfolds into two plain forms that submit. Zero dependencies, transform and opacity only. View site Component · sign in RUNAWAY LOGIN A sign-in card whose Log in button will not be caught until the form is filled. Reach for it with two empty fields and it slips out from under the cursor — and it leaves two things behind that turn the gag into a mechanism: the dashed slot it belongs in, and a rubber tether stretching back to the eyelet in the middle of it, thinning as it goes taut and sagging when it is slack. So the piece is always saying both halves at once: this thing is still attached to that hole, and that hole is where it goes when you have earned it. The evasion is a ladder rather than a switch. Nothing filled and it is skittish — it leaves at full travel from 150px out. One field valid and it is sluggish, half the reach and a shorter fuse, so you can feel the form working before you can read that it is. Both valid and it snaps home, the slot goes solid, a ring leaves from under it, and it does not move again for the rest of the session. It is measured, not eyeballed: the distance is taken to the button's edge rather than its centre, because a 168px pill whose middle is 100px away is already under your hand; the away-vector is divided by the half-extents first, so a wide pill slips out sideways from a head-on approach instead of hopping; the ramp is a smoothstep, so it bolts in the last inch rather than drifting from a cursor that is still yards off, which is the difference between a reflex and a bug. Cornered against its own bounds it does not sit there waiting to be clicked — whatever the clamp eats on one axis is spent on the other, so it runs along the wall. The tilt and the stretch are not a second animation; they are the same one differentiated, read straight off the spring's velocity. And it points: every bolt marks the field that is still missing, so being chased around a card is never a dead end. The part that actually matters is that none of it is allowed to trap anybody. It is a real submit button and never disabled — a disabled button cannot be focused and cannot explain itself, so this one carries aria-disabled and answers a press with the reason plus focus on the field at fault. It only ever dodges a fine pointer: a button that runs from a finger is a button you cannot press, so on touch the whole play area collapses and the caption stops claiming anything is moving. Tab reaches it and it comes straight home for as long as it holds focus. Enter in either field submits, as it would in any form. And two dodges in, the card quietly fades up the way out — Tab reaches it, Enter submits — in space that was reserved from the start, because a card that grows a line while you are chasing something around it has just moved the target. Reduced motion removes the chase entirely and leaves a form. So the joke is only ever played on the mouse, and the mouse always has a door. Zero dependencies, transform and opacity only. View site Page · 404 SLEUTH 404 The flat "walking investigator" 404 that goes around as a GIF, rebuilt as a part. A GIF is a film of a bird: it walks the same eight frames forever and it does not know you are there. This one does the job the picture only mimes — because the magnifier is your cursor. It is not decoration, it is a lens: underneath the pale 404 lies a second, sharper copy of the whole scene, clipped to a circle at the glass and scaled about that same point, so the circle is a fixed point of the transform and the disc cannot drift off the ring. What you see through it is genuinely magnified rather than merely tinted. And the floor only talks under the glass: the weave of the boards, and the case notes — swept · nothing · checked twice · case cold — live in the lens layer alone, so the page is quietly telling you somebody already searched here and the glass is how you read it. He walks to you. The bird keeps a standoff, turns to face the glass, and his stride is advanced by distance travelled, never by a clock, which is the only reason the feet do not skate — cross the page and he runs, nudge the mouse and he takes a single step. His arm is re-drawn from shoulder to handle every frame in scene coordinates, so he can mirror himself with one scaleX without the hand ever leaving the glass; his eye tracks the lens in local coordinates, so the same mirror inverts it for free and he never looks out of the back of his head. He drops footprints in the direction he actually walked, and once he has given up he says so — over his shoulder, away from the glass, because a caption that lands on the lens has covered the one thing the page is about. Before you touch anything he patrols: he has a floor to sweep. The rules underneath are the point. Touch gets the glass and keeps it — a finger lifts after every tap, and handing the floor back on lift-off would mean touch never held it at all. A mouse leaving really has left, so he goes back to sweeping rather than freezing mid-reach. Reduced motion is one posed frame with the glass parked, no loop running, and pointer input ignored outright — it cannot be talked back into moving. With JavaScript off the lens, the arm and the bubble are hidden and the bird simply stands there. Underneath all of it, it is a 404 page first, and a quiet one: the scene already says nothing lives here in pictures, so every line that repeated that in words is gone. What is left is a heading, four words and a door — eleven words on the whole page — and the space they gave up went to the board. The affordance line and the reduced-motion notice still exist, but only for screen readers: spoken where they help, silent where the picture has already said it. The pointer is yours: the page uses the viewer's own system cursor, never hides it and never paints a stand-in — a drawn cursor lags the real one by however long the loop takes, and a page that replaces your pointer with a picture of a pointer is lying about where you are clicking. So the glass hangs off the pointer rather than sitting on it, up and left by a little over its own radius, the way a hand holds a magnifier by the handle: the cursor lands just outside the rim, it never covers the one thing the page is about, and on a touch screen the disc is not underneath your finger. There is no card either: the wall runs to all four edges, the boards run along the bottom of the viewport and the copy sits on the wall, inert to the pointer so the glass keeps following behind the headline while only the door takes clicks. The board is a room, painted in gradients on two empty elements: a wall above, boards below in a browner tone rather than merely a darker one — a floor that is only a darker tint of the wall reads as a stripe — a skirting board along the join, plank seams on two periods so the floor is not a metronome, nine dust motes drifting on the compositor, and a sheet of paper grain over the lot. The wall carries the same weave the lens layer carries at a twentieth of the contrast, which is the detail that makes the glass read as magnification rather than as a window onto some other surface: same floor, closer. And the composition is a room too: the address stands on the same floor line the bird sweeps, and the actors are sized against it rather than against the frame. And the walk is a real walk: two bones per leg with a backward knee, and the loop is given where each foot must be and solves the joint for it, so the planted foot stays planted while the body passes over it — measured at a twelfth of the body's own travel, against a rig that used to slide the foot the full distance. The head holds still in space and then thrusts forward to catch up, which is most of what reads as bird rather than blob-on-legs. And he is capped at the speed those legs can carry: a walk is stride × cadence and nothing else, so letting the chase spring run free just turns the gait into a flicker. Zero dependencies, transform and opacity — and one clip-path, which has to be a clip, because that is what a lens is. View site Component · submit button SUBMIT BUTTON The coral "file button" animation that goes around, rebuilt as the thing it was always miming: a submit button that becomes its own progress bar. Press it and it does not sprout a spinner beside it or swap itself for a different control — it stretches, out to the full width of its track, and from that moment the button and the indicator are the same object. Then its own underline rolls up into a ring and turns for as long as the request is out — a spinner the control made out of itself — and when the answer lands the ring unrolls back into the underline, which runs out to the full width and floods. The idea is PARADROP's principle next door rather than its move: conservation. There, nothing is created and nothing destroyed — the ring IS the progress track, a stroke exactly one circumference long, and the download arrow IS the checkmark it folds into. Things do not appear and disappear, they become. Here the verb is submit, so it runs the other way. The ring is as tall as the button — its outer diameter, stroke included, is the control's own height, and both numbers are read off the element rather than typed in, so it stays proportional at any size; its radius then sets the underline's length, computed rather than eyeballed, which is why the roll reads as one object changing shape instead of two objects swapping places: every sample knows where it sits on the line and on the ring, and what is drawn is the blend, so each point travels its own arc. The walk is anchored at the top and runs outward both ways, which keeps the map monotonic — go the other way round and the stroke turns itself inside out halfway through. Three things it taught. It rolls to 0.82 of a turn, not a whole one, because a closed ring is rotationally symmetric: spin it and every frame is identical, so the wheel would turn and you would never see it — the seam is what makes the turning visible, and conservation still holds, the stroke is simply wrapped around a longer arc. It is sized on its outer diameter, stroke included, which is the second lesson: it is tempting to size it on the arc's static extent, since the seam means the stroke stops short of the bottom — and that is wrong, measurably so, because the ring TURNS, and over a revolution the seam visits every side, so the shape's real extent is the whole circle. Sizing on the static shape overshoots by the width of the gap and the ring hangs out of the button. And there is nothing written on the button while the ring turns — its content has rolled up — so the line underneath carries the words and the live region carries them for anyone not looking. The ring is also deliberately not the cyan: cyan means sent, and a thing that is still waiting must not wear the colour of the outcome, so the stroke turns cyan at the exact moment it begins to unroll and the colour change is the news. Four elements make all of it, and getting to four was the work. Earlier passes carried a specular sweep across the button, a glowing cap on the fill's leading edge, a bright hairline riding the flood, a ring leaving on the press, a paper-plane payload, an ambient wash that changed colour with the state, and a rotating rainbow border. Every one of them is gone. They were decoration standing in front of the move: the piece has exactly one thing to say — the button becomes the bar, the bar fills, the fill floods — and each extra highlight was another object competing to be looked at while it said it. A second accent colour used to point at something is the clearest version of that mistake, because if a motion needs a light on it to be legible then the motion is not legible. What is left is two surfaces, two colours, and the material they are made of: one hairline along the button's top edge and the dark it sits in, with no halo, because a control that glows is asking for attention it has already got. The construction is two clip-paths and nothing else. The track is always full width and the button is a clip inside it, so "growing" costs no layout at all: the stretch is one inset opening to zero, which is also why the corners stay round the whole way and why there is no second element anywhere in the move. The wire and the flood are then the same clip on the same element — a pulse along the bottom whose two edges the loop drives, then that pulse's top inset running to zero while its right inset opens out — with the plate dropped seven pixels while the wire is live, because a stripe that sits flush reads as painted on and one that hangs below reads as running underneath. Which makes ownership the whole engineering problem, and it is settled explicitly: the rAF loop is the only writer of the wire, CSS is the only writer of the flood, and the loop is stopped with the pulse left exactly where it landed before the state flips — because a transition whose start value is being rewritten every frame does not ease, it stutters, and because leaving the pulse in place is precisely what lets the flood burst out of it. And the wire does not light until the stretch has landed, because there is no wire yet while the button is still becoming one. The part that matters most is what the bar refuses to claim. A submit has no byte count. So nothing shows a percentage, the progressbar never carries an aria-valuenow, and there is no fill at all — an early build eased one to seven-eighths and stopped there to wait for the answer, and a third of every send was a frozen bar, which reads as a hang rather than as patience. A bar that marches to 100% and then sits waiting is the same lie with fewer steps. What the wire claims instead is simply true: something went out, the line is alive, something came back. Underneath it is a real form and a real submit button: it posts with JavaScript off, it carries aria-busy while the request is out, it has one live region for every outcome, a failure runs the plate back the way it came rather than blinking it away — a failure that teleports reads as a crash — and once pressed the button goes inert rather than merely invisible, because at opacity 0 it is still in the tab order and still answers Enter. Colour is white, black, and one cyan, on PARADROP's midnight floor. There is exactly one white surface on the page — the button — which is what makes it the one thing to press without needing a glow to say so; the ring is black on it at 17:1; the sent state is cyan. Nothing else carries a colour. That pairing also deleted a whole mechanism: an earlier pass ran a gold ring on an indigo button, which measures 2.28:1, because hue difference is not contrast and both were mid-luminance — the fix then was to make the button bank down while it worked, purely so the ring could be seen. A white surface and a black stroke need nothing doing to them, so the dim is gone. The fault tone is the only warm thing anywhere on the page, which is the fastest way to make a warning unmissable without making it loud. Reduced motion lands every state with none of the travel. Zero dependencies, transform and opacity, and two clip-paths. View site Page · greeting HAPPY BIRTHDAY A cat is holding a flower out. A stick figure is standing a few feet away in a party hat with his back turned, and he has no idea. The whole page is one verb: give it to him. The point of it is that the gift is a real object you have to carry, not a button that plays a cutscene — nothing in the scene sits on a timeline, and everything is solved from one number, where the flower is, every frame. The cat's paw is glued to the stem: its arm is re-drawn from shoulder to stem in scene coordinates for as long as the stem is inside the cat's reach, so as you pull, the cat leans after it, and when the stem finally leaves that reach the paw opens. Letting go is therefore something the cat does, at a distance you chose, rather than a keyframe at t=0.3s. He turns round when the flower gets close enough to notice, and he turns by being scaled through zero on X — passing through zero is not a glitch to route around, it is the edge-on frame of a real quarter-turn, and it is the only reason a circle reads as a head rotating rather than a circle sliding; the face fades up on the far side of it and the tuft on the back of his head fades out on the near side. His arm then solves for the same stem the cat's arm was solving for, capped at his own reach. Two arms, one point — which is what makes it read as a hand-off instead of two drawings overlapping. Drop it outside his reach and it springs back to the cat, who was never going to keep it anyway. One colour, and that is the whole design. Everything on the board is chalk — the cat, the man, the hat, the floor, the dust: one cream stroke weight on a plum-black ground, no fills. The flower is the only saturated thing on the page, which means the affordance costs nothing: no glow, no pulse, no arrow, no label. The one colour in a monochrome room is the thing to pick up, and you know that before you have read a word. It also gives the payoff somewhere to go — the confetti is made of the flower's own coral, gold and green, so delivering it is the moment the flower's palette escapes into the room rather than the moment a new palette arrives. The typography is deliberately the opposite of the drawing: the actors are naive doodles, the words are a display serif with its soft and wonky axes wound right up, set large and mixed-case and arriving letter by letter out of the burst. A cartoon can say happy birthday; it takes real type to mean it. Ownership is settled explicitly, because it has to be: the rAF loop is the only writer of anything that moves continuously — the flower, both arms, both hops, the turn, the tail, the eyes — and CSS is the only writer of the things that fire once and never move again. In particular the hops are not in the stylesheet: both arms are solved from a shoulder, so a CSS hop would take the body away and leave the hand behind. And both dynamic arms live outside both actors' groups, in scene coordinates, because the man is mirrored when he turns and an arm inside that group would be mirrored with him — reaching confidently away from the thing he is reaching for. On a phone the two of them are too far apart to be worth looking at, so he moves in: one offset applied to his group and to every point that solves against him, and the notice distance is a fraction of the trip rather than a number of units, or he would already be turned and already reaching before anything had been touched. Every path through it is the same path: the flower is a real button, and Enter sends it along an arc with the arms, the turn and the grip running off that position exactly as they do under a finger — the auto-give is not a second animation, it is the same one with a different driver. Focus moves to Again only when the give came from the keyboard, because yanking a mouse user's focus onto a button paints a ring they never asked for. One live region says the cat let go, that he is turning, that a throw missed, and what happened at the end. Reduced motion lands every state with none of the travel. And with JavaScript off the page is simply a card that already says happy birthday — the rest pose is written into the markup, the flower is not claimed to be a button, and the drag hint is not shown. Zero dependencies; transform, opacity and stroke geometry. View site Page · team ATLAS A studio's team page, built on one rule: colour is a spotlight, and there is only one of it. Seven people drift past on a 3D coverflow above a paper-white room, and only the one standing at dead centre is in colour — everybody either side of them is black and white. Turn the wheel and the colour travels: a face saturates as it swings into the middle and drains as it leaves, so the eye is told who is being introduced by the material itself rather than by a border, a glow or a label. The portraits do half the work: one charcoal suit, one grey backdrop and one identical lighting set-up across all seven, with a single saturated garment per person — which is the whole trick, because a team all wearing grey would greyscale into the same picture and there would be nothing to turn on. That garment colour is also the person's accent, and the whole page follows the centre card — the ambient wash under the deck, the brand dot, the counter, the progress ring and the meta line all take it, so the page is never wearing a palette that belongs to nobody. The mechanism is the interesting part, because the obvious way to do it is wrong. Animating a filter per frame across seven large surfaces re-filters every one of them on every frame; instead each window carries a second, pre-rasterised grey copy of the same screenshot, and the only thing that ever moves is that copy's opacity — one composited property, decided by a smoothstep on the card's distance from centre, so the bleed happens close in and the wings stay flat grey. Same picture, two rasters, one crossfade. Hovering a wing gives it a peek of its colour back, which is the cheapest possible preview: it is the same number, scaled. Each portrait carries Name, Designation across its foot, drawn above the grey copy so the label never drains with the face, and dimmed on the wings so seven labels do not compete with the one person being introduced. Paper forces a second discipline: a garment colour picked to survive greyscale is mid-tone by definition, and mid-tone on paper measures 2–3:1 — so each accent is walked down until it clears 4.5:1 and only that darkened tone carries type, while the raw colour paints light. Measured on the composited page, not eyeballed: 4.60:1 at worst. A wing takes a click to come to the centre. It drags with inertia and snaps to the nearest card, wheels one site per notch, arrows step, and the autoplay ring winds down between sites and stops the moment a pointer enters the deck. The 3D is solved rather than eyeballed: a rotated neighbour's near edge would otherwise cross the hero's plane and slice a black wedge through the middle of it, so the depth is set from the rotated card's own half-diagonal and the centre card rides forward of the rest. And both fallbacks are real pages, not degraded ones: reduced motion becomes a flat scroll-snapping row where the person nearest the centre of the deck — measured, not thresholded, because two cards can both be 60% visible at once — is the one in colour, and with JavaScript off nothing drains anything: the team is simply shown as it is, in a scrollable row. View site Component · verification DECK A four-digit code field that deals itself. Type the last digit and the row does not get swapped for a tick: the four boxes gather to one point and fan, because each card is rotated about a pivot three heights below its own bottom edge — so a single rotation produces both the spread and the arc, and the cards open like a hand instead of sliding apart like tiles. All four pivots land on the same point in space, which is the entire reason it reads as one hand rather than four objects that happen to be tilted. Then the hand squares up, left card first, the digits going out with the turn because a squared deck is face down and a stack still showing a number reads as one box holding one digit — the opposite of what has just happened. What lands is a single tile with a corner of every card under it still showing: thickness is the only thing that says four cards are still there once they are aligned. Then the stack is collapsed — cross-faded into a single tile of exactly its own size, radius and surface, so the four become one rather than being replaced by something else. And that tile does the waiting. A segment of ice laps its edge while the code is actually checked — ice, not mint, because the component does not know the answer yet and nothing may wear the colour of a result before there is one; indeterminate, because there is no byte count behind a code check, so nothing claims a percentage and nothing carries an aria-valuenow. It is the same lap every keystroke ran: type a digit and a short lit dash travels that box's own border, and when the four become one the tile runs the same dash round the same shape — so the wait is visibly made of the light the typing was made of. When the answer lands the lap closes: the ice segment goes out under a mint outline drawing itself round the same rect, the tile floods, its own edge is released outward, and the check draws inside it. A digit landing is an event rather than a text assignment — the outgoing glyph leaves on its own throwaway node while the incoming one pops in from 1.45× behind a clipping window, pushing a halo out behind it, because a composited transform can slip an ancestor's overflow and a digit hanging above its box is the one failure that reads as broken. Three things it taught. Occlusion is the whole illusion: while the boxes are holes in the sheet they are translucent, and a translucent fan is four ghosts overlapping while a translucent stack is one smeared card — so the faces turn opaque the moment the deal starts and the card in front hides the card behind it. The pivot lives on the card and the squash lives on the face, because a scale written on an element whose origin is three heights below it does not squash the card, it hurls it down the page. And the stack has to be looked at: at two hundred milliseconds it is a frame nobody sees, and the move loses its middle — a fan that becomes a check is a trick, a fan that becomes a deck that becomes a check is a mechanism. The clearance the fan needs is reserved permanently in the row's own padding, so the cards travel out of a box that never changes size and nothing below them twitches. Underneath it is a real form: four native inputs the click actually lands on, paste and OS autofill spread across the row from whichever box received them, backspace walks back, arrows step, Escape resets, and Continue hands the field back empty. A wrong code is held for a second and a half rather than a flicker — a field that empties under your hands before you have worked out why is worse than no feedback — and it is said once, in the subtitle, with the accessible copy tied to the inputs and never drawn twice. Two colours and no more: the component is white light until it has an outcome, then it is mint or it is rose, and nothing wears the colour of a result before there is one. Every measurement is read off the page — how far each card must travel, how big one card is — so the fan is right at any width, and re-measured on width changes only, because a phone's URL bar fires height-only resizes all day. Contrast measured on the composited pixels, not on the tokens: the eyebrow sits on the brightest corner of the floor, where a 60% white is 3.16:1. Reduced motion lands every state with none of the travel, and with JavaScript off it is a plain, usable four-box form rather than four blank boxes. Zero dependencies; transform and opacity only. View site