How we grew
the digital hedge.

The estate plan-room

The site treats a prestigious landscape practice as if its drawing room had been left open after hours. The tone is learned but not grandiose: drafting grids, survey coordinates, botanical schedules, clipped plans and pencilled marginalia make the screen feel handled. That atmosphere supports the central idea that a maze is not an ornament but an instrument for composing uncertainty.

The page moves between two scales. Broad editorial sections describe estates, philosophy and hedge species; the interactive plan board makes the visitor the commissioner. The single red line is Ariadne’s thread. It is deliberately scarce, so whenever it appears it reads as decision, route or human presence against the green architecture.

Drawing the living puzzle

In main.js, generate() builds a square cell field and uses a seeded recursive-backtracker. Every visited cell removes one shared wall before the search continues, producing a “perfect” maze with exactly one route between points. hashSeed() and rngFrom() make the same estate name reproduce the same plan.

drawAerial() renders every wall twice: a deep structural stroke and a finer living-green crown. Tiny deterministic ellipses become leaves without a particle system. Each cell stores growRank from the search, so the growth value establishes hedges in true traversal order. pointFor() projects circular plans into polar coordinates; Hampton plans use a clipped, chamfered ground.

The experience has four genuine views. Plan preserves the grown aerial drawing. drawWalk() turns the current cell into a first-person corridor aligned to the visitor’s latest bearing; compass buttons check real wall data before moving. Breadcrumbs accumulate in walked. Ariadne advances threadProgress along the route from solveMaze(), while Reveal calls drawPath() twice to compare the green wandering with the dashed red answer.

Pass three adds a fifth, more secret instrument. drawTruthGlass() clips the solved route inside a movable circular survey lens, so a visitor can inspect one patch of truth without revealing the complete plan. Pointer events position it on desktop and touch screens; the pressed button state and focus treatment make the same action clear from a keyboard. The animation loop halts when the document is hidden and becomes static under reduced-motion preferences.

Elsewhere, CSS creates the drafting grid with repeating linear gradients, paper grain with inline SVG turbulence, and estate plans as vector linework. An IntersectionObserver orchestrates section arrivals, while updatePageThread() turns scroll depth into a persistent red survey line. Both simplify or stop when motion is reduced or the page is hidden.

Palette & type tokens

Forum supplies the plan-room’s high-contrast display voice; Jost carries controls, measurements and reading copy. Both are self-hosted from /assets/fonts/. Oversized Forum headings use tight line-height and tracking, while Jost labels are small, uppercase and widely spaced like survey notation.

Reproduce this

Prompt an AI agent to design a complete editorial site around one professional world and one working simulation. Specify a strict four-colour palette, local fonts, a seeded recursive-backtracker on canvas, wall-aware walking, slow solution playback, and an aerial comparison of attempted versus true paths. Ask for every decorative plan to be CSS or inline SVG, for rich fictional case studies and technical botany, and for responsive screenshots at phone, tablet and desktop widths. Finally, require a written self-critique based on those rendered images rather than code alone.