The concept
Not an aquarium. A working field station.
The page treats coastal science as something tactile, sunlit, and a little salt-stained. Its core contrast is between institutional observation and untidy life.
The bright bone ground, numbered records, coordinates, ledger rows, and specimen labels establish a credible organisation with an eighty-nine-year history. Against that order, the composition keeps slipping: a note is taped at an angle, the pool slab rotates off-axis, cards run beyond the viewport, and organisms refuse to sit still. The result is a field guide that behaves like its subject rather than a museum label about it.
The living techniques
One clock, two habitats, seventeen shy animals.
Canvas ecology
In main.js, drawRockbed() layers radial gradients, irregular basalt discs, and moving caustic lines without image assets. Seventeen normalized anemone records feed drawAnemone(). Every tentacle is a quadratic curve whose reach and sway depend on an openness value. reactToPointer() detects proximity in canvas coordinates, closes the nearest animal in 55 milliseconds, and lets it reopen over 1.8 seconds. drawContactRipples() makes the touch legible without hiding the biology. Keyboard visitors trigger the same response with Enter or Space. drawLimpet() compresses approached shells, while drawCrab() eases two hermits between vacant homes.
Tide synchronization
updateTide() maps the range input onto a cosine curve: low water at either end, high water halfway through. The cycle now advances at true time—one six-hour passage—unless the visitor scrubs it. That single value controls the metre readout, flood/ebb wording, SVG waterline, canvas visibility, highlighted shore band, species-tray status, and ledge-access note. Manual input pauses the clock briefly; the loop then resumes from the chosen position.
The field loupe
The shore cross-section is also an instrument. placeLoupe() maps pointer coordinates onto four biological bands while setLoupeZone() swaps the coded micro-specimen and observation text inside the circular lens. Click pins an inspection; arrow keys travel between bands and Enter pins from the keyboard. Movement is batched to one animation frame, and any pending frame is cancelled when the document is hidden.
Atmosphere and motion
styles.css provides the wetness: a fixed fractal-noise SVG overlay, layered teal fields, basalt highlights, translucent water, paper shadows, and hand-taped rotations. observeDetails() stages later evidence as it enters the viewport. Animation stops when the page is hidden; reduced-motion mode renders one still ecological frame and exposes every section immediately.
Palette + type tokens
Basalt, bone, water, warning.
Bricolage Grotesque carries large, tightly tracked headings because its irregular construction feels both technical and alive. Epilogue handles field text, labels, and controls. Tiny uppercase labels use generous tracking; display headlines counter them with negative tracking and compressed line-height. Both families are self-hosted from the shared font library.
Reproduce this
Prompt for behaviour before decoration.
Ask an AI agent to design a coastal research station as a bright editorial field guide. Specify a dominant teal habitat, basalt specimen surfaces, one urgent coral accent, bone paper, and exact scientific labels. Require a responsive canvas ecosystem built from primitives: anemones detect pointer proximity, retract abruptly, and reopen slowly; crabs relocate; limpets clamp. Define one shared, true-time six-hour tide value that drives the clock, SVG shore, organism visibility, species status, and visit access. Add an inspectable shore lens that exposes different communities instead of merely decorating the diagram. Request six content-rich sections with invented observations and a working stewardship ledger—not generic feature cards. Finally, require audits at 390, 834, and 1440 pixels, keyboard interaction, reduced motion, hidden-tab pausing, and zero external assets.