A deep ocean research institute, as a concept site. Three dives, their sensor casts, and the vessel they were flown from.
Live: fathom.signalizeai.org
The subject is depth, so the page is built as a water column: dark, cold, and getting colder as it goes down. Numbers are the content, so the monospace does real work rather than decoration, and the one bioluminescent accent is reserved for measurements.
Two things are drawn from the data rather than shipped as images:
- The depth scale is CSS, laid out from the real zone boundaries. It stays linear on purpose, because the sunlight zone really is 200 metres of 11,000, and squashing the axis to make it legible would erase the fact the diagram exists to show. Bands too thin to hold a label do not get one; the caption names them instead.
- The temperature-against-depth chart is an SVG polyline computed at build time from the same cast the table prints, so the two cannot drift apart.
| Route | What it is |
|---|---|
/ |
The column, the zones, and the dive log |
/dives |
Every dive by depth, against the scale |
/dives/[slug] |
One dive: notes, what was logged, and the descent cast |
/research |
Published work, and the position on raw data |
/vessel |
The ship, what is bolted to it, and what it can reach |
Astro, static output, Tailwind v4, one React island for the nav. Source Serif 4, Space Grotesk and JetBrains Mono from Fontsource.
The whole site reads with JavaScript disabled, including both diagrams, which is checked rather than assumed.
npm ci
npm run dev
npm test # dive log invariants and nav
npm run buildThe dive tests check things a diagram would otherwise hide: that every cast starts at the surface and ends at the stated depth, that it descends monotonically, that it gets colder, and that no dive is deeper than the vehicle is rated for.
MIT. A fictional institute, built as a design exercise.