Landfall: draw a line on the sea and an island erupts
The story behind Landfall
Premise An island being born, at hand scale: lava, sea, rock and life coupled into one small world. Audience: web-literate visitors arriving from X or the archive. Perf target: the machine stays quiet, at under 7 ms a frame on an M4
Reference Weatherglass, a coupled miniature world, set the bar for density and coupling; the three.js ocean example for low-sun light on water
Inspired by Surtsey (Wikipedia)
Built with Three.js 0.186 (WebGPU, TSL), Poly Haven textures and sky, a Quaternius birch
Techniques GPU compute fields for heat, rock age, wetness, sand and life; a terrain displaced from those fields; Gerstner swells with shore-aligned foam; vertex-animated plumes; instanced birch and gulls; a pixel budget with dynamic resolution, a 30 fps idle and a quiet simulation
Direction Surtsey survey photography from 1963 to 1967: slate sea, black basalt, lava as the only hot colour, moss and birch on the old ground, a pale hazy sky and a muted film grade. Newsreader and Geist, no sound
The Story
In November 1963 the crew of a fishing boat off the south coast of Iceland saw smoke rising from the sea. A day later there was land. The eruption ran for three and a half years and left Surtsey, an island of about a square mile and a half that has been closed to visitors ever since, so that scientists can watch life find it. Moss arrived within a few years. Seabirds came and started nesting, and their droppings made soil. The first bush took root in 1998.
Landfall puts that sequence under your hand. You don’t get a finished island to look at. You get an empty sea and a faint orange glow pulsing under the water, and the island is whatever you draw.
The Take
The page opens on a horizon line in pale haze. The sea fades up, the camera floats just above the swell, and a few seconds later the hint “Draw on the sea” appears. Draw a line and the sea floor splits along it. The water domes, boils white and breaks, and black rock shoulders up through the foam, exactly where your finger went. A column of ash and steam climbs out of it. As the land grows, the camera lifts by itself from swell height to a three-quarter view, without a cut.
From there, everything you do happens in the world:
- Draw on the sea or the land and lava builds ground along the stroke. Where it meets the sea it steams, cools to pillow rock and breaks down into black sand.
- Hold still and the vent grows into a cone with a crater.
- Scroll the wheel, or drag two fingers on a phone, to let the years pass. A Year mark counts them. The rock cools from red to black to grey, then lichen, moss and grass spread, birch woods come up on the oldest ground and gulls circle over it. Leave it alone and the years pass slowly anyway.
- Erupt again on old ground and the lava burns the green back around it, while the other end of the island keeps growing.
- Swipe the sea to send a swell. The waves cut the new coast into cliffs.
- Flick across the sky to set the wind, which bends the plume and carries life downwind first.
The moment that makes it is the second eruption: a green island with birches and gulls on one end, and a new vent tearing it open at the other.
The Tech
Everything reads the same fields. The world is a 1.2 km patch of sea, described by two 512² float atlases on the GPU: height, heat, rock age and life in one, wetness, distance to the shore, sand and forest in the other. A compute pass updates them every frame while something is happening. A stroke lays vents every 13 metres. Each vent opens a seam, then deposits rock that settles with an exponential ease and slumps toward a talus angle. Heat diffuses and cools. Age only advances on cold rock, and life only grows on old, wet, sheltered ground, spread downwind. Every surface reads nothing but these fields: the terrain, the sea’s shallows and foam, the plume emitters, the birch placement and the gulls.
The terrain is a displaced grid with real textures. A 256² grid is displaced in the vertex stage, with normals taken from the height field per pixel. The material blends Poly Haven basalt, black sand, moss and grass by age, wetness and life, projected from two axes so steep faces don’t stretch. Fresh rock is black and glassy, old rock grey and matte, and wet rock darker. Lava is drawn as cracked plates whose seams glow by temperature, with ropy pāhoehoe folds on gentle slopes and broken ʻaʻā on steep ones. The sea cliffs that the swells cut are a separate mesh with columnar grooves, rebuilt each time the land settles.
The sea is cheap and art-directed. Four Gerstner swells move the vertices and shoal over shallow ground, and ten short noise-phased waves add detail in the fragment shader. On top of that sit a Schlick Fresnel, the sky reflection, a sun glitter path and lava glowing up through the water. Foam is drawn in a frame aligned to the shore: one coordinate is the distance to the shore, the other is arc length around it. Breaking bands roll in along the first, lace is stretched along the second, and the surf is heavier on the side the swell comes from.
No simulation where a fake will do. The ash and steam plumes are a few hundred camera-facing quads animated entirely in the vertex shader, with a baked billow texture, self-shadowing along the plume’s axis and an orange underlight from the vent. Gulls are six triangles each, flapping and gliding in the vertex shader. The birch is one CC0 model, instanced and re-tinted from autumn gold to green, swaying by height.
The machine has to stay quiet. During the build, the Mac mini’s fan spun up on a 4K screen, so the piece now caps the canvas at 2.6 megapixels on desktop and 1.6 on phones, whatever the screen, and adjusts its render scale against a measured frame time. When nothing is erupting and the land has settled, the simulation steps once a second instead of every frame, and the render drops to 30 frames a second. When the tab is hidden, everything stops.
Credits
Textures and sky from Poly Haven, birch by Quaternius. Both CC0.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.