ROB'S SANDBOX

95 EXPERIMENTS & COUNTING
FRESH · OCT 16

LAST NIGHT'S BUILD — EXPERIMENT № 01

Hush

A lullaby you rock. Hold your phone like a cradle and rock it gently side to side: every time a swing turns round, a music box plays the next note of the tune, and eight swings finish a line of the story. Then the view zooms out to show what the cradle is rocking in: a little ship, on a wave, on the wide sea, held by the moon, held by the night, held by the world. Each new thing joins the lullaby with a sound of its own (a creak, the wash of the sea, a low drone, a glassy shimmer, slow chords, a deep hum), and it gets later as you go, the blush dusk darkening to night as the stars come out. Nothing on the page ever stops rocking, even when you do. With no tilt sensor, drag side to side.

THE BACKSTORY

Rocking is one of the oldest ways of settling a baby: a slow, steady sway of roughly one swing a second calms the heart rate, and lullabies in many languages are sung in a lilting triple time that matches it. This story is a cumulative tale, the kind where each line adds one bigger thing around the last (like "The House That Jack Built"), told as a zoom outward from a cradle to the whole turning world.

AUDIOINTERACTIVEGENERATIVE
OPEN IT →
Preview of Hush
01Under Construction

Hush

A lullaby you rock. Hold your phone like a cradle and rock it gently side to side: every time a swing turns round, a music box plays the next note of the tune, and eight swings finish a line of the story. Then the view zooms out to show what the cradle is rocking in: a little ship, on a wave, on the wide sea, held by the moon, held by the night, held by the world. Each new thing joins the lullaby with a sound of its own (a creak, the wash of the sea, a low drone, a glassy shimmer, slow chords, a deep hum), and it gets later as you go, the blush dusk darkening to night as the stars come out. Nothing on the page ever stops rocking, even when you do. With no tilt sensor, drag side to side.

AUDIOINTERACTIVEGENERATIVE
02Under Construction

By Ear

A spirit level you read with your ears. Lay your phone on a shelf, a table or a picture frame and two pairs of notes start to beat against each other, one pair for each direction it can tilt. The further off level it is, the faster the wah-wah; as you shim it closer the beat slows to one every few seconds, and when it is true it stops and the two notes fuse into one. When both directions are true a third note joins them into a chord. Stand the phone on its edge and it reads the line it rests on and whether the wall is plumb. The glow in each brass-capped vial is the measured loudness of its notes, so you see the beat you hear. Zero it on any surface you trust; with no tilt sensor, drag to tilt it.

AUDIOINTERACTIVESIMULATION
03Under Construction

Reel

A kitchen timer with no words or numbers anywhere on it. Swipe up (or scroll down) to pull a tape off a reel: every minute is a bead on the tape, every fifth a bigger bead, every quarter hour a ring and every hour a violet disc, and the reel ratchets as each one comes off. Let go and the reel starts winding the tape back in at the speed of time, and the page quietly scrolls itself back to the top as it goes, because the scroll position is the time left. A faint ladder of the same beads on either side lights up as high as the tape reaches, so you can read it at a glance. When the knot reaches the reel it rings with glass bells and violet rings; tap the reel to pause, or to answer it.

INTERACTIVECANVASAUDIO
04Under Construction

Brim

A glass jar you hold under the tap of English Wikipedia for exactly one minute. Press the button and, for sixty seconds, every edit anyone in the world makes to English Wikipedia drops into the jar as a pebble, live: the bigger the change, the bigger the pebble. Aubergine pebbles added words, pale pink ones cut them, jade ones are brand-new articles and grey ones were made by bots. The pebbles tumble and pile up like real stones, and you can grab and throw them while the minute runs. Each one slowly fades as the minute goes on, so the pile reads in layers, oldest at the bottom. When the minute is up the tap shuts, a cork drops in and the label is written: the time, how many edits, how many bytes went in and came out. After that nothing in the jar moves again, but you can tap any pebble to see which article it was and open it.

DATASIMULATIONINTERACTIVE
05Under Construction

Wake

A night swim in a bioluminescent bay, told while you stir the water. The screen is black water on a moonless night; drag your finger through it and the bay answers in blue, a cloud of tiny flickering sparks that flare where you move fast and fade in about a second. The story only moves on while you keep stirring: the guide, the creatures making the light, a fish bolting below you like a comet, a rain shower where every drop lands a spark, and a red lamp calling you back to the boat. Stir the same patch over and over and it dims, the way the real cells run out of light and need a few seconds to recharge. The words glow with the water and sink back into the dark when you stop.

SIMULATIONINTERACTIVEGENERATIVE
06Under Construction

Hanger

Table shuffleboard where the physics is your phone’s own scrolling. The puck sits still in the middle of the screen and the table slides under it: flick the page once, let go, and the momentum carries the table on and slows it down, the way a weight coasts down a waxed board. Where the page stops is where your puck stopped. Short of the foul line scores nothing, then one, two and three as you get nearer the far end, and four for a hanger, the puck hanging over the edge and still on the wood. Go too far and it tips into the alley. The scoreboard at the top calls it as you slide, with the feet and inches still to go. One flick, hands off; scroll back up to throw again. There is no code in the game at all: the scoring, the call, the puck’s spin and its tumble off the end are all worked out by the page’s styles from how far you have scrolled.

GAMESCSSINTERACTIVE
07Under Construction

Mouth

A map of your vowels, drawn while you talk. Every vowel you say carries two hidden resonances that give away how open your mouth is and where your tongue sits; Mouth listens, reads them off your voice about sixty times a second, and drops each moment into one square of an eight-by-eight chart laid out the way phoneticians draw the vowel chart: front of the mouth on the left, back on the right, closed at the top, open at the bottom. Talk, sing, read something aloud, and pink dots grow in the squares your voice lives in, in eight steps, so the chart slowly becomes a portrait of your accent. The thirteen common vowels are printed where they usually land and light up as you reach them. A white box hops from square to square with you, trailing the last eight. Tap any square to hear what a voice sounds like there. No microphone? Demo plays a synthetic voice round the chart and the page reads it exactly the way it reads you. Your map is kept on your phone for next time.

DATAAUDIOINTERACTIVE
08Under Construction

Plate

A square steel plate strewn with sand, played like a keyboard. Each of sixteen keys bows the plate at one of its resonances: you hear a long, rasping, ringing note, and the sand is thrown off every part of the plate that shakes and gathers on the lines that stay still, drawing that note’s figure. Higher keys are higher notes and busier figures, the way a real plate behaves. Let go and the plate rings down and the sand stops where it lands. Hold two keys and it only settles where both are still, so chords draw shapes no single note can. Every key wears its own figure, so you can see what a note will draw before you play it. Nothing on the page moves until you touch it. Use your keyboard (A to K and Q to I), or the keys on screen; slide a finger across them to glide from figure to figure. Space pours fresh sand.

AUDIOSIMULATIONCANVASINTERACTIVE
09Under Construction

Copy

Whistle Morse at your phone and it writes down what you sent, and then somebody answers. A short whistle is a dit, a long one a dah; every whistle is drawn on a moving paper tape as you make it, and each letter lands huge on screen the moment you pause, then rides the tape away above the marks that made it. It learns your speed as you go, the way an operator learns a sender’s hand. Stop for a couple of seconds and a far station called VBS keys a reply back in coral, in real operator shorthand, with what it means written underneath: send CQ and it answers your call, SOS and it asks where you are, 73 and it signs off. No microphone, or a quiet room? Hold the key or the space bar instead. The crib sheet lists every letter by how common it is and lights the ones you could still be making as you send. A remix of Sounder, which sent Morse; this one receives it.

AUDIOINTERACTIVETYPOGRAPHY
10Under Construction

Sixty

A loop pedal whose loop is the real minute. The dial is one minute of the clock in four rings, a bell, a pluck, a clap and a thump; tap a ring and a note lands at that second, and the actual second hand sweeps round and plays it, then plays it again sixty seconds later, and every minute after. Tap the middle to drop a note on the beat you are hearing. The hour picks the key, a fifth higher every hour and minor after dark, and each minute moves to the next chord of a four-chord loop, so the same pattern is a different riff every minute and a different song every hour. Your pattern rides in the link, and because playback is the clock rather than a tempo, two phones on the same link play the same note at the same second. Not a speck of black or white anywhere.

AUDIOINTERACTIVECANVAS
11Under Construction

Trio

An instrument of three heavy pucks on a plum felt tray, played by tilting your phone. Lean it and they slide downhill; when one strikes the edge it rings like the thing it is made of: the big teal one a low bronze bell, the bone one a glass, the small sage one a brass bowl. Which edge it hits picks its note, the bottom sounding home and the left, right and top one, two and three steps up the scale, so tipping the tray around plays a tune. When two pucks meet, both ring. A sharp jolt of the phone throws them, and whatever note each last rang is engraved on its face. There is nothing else on screen. No tilt? Drag and fling the pucks, or tip the tray with the arrow keys.

AUDIOSIMULATIONINTERACTIVE
12Under Construction

Unison

What else sings your note? A ruler of 44 real things that make a steady pitch, from a cat’s purr and the 50 Hz hum of the power grid to a honeybee’s wings, the dial tone, concert A and its rivals, a mosquito and a smoke alarm. Tap once, then hum: the ruler slides under your voice so your note always sits on the reading line, and whatever is printed there is what you are in unison with. Hold the note and that thing answers you, in its own voice, at your pitch. There are no buttons; your voice is the only control. As you go it measures your reach, from your lowest steady note to your highest, and counts how many of the 44 fall inside it. No microphone? A ghost hums instead.

DATAAUDIOCANVASINTERACTIVE
13Under Construction

Since

A stopwatch that lives in its own link. Press the crown to start, the pusher to take laps, name what you are timing, and watch the address change with every press: there is no storage anywhere, so the link is the whole stopwatch. Send it to someone and it is running on their phone too, to the hundredth, because a start time plus the clock is all a running stopwatch is. Bookmark it and it is still counting next week. The back button is undo, even for reset. The hands and the dot-matrix digits are pure CSS, ticking five times a second like a mechanical movement.

CSSINTERACTIVEDESIGN-SYSTEM
14Under Construction

Haystack

A word search printed on a heap of stencilled straw. Over a thousand capital letters lie strewn a little crooked and a little too small to read, and seven words on a theme are hidden among them, running any of eight ways, even backwards. Your finger is a loupe you can’t see: the only sign of it is that the letters under it swell, straighten up and fall into rows, and the one at its centre turns cream. Drag along a word to pull it out, and it stays scarlet, like a needle. Flick and the loupe coasts on. Six haystacks, a clock, and your best time for each.

GAMESTYPOGRAPHYCANVAS
15Under Construction

Adrift

A message in a bottle on the real sea. Write one letter, in ink that doesn’t come off: there is no backspace, no undo, and even a half-written draft is kept. Then hold down one of six shores until it fills, and the bottle is thrown. It drifts on the actual surface currents of the last sixty days, looked up hour by hour at wherever it happens to be floating, while its own log writes itself one day at a time: how far it went and which way, how big the waves were, the coasts it passed. It sails until it catches up with today, then carries on a little further each time you come back, until it washes ashore and your letter is read by whoever finds it. Every bottle you throw stays thrown.

DATASIMULATIONCANVAS
16Under Construction

Mimic

A soft peach creature that sings back whatever you hum it. Hum, whistle or "la" a few notes and stop: it listens with a real pitch tracker, works out the notes you meant, then sings the tune straight back in its own gooey voice, same rhythm, moved up into its register and snapped to the nearest true note, so it always sings it a little better than you did. Its mouth, swell and skin move in time with every note it sings. Underneath, a score strip shows both of you: the wobbly line is what you actually sang, the pills are what it heard. No mic? Tap it and it sings its favourite tune. A remix of Gloop, taught to sing with the pitch tracking from Standstill.

AUDIOINTERACTIVECANVAS
17Under Construction

Dead Level

A bullseye spirit level you play with your phone. Tilt it and the bubble drifts toward the high side through the spirit, lagging and settling the way a real one does and squashing flat when it hits the rim. Twelve rings are scribed into the glass one at a time. Float the bubble into each and hold it there while the ring closes around it. The rings shrink as you go, the later ones slowly circle the vial, and the twelfth is dead centre. Each mark you hold rings a glass note one step up the scale and stays scribed where you found it, and the clock keeps your best time. Everything, from the knurled bezel to the bubble’s glint, is one chartreuse hue drawn in SVG.

GAMESINTERACTIVESIMULATION
18Under Construction

Hoist

A signal-flag composer for sailors, and for anyone who wants to spell their name the way ships do. Type a message and each letter runs up a halyard as its International Code flag, with numbers as tapered pennants and spaces as a bare tackline. Six flags hang on a halyard and up to four halyards fit on one screen that never scrolls, so the flags shrink to fit as you type. Tap any flag to read its name and what it means flown alone. Oscar, for instance, means man overboard. A few whole hoists, like NC for distress or UW for “I wish you a pleasant voyage”, are recognised as signals in their own right. Every flag is drawn in CSS alone, and they flutter in a wind made of moving gradients.

CSSTYPOGRAPHYINTERACTIVE
19Under Construction

Heartwood

A story you scroll into, told by the cross-section of a ponderosa pine. The cut face starts whole, bark and all, and every flick of the thumb carries you one ring deeper and one year further back, from the tree’s felling in 2025 to the pith it grew from in 1702. The disc you see lit is always the tree as it stood in that year; everything it hadn’t grown yet hangs around it as an oxblood ghost. On the way in, the rings themselves tell the story: the hairline of the 2002 drought, seven lean midcentury years, the fat rings of the wet 1910s that the Colorado River was divided by, strings of charcoal beads for the low fires it lived through until grazing ended them in 1879. Every word rides a circle around the ring you are standing on, and nothing on screen is a rectangle.

CANVASTYPOGRAPHYDATAINTERACTIVE
54Live

Typography Experiments

Epic CSS typography playground + classic effects

CSSTYPOGRAPHY
55Live

The Music Corner

Lightweight Fun Digital Piano

AUDIOINTERACTIVE
56Live

Binaural Beats

Neural frequency generator with session modes

AUDIO
57Live

Paella Treatise

A mini treatise on Spain's iconic rice dish

TYPOGRAPHY
59Live

Weather Concierge

One witty, useful weather message from your IP location

DATA
62Live

Color Concierge

Drop an image, get a named palette + one note on why the colours work

CANVAS
63Live

Spectrogram

Live mic input painted as a scrolling frequency waterfall

AUDIOCANVAS
64Live

Poster Maker

Seeded Swiss-grid posters you can shuffle and export as PNG

GENERATIVECANVAS
65Under Construction

Drone Garden

Touch-first generative drone synth — plant evolving tones with your fingers

AUDIOGENERATIVECANVAS
66Under Construction

Drone Bloom

The Drone Garden synth as a botanical garden — every held tone grows a flowering plant

AUDIOGENERATIVECANVAS
68Under Construction

Membrane

Generative aura bubbles — warped, grainy gradient membranes you can shuffle and export

GENERATIVECANVAS
69Under Construction

Wine Chooser

Snap a restaurant wine list; OCR + a built-in sommelier pick your ideal dry, crisp, mineral white

INTERACTIVEAI
70Under Construction

ALOFT

Keep the orb aloft — tap below it to bump it up before it hits the spikes

GAMESINTERACTIVE
71Live

Daily Game Dashboard

A start-page for your daily puzzles — click to play, tracks what's done, resets each day

GAMES
94Live

Brain Dump

An ADHD-friendly brain-dump task sheet you fill in and tick off — preview it here, then download the HTML for a private, self-saving copy.

DESIGN-SYSTEMINTERACTIVECSS
95Under Construction

Vivarium

A design direction for this home page, reviewable beside the current one: every card is a live miniature of its prototype, one light drives every shadow (tilt your phone), filtering is physical, the UI is synthesised sound, and the newest build tells the truth about when the next one is due.

CSSDESIGN-SYSTEMINTERACTIVE
You are visitor
001337