069

STRATA — a core through the ground

A drill core you can walk down. Nine beds — topsoil, charcoal silt, aeolian sand, glacial varves, a flood sand, marine clay, sandstone, Jurassic limestone and basement basalt — are stacked with irregular bedding planes and speckled with grain, and the reading panel changes as you move through them. Scan core sends an ochre line down the column while the text follows it.

Open ↗

Original prompt

Create a self-contained HTML page (all CSS and JS inline, no external fonts, images, CDNs, libraries or external SVG files) called "STRATA — a core through the ground". Art direction: earthy, tactile, laboratory-notebook. Palette: ground #161311, ink #efe6d8, dim #8d8072, hairline rgba(239,230,216,.14), ochre #c98a3c, rust #a14a2c. Body type is Helvetica; the instrument parts are monospaced. Layout: a header with a logo mark built from a repeating linear-gradient of banded strata and a monospaced catalogue line; then a hero with an ochre kicker, a huge light-weight headline with one bold word, and a paragraph; then a three-column laboratory panel inside a single hairline border — a narrow depth ruler on the left whose tick labels are absolutely positioned by percentage, a 420×520 canvas in the middle drawing the core, and a reading panel on the right with a depth-and-age line, a large heading, a descriptive paragraph and a five-row key-value table; then a control row of three monospaced buttons (Deeper / Shallower / Scan core) and a depth slider pushed right; then a two-column section pairing an essay on what the order of the layers means with a method note and a specification table; and a footer. The core is drawn procedurally on the canvas: nine beds with their own colour, grain and age, stacked in proportion, each separated by an irregular bedding plane built from two summed sine waves so the boundary is never straight, each bed speckled with a hundred and sixty light and dark grains clipped to its own shape, and the whole column shaded by a subtle vignette. Interaction: the depth slider and the Deeper and Shallower buttons move the marker through the column and rewrite the reading panel; Scan core animates a bright ochre line down the column with the region above it filled, and the read panel follows the line down as it goes. Responsive: below 900px the ruler is hidden, the reading panel moves below the core, and the columns stack.

069-strata-core-sample.txt

070

ZOETROPE — the drum of pictures

A working zoetrope. The bird is drawn procedurally, frame by frame, with its wings beating through a sine of the frame index; the disc is masked with an even-odd fill so that only the brass-framed slit at the top stays open, and the drum is re-drawn clipped to that slit. Peek removes the slit and shows you all the pictures at once, which is the whole trick and the whole secret. Drag the drum to spin it by hand.

Open ↗

071

AUREA — gold leaf and rubrication

A gilded initial, painted live in the browser. The letter is a CSS background-clip gradient whose stops are recomputed from the sliders: a thin leaf gives a narrow bright band and a wide specular bloom, a thick leaf gives a broad band and a tight one, and burnishing tightens the highlight and deepens the shadow where the letter presses into the gesso. The page around it is a rubricated manuscript leaf with a marginal ornament drawn in SVG.

Open ↗

072

ENIGMA — a rotor machine

A working Enigma, not a picture of one. The rotors carry their historical wirings and notch letters, the reflector is UKW-B, and the stepping follows the real double-step rule, so the windows genuinely turn and the machine's state is genuinely different for every message. Click the keys or type on the keyboard and the lampboard lights with the letter the signal produced.

Open ↗

Original prompt

Create a self-contained HTML page (all CSS and JS inline, no external fonts, images, CDNs, libraries or external SVG files) called "ENIGMA — a rotor machine". Art direction: 1940s cipher machine, black bakelite and brass. Palette: ground #11100e, case #2a2724, panel #211f1c, ink #efe9dd, dim #8e8578, hairline rgba(239,233,221,.14), lamp amber #ffb64a, brass #c9a227. Layout: a header with a ring logo and a monospaced specification line; then a hero with a brass kicker, a huge light-weight headline with one bold word, and a paragraph; then a machine panel — a rounded case with a vertical gradient, split into two decks: on the left a lampboard (a six-column grid of twenty-six round lamps, unlit ones in a dark radial gradient, lit ones glowing amber with a coloured halo and a short transition) and a readout panel below it; on the right a keyboard of twenty-six round keys and a settings panel listing the three rotor types, the ring setting, the reflector, and three rotor windows in large serif numerals with each rotor's notch letter beside it; then a two-box section with a plaintext textarea, a ciphertext textarea and buttons; then a two-column section pairing an essay on why the rotors step with a note on the machine; and a footer. The cipher is a real implementation: rotors I through V with their historical wirings and notch letters, the UKW-B reflector, ring settings of AAA, and the standard double-stepping, so the right rotor advances on every keypress, drags the middle at its notch, and the middle drags the left. Interaction: clicking a key on the machine or typing a letter on the physical keyboard presses it, lights the resulting lamp and steps the rotors with the window letters updating; Encrypt and Decrypt run whole strings (the machine is reciprocal, so the same routine does both); Reset rotors returns the wheels to A and clears the counters; Copy and Clear handle the text panels. Responsive: the deck and the two-column section stack under 860px, and the lamp and key grids drop to four and six columns under 460px.

072-enigma-rotor-machine.txt

073

SEISMOGRAPH — the record of a shaking

A seismogram you can make happen. The record is built sample by sample — background microseism, a fast small P wave, a bigger slower S wave, then long surface waves — with the distance slider genuinely moving the arrivals apart and the magnitude slider scaling the amplitude on a logarithmic curve. Drum view redraws the same data as a spiral on a turning drum, with a pen at the end of the trace.

Open ↗

074

CARILLON — a tower of bells

Six bells that actually sound. Each one is eight partials at the ratios a real bell has — hum, prime, tierce, quint, nominal and three above — each with its own gain and its own decay, detuned slightly so they are not perfectly harmonic. The bar display is driven by the same partial table that drives the audio, and the bells swing and send gold wavefronts across the tower when you strike them.

Open ↗

075

MYCELIUM — the network under the wood

A fungal network grown from local rules. There is no brain and no plan — each tip simply samples its eight neighbours, moves towards whichever holds the most nutrient, and occasionally splits — and the branching fans that emerge are the sum of those thousands of tiny decisions. Click anywhere to drop a blob of food and watch the threads find it.

Open ↗

076

KILN — a firing schedule

A firing schedule you can run. The curve is built from real segments — water smoking to 200 with a hold, a ramp through quartz inversion to 600, a controlled climb to the target with a soak, and a controlled cool — and the marker climbing it updates the elapsed time, the temperature, the ramp rate and the name of the stage the kiln is in. Move the target temperature and the whole curve changes shape underneath the cone lines.

Open ↗

Original prompt

Create a self-contained HTML page (all CSS and JS inline, no external fonts, images, CDNs, libraries or external SVG files) called "KILN — a firing schedule". Art direction: workshop at night, ember glow, kiln brick. Palette: ground #140f0c, ink #f2e8dc, dim #96897a, hairline rgba(242,232,220,.14), ember #ff7a3c, clay #c47a52. Layout: a header with a kiln-shaped logo mark clipped from a polygon and a monospaced kiln specification line; then a hero with an ember kicker, a huge light-weight headline with one bold word, and a paragraph; then a bordered kiln panel with a gradient face, a header row naming the chart and a live status line, a 1200×520 canvas, and a six-item readout strip giving elapsed time, temperature, ramp rate, the current stage of the firing, the atmosphere and the percentage of the schedule completed; then a control band of two sliders (Target temperature, Ramp rate) and four buttons (Fire / Hold / Reset / Atmosphere); then a two-column section pairing an essay on the stages a pot goes through with a table of Orton cone bend temperatures; and a footer. The chart is drawn live: an hours-versus-degrees grid, dashed horizontal rules at every cone bend temperature with the cone numbers labelled, the schedule curve traced from the segment list with a translucent gradient fill beneath it, and a marker with a halo and a dashed guide line running to the temperature axis. The schedule itself is a segment list — a slow water-smoking ramp to 200 with a hold, a faster ramp to 600, a controlled climb to the target with a soak, and a controlled cool to 760 — and the temperature at any moment is interpolated from it. Interaction: Fire starts the firing and the marker climbs the curve while the readouts and the stage name update; Hold freezes the climb; Reset returns to 20 degrees; Atmosphere switches between oxidation and reduction; the two sliders rebuild the curve. Responsive: the two-column section stacks under 860px.

076-kiln-firing-schedule.txt

077

PENDULUM — the double fall

A double pendulum that is really simulated. The coupled equations are integrated with fourth-order Runge-Kutta six times a frame, and the energy readout is the honest expression including the cross term, so the drift figure tells you how well the integrator is doing. Drag a bob and let go; the teal trail of the lower bob is the only honest way to see what chaos looks like.

Open ↗

078

PRISM — the colour inside white

A prism that is actually traced. For each of eighty-one wavelengths the ray is intersected with the prism's first face, refracted through it with the vector form of Snell's law, refracted out of the second face and run to a screen — and because the index comes from Cauchy's formula, the spread of the band on the screen changes with the medium in the way it should. Switch from crown glass to flint and the fan opens; switch to diamond and it almost closes again.

Open ↗

079

TETROMINO — the falling block

A complete, fair falling-block game. The seven-bag randomiser means the longest drought is thirteen pieces, wall kicks at nine offsets mean a rotation in a tight space works, and the ghost piece shows exactly where the piece will land. Clearing four lines is worth 800 and is the only moment in the game that feels like winning rather than tidying.

Open ↗

080

RAIN — the window at dusk

Rain on a window, with the optics done properly. Every bead is a real lens: the street behind the glass is clipped to a circle around the drop and drawn flipped in both axes, so the building appears inside the bead upside down and compressed. The drops behave too — they grow, break loose when they are heavy enough, run, accelerate, shed residue behind them and swallow the small drops they meet.

Open ↗

Original prompt

Create a self-contained HTML page (all CSS and JS inline, no external fonts, images, CDNs, libraries or external SVG files) called "RAIN — the window at dusk". Art direction: rainy evening, warm street light behind cold glass. Palette: ground #0b1018, ink #e9edf3, dim #7c8797, hairline rgba(233,237,243,.14), amber #ffb86b, sky blue #3b5a7d. Layout: a header with a two-stroke rain logo mark and a monospaced coordinate line; then a hero with an amber kicker, a huge light-weight headline with one bold word, and a paragraph; then a bordered window panel holding a 1200×620 canvas and an absolutely positioned monospace HUD reporting the number of drops, the number running and the rainfall; then a control band of two sliders (Rainfall, Wind) and three buttons (Wipe the glass / Storm / Clear); then a two-column section pairing an essay on why the big drops move with a conditions table giving the temperature, humidity, wind, the number of drops on the glass, the number running and the runners per second; and a footer. Behind the glass is a procedurally drawn street at dusk — a gradient sky, soft cloud bloom, two layers of buildings with lit windows, a street glow and bokeh lights — rendered once into an offscreen canvas. Each droplet is then drawn as a real lens: the offscreen scene is clipped to a circle around the drop and drawn flipped in both axes, so the street appears inside the bead upside down and compressed, with a rim highlight and a specular bloom on top. The drops themselves are simulated: a static drop grows until it is heavy enough to break adhesion, then runs, accelerating under gravity, shedding small static residue behind it and absorbing smaller drops it passes, which is why runners speed up as they descend. Interaction: drag across the glass to wipe it; Storm raises the rainfall; Clear empties the glass; the two sliders change the rate of new drops and the sideways drift. Responsive: the two-column section stacks under 860px.

080-rain-on-glass.txt

081

DIAL — the sundial that knows

A sundial that actually works, computed from spherical astronomy rather than drawn. The declination comes from the Sun's ecliptic longitude, the shadow is laid along the anti-solar azimuth with its length set by the tangent of the altitude, and the hour lines are each solved individually — which is why they bunch towards noon and spread towards the horizon instead of sitting in tidy thirty-degree sectors. The analemma is traced from the same equations at a fixed nine o'clock.

Open ↗

Iron filings, computed rather than photographed. Every filing on the page is a short line drawn in the local direction of the magnetic field, with its opacity set by the strength of the field — which is exactly what a real filing is, since each one is a tiny compass needle that swivels to align. The field itself is the sum of inverse-square contributions from point poles at the ends of each bar magnet, so the shape of the pattern is the shape of the real field, and the bare wedge between two like poles is genuine.

Open ↗

The packing of atoms, drawn as real unit cells and rotated under the pointer. Switch between simple cubic, body centred, face centred, hexagonal close packed and diamond, and watch the coordination number and the packing fraction change with the geometry — because they are not decoration on the picture, they are consequences of where the spheres sit.

Open ↗

095

AUTOMATA — one hundred cells and a rule

A one-dimensional cellular automaton, running for real: the rule's eight binary digits are looked up by neighbourhood index, so rule 30 gives the chaotic triangle and rule 90 gives the Sierpinski gasket, drawn as a space-time diagram with each generation a new row. Sweep the rule slider through all two hundred and fifty-six and watch the whole taxonomy of behaviour go past.

Open ↗

A dry garden you can actually rake. The sand is a height field with an angle of repose, so a steep cut avalanches and fills itself in while a shallow one keeps its edge — and dragging the rake lowers a line and pushes the displaced sand out to either side, which is what the teeth of a real rake do. Sweep the garden and the pattern comes out around every stone.

Open ↗

100

BEACON — the light that keeps a coast honest

A lighthouse doing the only thing a lighthouse does: turning, and being read. The beam sweeps the horizon, and a ship is lit when the bearing to the ship falls inside the wedge — which is the whole mechanism by which a mariner identifies a light in the dark. Turn the fog up and the cone thickens and shortens at once, and the character of the light changes with the rotation rate, because a light's signature is its rhythm.

Open ↗

Original prompt

Create a self-contained HTML page (all CSS and JS inline, no external fonts, images, CDNs, libraries or external SVG files) called "BEACON — the light that keeps a coast honest". Art direction: night coast, deep blue-black sea, one warm beam. Palette: ground #05080f, ink #e8ecf4, dim #77839a, hairline rgba(232,236,244,.13), beam #ffe3a8, sea #0d1b2c. Layout: a header with a tower logo mark carrying a lit lantern band and a monospaced specification line; then a hero with a warm kicker, a huge light-weight headline with one bold word, and a paragraph; then a bordered stage holding a 1200×600 canvas that draws a starry sky, a moon, the sea with moving wave lines, a headland silhouette, a striped lighthouse tower with a gallery and lantern room, and a beam that sweeps around the horizon and brightens as it passes a ship, plus an absolutely positioned monospace HUD; then a control band of three sliders (Rotation, Fog, Range) and two buttons (Send a ship, Sound the fog signal); then a six-item readout strip giving the light's character, the number of times the ship has been lit, the time to the next sweep, the height of the focal plane, the visibility in the present weather and the nominal range; then a two-column section pairing an essay on a light being a sentence with a note on what the beam does; and a footer. The geometry is real: the beam is a rotating wedge centred on the lamp, its reach and its spread both grow with the fog setting, and a ship is lit when the angular difference between the bearing to the ship and the current bearing of the beam falls inside the wedge — which is exactly how a mariner knows a light is for them. Interaction: the Rotation slider sets the sweep rate and therefore the character of the light, the Fog slider shortens the visible reach and thickens the cone, the Range slider sets the nominal distance, Send a ship puts a vessel on the water and resets the count, and the fog signal button toggles the sound signal that carries where the light does not. Responsive: the two-column section stacks under 860px.

100-beacon-lighthouse.txt