How the stonelearned to speak

A field, not a vitrine

The Concept

The Runestone Field treats history as a weather system rather than a museum catalogue. Its dominant picture is granite caught in low winter sun: green-black distance, a fog-soft horizon, lichen gaining ground, and one hot cut of iron red. The story begins with an intimate action—writing a dedication—then widens through Rök, Jelling, Berezan, and Hilleshög before examining lost pigment and the sixteen-sign Younger Futhark.

Every visual decision supports a tension between endurance and erasure. Pale stone sections feel newly split; dark field sections feel damp, cold, and almost without edge. Off-center titles and monuments resist an orderly card grid. The red is deliberately scarce until paint becomes the subject.

The interface’s central object is not an illustration of a runestone. It is the visitor’s sentence becoming one.

Four seconds from sound to surface

Visual Techniques

• Adaptive serpent. In main.js, transliterate(value) normalizes input and checks letter pairs before single sounds. makePath(runeCount) then moves six Bézier regions: short texts form a tighter animal, while long texts claim more of the stone. setBand(result) also reduces rune size and tracking so the inscription remains inside the body.
• A chisel with a real route. animateSequence(now) asks the SVG path for getPointAtLength(). That point moves the chisel marker and feeds emitDustAt(point), so debris comes from the cut instead of a generic particle cloud. A capped canvas pool in drawDust() updates pixels without touching layout.
• Material stages. Three copies of one SVG path become the dark groove, pale fresh cut, and red fill. Using pathLength="1" makes dash animation independent of whatever geometry the visitor generates. The sequence pauses when document.hidden and resolves immediately under reduced motion.
• Raking winter light. The field’s “Sweep” control adds .is-raking, while setRakingPosition() maps pointer or touch coordinates to typed CSS light-position properties. A user-started sweep crosses all four records; afterward the highlight follows the visitor and intensifies the nearest stone’s mineral relief and ochre. Reduced motion keeps a still pool of light.
• Mineral atmosphere. Inline SVG turbulence, clipped lichen, hard granite edges, embedded grain, and broad CSS light fields create texture without images or network requests. Shadows stay cool; only ochre carries heat.

Stone, growth, blood, fog

Palette & Type

Cinzel is reserved for lapidary capitals, record labels, and controls. Its wedge-like serifs suggest pressure at the end of a cut. EB Garamond carries stories and interpretation at generous line height. The display scale jumps from 8-pixel tracked field notation to 124-pixel monuments; body copy remains between 17 and 23 pixels. Fog white softens long reading, while the brighter white is reserved for active controls.

A prompt for another field

Reproduce This

Ask an AI coding agent for a no-build historical experience with one interaction that embodies the subject rather than decorating it. Name the material, climate, self-hosted typefaces, and one symbolic accent. Require generated SVG geometry from user input, distinct making stages, a reduced-motion path, semantic controls, responsive compositions, and local-only assets. Then ask the agent to test the actual interaction—not merely the landing view—at phone, tablet, and desktop widths.