Engineering & design / 4 min read
Structures in motion
How the website’s drawings share a structure, change shape, and leave room for reading. An interactive field note.
01 / THE IDEA
Let the structure become the drawing
The drawings behind these pages bring together two things I enjoy: understanding how something is put together and making it feel alive on a screen. A hand, a telescope, a shell, and a staircase have different subjects, but each can be described through points and the lines that connect them.
That shared structure suggested an interaction. If the drawings use the same pool of points, moving between pages can rearrange what is already there. A portrait can become a hand; a mechanism can become a living form. You can follow the change instead of watching one picture disappear and another arrive.
It is a small expression of the idea behind this website: show enough of the construction to invite curiosity, while leaving room for the work you came to read.
02 / TRY IT
Take the structure apart
The study below uses the same geometry and point assignments as the live background, without its drifting particles. Choose a drawing, then move Construction from zero to 100% to see how its lines build up. Move Morph to next subject to follow those points into another shape. Show shared points makes the underlying pool visible.
For a useful comparison, try Listening to the sky, the radio telescope, and Chambered nautilus. One is assembled around mechanical supports; the other follows a spiral. Both pass through the same point system. Play idle motion lets you watch a finished drawing move; using either slider pauses the preview so you can inspect a moment.
Choose a subject, then use the sliders to build it or move its points into the next one. Play idle motion to watch the completed drawing; moving either slider pauses it.Gaze-led head movement, varied blinks, a coupled smile, a short silent phrase, and an occasional wink.
03 / THE MECHANISM
The same points, new connections
Each subject starts with vertices and connecting beams. Most are spatial drawings projected onto a flat canvas; the portrait follows the paths and shaded planes of its source artwork. Those different sources become positions in one shared pool. Smaller subjects reuse positions so every point still has a destination.
During a transition, the points travel toward their new positions while the old and new connections blend. Assigning nearby destinations helps keep that movement coherent. The About portrait takes the idea further: its face and internal brain belong to the same structure, and the facial points keep their assignments when moving from the Home portrait.
Construction is a separate way to read the geometry. Some subjects grow outward, others rise in layers or follow their beam order. Try Career ascent to see the steps, landings, and supporting frame emerge. Its dated landings mark stages in my background, rather than a proportional timeline. The live site starts with a complete drawing; this study lets you inspect how it is assembled.
04 / THE RHYTHM
Give each movement a reason
Navigation gives the background a new subject when the kind of page changes. Scrolling gives it another chapter: Home moves from a portrait to a broadcast horn, Lab opens a hand into an exploded instrument, and detail pages settle into a chambered shell. Scrolling back reverses the transformation.
At rest, the selected drawing stays with the page. Its quieter gestures come from its subject: fingers bend at their joints, a telescope turns on its bearings, and the portrait’s eyes lead before the head follows. The architecture holds its shape as the viewpoint shifts. Pauses between gestures matter as much as the gestures themselves.
That relationship between form and movement keeps the drawings connected to what they depict. It also gives the rest of the site a vocabulary to borrow: a rule extending across a section, a study drawing itself, a browser assembling on the project page.
05 / THE CONSTRAINTS
Stillness is part of the design
The drawings sit behind reading, so they need a useful resting state. Turning motion off, or using the system’s reduced-motion preference, leaves complete static drawings. Animated page transitions, contour streaks, and idle gestures stop. A hidden tab pauses the background too.
The explorer keeps construction and morphing under your control. Its optional idle preview pauses when it leaves the viewport, when the tab is hidden, or when motion is reduced. You can still take a drawing apart without asking the whole page to keep moving.
This is one detail of a larger project. The website project page explains the surrounding design and build; the opening field note explains why I wanted a place for experiments like this.