Field notes · reproducible method
How the water remembers.
PELAGIC is built from a strict sequence: metaphor, semantic structure, one atmospheric layer, fallbacks, then critique. No stock media or heavy 3D runtime is required.
Lock a physical metaphor
Choose a subject behaviour before choosing effects. Here, scroll is depth and the canvas cells are remembered light. That single metaphor decides colour, pacing, type and interaction.
Write three unlike concepts in DESIGN.md. Lock one signature moment, fallback routes, performance limits and banned patterns before implementation.
Build the semantic descent first
Each depth remains an ordinary section with headings, paragraphs and links. The story works in reading order before a single animated layer is added.
Astro renders static HTML. Sticky shelves are progressive CSS. At mobile and reduced motion they return to normal document flow.
Add one code-native atmosphere
A small Canvas 2D field sits between solid stratum colours and the copy. It draws abstract cells, never literal ocean imagery, and interpolates its behaviour from scroll depth.
Cap devicePixelRatio at 1.5 and particles at 52. Pause on hidden tabs. Keep pointer response decorative and let the canvas ignore all input.
Make the instrument tell the truth
The bathymeter is orientation, not decoration. IntersectionObserver updates its active location while a CSS scroll timeline fills the pressure rail.
Use native anchors and aria-current="location". Class toggles are CSP-safe. Never mutate runtime style attributes.
Design every fallback deliberately
Without JavaScript, the sections retain their colours and the canvas reveals a static caustic field beneath it. Reduced motion removes sticky pacing and renders every masked line in its final state.
Test no JavaScript, no media, no canvas and prefers-reduced-motion. A fallback is a designed state, not an apology.
Critique exactly three times
The first pass removes defects. The second adds one depth hypothesis. The third restores cohesion by cutting anything that competes with the main signature.
Capture 320, 390, 768 and 1440 pixel views. Run lint, type checks, build, axe and Lighthouse. Record findings and fixes in ITERATIONS.md.