Tidewater is an impact-company site built as a dive: a WebGL caustics hero with a CSS fallback, a scroll-driven descent that darkens the water and fills it with marine snow, a depth gauge, a three-step kelp panel, a live registry ledger with filters and CSV export, an interactive sites map, a proof chart you can read with the arrow keys, a method accordion, buyer logos, a tiered price calculator with offtake contracts and a quote form, and a seafloor footer.

See the live demo →

Signature: 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.

This is the React edition: a Next.js 16 + React 19 + Tailwind 4 + Motion project. Every word of copy lives in one file (content/site.ts). Run npm install and npm run dev, the way you'd start any Next.js app.

What you get

• Pages: Home, 404, Privacy
• Self-hosted fonts (Fraunces and Albert Sans), and no third-party requests: no Google Fonts, analytics or embeds
• README, AGENTS.md and CLAUDE.md, so AI coding assistants know how the project fits together
• DESIGN.md with the design tokens, type scale and components
• CHANGELOG, credits and licence

Good for

• Carbon removal and climate-tech companies
• Ocean, nature and conservation organisations
• Registries, data and audit-led products
• Impact funds and sustainability reports
• Any story told as a journey from surface to depth

Licence

Use it for unlimited projects, your own and your clients'. You can't resell or redistribute the template itself.

Version 1.0.0.