Tidewater

Screenshots

Signature effect

WebGL caustics and god-rays at the surface, a pinned depth gauge that takes you 1,000 metres down as you scroll, and a calculator that prices every tonne

Changelog

1. v1.0.02026-10-01
   • HTML edition: a dependency-free ocean carbon-removal site that opens straight from disk, with a WebGL caustics hero (and a CSS fallback), a scroll-driven descent to 1,000 m that darkens the water and thickens the marine snow, a depth gauge, a growing kelp forest beside three steps, a public registry with counters, status filters and a CSV export, a drawn sites map, a proof chart you can read with the arrow keys, a method accordion, buyer wordmarks, a tiered price calculator with offtake contracts and a quote form, a seamount portrait with a quote, a newsletter form and a seafloor footer. Every effect has a CONFIG block at the top of its file.
   • Pages: home, 404, privacy.
   • One codebase, not one file. The concept was a single HTML file. The page is now index.html plus tokens.css, main.css, fonts.css, kit.css, kit.js, util.js, main.js and one file per effect in assets/js/effects/ (descent, caustics, snow, kelp, steps, registry, map, chart, calculator, floor).
   • Self-hosted fonts. Fraunces (variable weight, optical size, softness and wonk) and Albert Sans ship in assets/fonts/ under the SIL Open Font License, with licences. The concept loaded them from Google Fonts; no request now goes there.
   • Brand tints follow the tokens. Translucent colours (hairlines, glass, panels, glows) are color-mix() of --foam, --abyss and the other tokens instead of raw rgba(). Only neutral black shadows and the SVG artwork and shader keep their own colours.
   • Contrast-safe twins. Small green and teal text uses --kelp-ink (#9DC27B) and --teal-ink (#7CC4BA), added in tokens.css; the nav pills, the mobile gauge pill, the hero eyebrow and the depth pills got darker glass, and quiet text over the shallows moved from 68% to 92% foam. Measured per text element against the real pixels, small text clears 4.5:1 (see DESIGN.md).
   Show all notes

   • A focus ring that works on every background. --sun between two --focus-halo (abyss) rings, so it reads on the bright shallows, glass, foam buttons and panels.
   • Complete without JavaScript, and a reduced-motion version. Hidden start states exist only under .js:not(.rm). Without script, or with reduced motion, there is no preloader, the hero shows its CSS water (or one still shader frame), every section is visible, and the map, chart and kelp forest are finished drawings. A 3-second failsafe in the <head> puts the page into that still state if the scripts never start.
   • A WebGL fallback. If WebGL is missing, fails or loses its context, <html> gets no-webgl and the hero shows a CSS gradient with swaying rays. The shader pauses while the hero is off screen or the tab is hidden.
   • Sites, chart and calculator are data. The seven sites (sites in map.js), the quarterly numbers (quarters, sunk and issued in chart.js) and the prices (tiers and offtake in calculator.js) are CONFIG. The map, the chart and the kelp forest are drawn from the numbers at the size of their box and redrawn on resize; index.html carries finished copies for visitors without JavaScript (the README says how to regenerate them).
   • Sub-pages and delivery details. Added 404.html and privacy.html (the same nav and footer), a full SEO head (Open Graph, Twitter card, a canonical placeholder, JSON-LD Organization), a favicon, a touch icon, a web manifest and robots.txt.
   • The page is tall by design. The descent is the whole page (about 14,000px on a laptop), not a pinned section, and the gauge needs data-depth on every section: keep one on any section you add.
   • Some figures are typed in more than one place. The price per tonne and the 9% offtake discount are CONFIG in calculator.js, but the starting total and rate in the markup, the "−9%" on the switch, the "Where each dollar goes" bar, the stats (184,262 t, 3,140 ha, 7 sites), the map side panel and the registry rows are text in index.html. The README lists every place.
   • The demo is a demo. The quote form and the newsletter form post nothing; the registry rows, the buyers, the batch numbers and the figures are made up. Connect your own form handler and replace the data before launch (see the README).
   • The demo brand (Tidewater Removals Ltd., Shed 4, North Quay, Port Halloran, your-domain.com), its seven sites, batches, buyers, vessels, the auditor "Meridian Assurance", the science panel and its chair, and every figure are made up. Replace them before launch.
   • The registry data is described as CC BY 4.0 in the footer: change that line if your data is licensed differently.
   • The privacy page is a placeholder policy marked "replace before launch".

Questions

Related

• 

  Aurel

  Brand

  A quiet, clay-and-bronze skincare template for a Copenhagen barrier-repair brand: a raymarched WebGL serum drop that bulges toward the cursor in the hero, a three-step ritual with CSS-rendered bottles, an ingredient list with generated molecule diagrams, a draggable before/after hydration map, clinical-result stat cards and a working shop with size pickers and a bag.

  Bodoni Moda / JostFrom $29
• 

  Ferro Type

  Studio

  A loud, orange-and-black type foundry site built around one variable font: a hero word that bends its weight and width under your cursor, a live type tester that writes its own CSS, an axis-by-axis tour, a keyboard-driven glyph inspector and a licence configurator with a working cart.

  Roboto Flex / Roboto MonoFrom $29
• 

  Good Dirt

  Brand

  Good Dirt is a food-brand site with illustrated SVG packaging, a flavour showcase with colour-changing tabs, a pinned soil cross-section that grows roots, fungi and worms as you scroll, postcard farm cards, a crunch-o-meter with shattering-cracker physics, a review wall, a build-a-box configurator with a crate, subscription saving and a demo cart, and a postcode stockist finder.

  Bricolage Grotesque / Rethink SansFrom $29