Directional WebGL water for logos, marks, and brand surfaces.
TidalMark is a focused visual study of a simple idea: give a flat wordmark physical presence without turning the page into a game-engine ocean.
Live demo · Color showcase · Sea simulator
The reference scene combines a perspective-compressed sea, calm ambient motion, directional ripples, illuminated crests, and a projected mark shadow. The effect is designed to stay atmospheric while the wordmark remains readable.
The showcase contains ten live treatments built from the same calm-water system. These selected captures were taken after five staggered shader ripples had expanded beneath the mark. They are screenshots of the WebGL scene, not pre-rendered artwork.
| Tidal Blue | Prism Triad |
|---|---|
|
 |
| Aurora Field | Full Spectrum |
|---|---|
 |
 |
Open the live showcase to switch between all ten treatments, pause the calm motion, or move over the sea to emit new ripples. A palette can be opened directly with the ?palette= query parameter.
The sea simulator is a visual tuning instrument for the coded water. It exposes the ocean background, ambient waves, fragment field, lighting, color mixing, ripple response, and wordmark scale. It autosaves locally and can copy or import a complete JSON settings snapshot.
The dashboard is there to make adjustment by human sense easy, but it is not required. You can ask an AI agent to tailor the ocean palette and ripple behavior to a brand, then apply the resulting tidalmark-sea-v1 settings snapshot in the simulator. This makes it practical to explore a specific visual direction without manually touching every control.
No install step is required. Start the zero-dependency development server:
npm run devOpen http://127.0.0.1:4173. The root page embeds the reference demo, while the showcase and simulator are available from the links above.
Run the repository integrity check before sharing changes:
npm run checkThis is a browser-tested reference prototype, not a packaged library yet. The renderer and interaction controller currently live in one HTML file so the visual baseline stays easy to inspect. Architecture notes document the coordinate spaces, ripple source model, and DOM mark layers.
The prototype requires WebGL and loads Three.js as a pinned ES module from jsDelivr. The repository itself has no npm dependencies. A future package can extract the renderer into an ESM module with a stable configuration API.
GitHub Pages serves the root index.html from main. The deployed surfaces are:
MIT. See LICENSE.