# TidalMark

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](https://zeta-loop.github.io/tidalMark/) · [Color showcase](https://zeta-loop.github.io/tidalMark/examples/color-showcase.html) · [Sea simulator](https://zeta-loop.github.io/tidalMark/examples/sea-simulator.html)

## See it first

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.

[![Tidal Blue reference treatment](docs/showcase/tidal-blue.png)](examples/interactive-water.html)

## Color showcase

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 |
| --- | --- |
| [![Tidal Blue](docs/showcase/tidal-blue.png)](examples/color-showcase.html?palette=tidal-blue) | [![Prism Triad](docs/showcase/prism-triad.png)](examples/color-showcase.html?palette=prism-triad) |

| Aurora Field | Full Spectrum |
| --- | --- |
| [![Aurora Field](docs/showcase/aurora-field.png)](examples/color-showcase.html?palette=aurora-field) | [![Full Spectrum](docs/showcase/full-spectrum.png)](examples/color-showcase.html?palette=full-spectrum) |

Open the [live showcase](examples/color-showcase.html) 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.

## Tune it to a brand

The [sea simulator](examples/sea-simulator.html) 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.

[![Sea simulator](docs/showcase/sea-simulator.png)](examples/sea-simulator.html)

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.

## Run locally

No install step is required. Start the zero-dependency development server:

```bash
npm run dev
```

Open `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:

```bash
npm run check
```

## Project shape

This 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](docs/ARCHITECTURE.md) 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.

## Live deployment

GitHub Pages serves the root `index.html` from `main`. The deployed surfaces are:

- [Interactive demo](https://zeta-loop.github.io/tidalMark/)
- [Color showcase](https://zeta-loop.github.io/tidalMark/examples/color-showcase.html)
- [Sea simulator](https://zeta-loop.github.io/tidalMark/examples/sea-simulator.html)

## License

MIT. See [LICENSE](LICENSE).