§ Web component
<water-canvas> — Tidewater in one HTML tag
The <water-canvas> custom element wraps a complete Tidewater ocean in a self-contained embed. No JavaScript wiring on the host page — drop the tag, set the attributes you want, and you're done. Below are three embeds with different presets. Each runs independently; off-screen ones pause automatically.
Usage
<script type="importmap">{ "imports": { ... } }</script>
<script type="module" src="/src/WaterCanvas.js"></script>
<water-canvas mode="reef" time="14:00" controls="orbit"></water-canvas>