# Sea salt harvest site with a water hero

> A quiet one-page site for Lenn, a two-person salt harvest in Brittany: the wordmark sits under WebGL water that ripples with the cursor, and scrolling drains the tide. Opus 5.5 built it in Claude Code from one brief, with the frontend-design skill.

- Kind: Website
- Live website: https://files.muzli.cloud/blog/claude-opus-5-5-for-designers/demos/site/index.html
- Page: https://meetreference.com/v/sea-salt-harvest-site-water-hero/
- Ready-to-use agent handoff: https://meetreference.com/v/sea-salt-harvest-site-water-hero/agent.txt
- Exact prompt as plain text: https://meetreference.com/v/sea-salt-harvest-site-water-hero/prompt.txt
- Authorship: Not stated
- Made with: Claude Code
- Model: Claude Opus 5.5
- Built with: WebGL, GSAP, Lenis
- Skills or plugins: frontend-design
- Style: 3D sites; webgl water, editorial, serif, muted grey, scroll story, artisan brand, single html file
- Shared by Petras Baukys, Muzli in Blog, Sep 28, 2026: https://muz.li/blog/claude-opus-5-5-for-designers/
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Before you start

Guidance from Reference, separate from the creator's instructions.

1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present.
2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized.
3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed.
4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting.
5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use.

Requirements reported by the source: The frontend-design skill; A browser tool Claude can take screenshots with, and an instruction to check and fix its work there at least twice.

## Recreating this website

These are the creator's published instructions, unedited.

To adapt it: Replace Lenn and the Guérande salt marsh with your own small business, and rewrite the paragraph that starts "The one memorable thing" around one effect of your own. Keep the motion paragraph and the quality-bar line.

## Prompt

```text
Build a one-page website for Lenn, a two-person sea salt
harvest on the salt marshes of Guérande, in Brittany.
Visitors are chefs and food lovers who might order a tin
or come and visit.

Mood: quiet, tidal, tactile. Grey Atlantic light, not
beach kitsch. Pick distinctive type, one or two families.

The one memorable thing: the hero is water. A real-time
WebGL water surface fills the screen and ripples where the
cursor moves, with the Lenn wordmark under the surface,
refracting. As you scroll, the tide drains away and salt
crystals appear on the clay.

After that: how the salt is raked by hand (a short
scroll-driven story in three moments), the three salts and
what to cook with each, visiting the marsh, and ordering.

Motion: one orchestrated page load, then scroll-linked
scenes with GSAP ScrollTrigger and Lenis. No fade-up on
every section. Respect prefers-reduced-motion. It must work
on a phone. Quality bar: a site we would feature on Muzli
Picks. Single HTML file, libraries from a CDN.
```

## What it looks like

Written by Reference from the recording frames, not by the creator.

A grey hero where the Lenn wordmark sits engraved under rippling water, then pale clay-colored diagrams of the salt pans, three tins of salt, a dark map of the marsh, and an order form.

- Color: Slate and wet-clay greys, pale grey-green, sand, and dark teal-green, with little color beyond a muted water blue.
- Type: A sharp serif for the wordmark, headings, and body, with small sans-serif labels and a tide gauge on the right edge of the hero.
- Framing: 16:10. The wordmark fills the middle of the hero with a short paragraph lower left. The harvest story is a wide cross-section drawing of the pans with captions below, and the salts sit three across in round tins.
- Structure: Water hero, the gauge falling as the surface dries to speckled clay, "Raked by hand" in three moments (The sea comes in, The flower forms, The grey is pulled), the three salts (Fleur de sel, Gros sel gris, Sel fin), a map for visiting the marsh, "Order a tin", and the footer.

Storyboard, nine frames spread across the recording: https://meetreference.com/media/sea-salt-harvest-site-water-hero/storyboard.webp

- Frame 1 at 1.4s: https://meetreference.com/media/sea-salt-harvest-site-water-hero/f1.webp
- Frame 2 at 4.1s: https://meetreference.com/media/sea-salt-harvest-site-water-hero/f2.webp
- Frame 3 at 6.9s: https://meetreference.com/media/sea-salt-harvest-site-water-hero/f3.webp
- Frame 4 at 9.7s: https://meetreference.com/media/sea-salt-harvest-site-water-hero/f4.webp
- Frame 5 at 12.4s: https://meetreference.com/media/sea-salt-harvest-site-water-hero/f5.webp
- Frame 6 at 15.2s: https://meetreference.com/media/sea-salt-harvest-site-water-hero/f6.webp
- Frame 7 at 18.0s: https://meetreference.com/media/sea-salt-harvest-site-water-hero/f7.webp
- Frame 8 at 20.7s: https://meetreference.com/media/sea-salt-harvest-site-water-hero/f8.webp
- Frame 9 at 23.5s: https://meetreference.com/media/sea-salt-harvest-site-water-hero/f9.webp

## How it was made, per the creator

- One-shot: yes, a single prompt with no follow-ups
- Notes: Each brief went to a fresh Claude Code session with Anthropic's frontend-design skill, a browser it could take screenshots with, and one standing instruction (described, not quoted) to check its work in that browser and fix what it saw at least twice. They also told it the page would be embedded about 720 pixels wide. Before building, the model set the wordmark in eight type pairings and chose Spectral.

> No references, no Figma file, no notes from us. What you see is what came back.
> (Petras Baukys, Muzli)

## Links

- Visit site: https://files.muzli.cloud/blog/claude-opus-5-5-for-designers/demos/site/index.html
- Original post: https://muz.li/blog/claude-opus-5-5-for-designers/