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.
Make it yours. 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.
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.
“No references, no Figma file, no notes from us. What you see is what came back.”
You'll need
- 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
How it was made
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.
Claude Code · Claude Opus 5.5 · WebGL · GSAP · Lenis · frontend-design
Source and credit
Blog · Sep 28, 2026
Authorship not stated by the source
Published instructions: Brief in the post, under "A website: sea salt, and a hero made of water"
Look notesby Reference
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.
