16 · Saltglass: a sauna and cold-plunge bathhouse seen through water and glass

Saltglass Bathhouse is a made-up wood-fired sauna at the end of a stone pier in Port Wren, and the footer says so. The page opens on a live water shader moving over a pool floor whose tiles spell SALTGLASS, with refracting glass panels floating on top. What makes people stop is that the water is real motion, the glass bends it, and the page also works as a booking tool: it ends in a glass token you can print.

Inspiration

The brief was the Glass theme from the kit, the favourite from the lab pages. The tools come from the 20 Oct lab pages: Paper Shaders for the living water and the hot-to-cold background, SVG-refraction glass from Lab 05, GSAP (SplitText, ScrollTrigger, DrawSVG, Flip) for motion, and two Uiverse CSS patterns as still backdrops. The Flip card-to-page idea comes from Lab 02.

What was added on top: the pool floor is drawn in code, and the water shader refracts it. A 5 by 7 block font spells the name in lit tiles, like depth markings on a pool wall. A pier at dusk is also drawn in code, and a mirrored copy runs through the water shader as a live reflection. The numbers are honest: sea temperature, sauna state, tide and sunset are computed from the real date, and the sunset uses a real solar formula for 44 degrees north.

Visual direction

• Palette: ink #0b1d24, sea glass #7fd1c7, brass #c9a46a, foam #eef6f3, dim teal text #a9c4bf. The cycle section runs ember #c4502a (shader colors #170806, #c4502a, #ffb980) to ice (#03121a, #2f7f93, #c8f3ff) to rest (#0b1d24, #25615e, #8fd3c6). The dusk band runs plum to orange (#141a33 to #f5b878).
• Fonts: Fraunces with the SOFT axis pushed up for headings and body, IBM Plex Mono for labels, prices and times.
• Motion: slow and heavy. The headline splits into characters that rise over 1.7 seconds with expo easing. Numbers count up. The conditions panel drifts a few pixels against the mouse. Sections fade up on scroll. Nothing bounces, apart from a short back-ease on the BOOKED stamp.
• Layout: hero with copy on the left and the conditions panel on the right; a facts row; a pinned cycle scene with a chart on the left and a glass step panel on the right; five ritual cards; a booking form beside a live token; the dusk band; FAQ and footer.
• Signature moments: the tiled pool lettering under moving water. A temperature line that draws itself through hot, cold and rest while the background changes color. A ritual card that grows to a full-screen plan. The token that fills in as you book and gets stamped. The lantern reflection at dusk.

Theme, kit and licenses

• Theme: Glass. Water seen through glass suits it better than any other subject. The page sits at the top of the Medium budget, and the code keeps the rules: at most two glass pieces over moving content, glass cards and the token sit over still patterns, nothing sticky has glass or blur (the nav is absolutely positioned), and an opened ritual card switches its glass off and goes solid. No theme lines were changed.
• Kit parts used: paper.js and its data (the water and warp shaders), glass.js and glass.css, uv-piece.js with uv.json, and fps-chip.js (shown with ?fps). GSAP 3.15.0 is loaded from script tags. No tools outside the kit.

Credits are in CREDITS.md and in the page footer.

References

• Paper Shaders, https://shaders.paper.design: water for the hero and dusk reflection, warp for the cycle background.
• GSAP, https://gsap.com: SplitText headline, ScrollTrigger pin and scrub, DrawSVG for the temperature line, Flip for cards growing into plans.
• Uiverse, https://uiverse.io: two still patterns as glass backdrops.
• SVG-filter glass (Lab 05, via the kit's glass.js): refracting nav and panels, with a frost fallback.

Why these choices

A bathhouse sells a feeling of heat, cold and quiet, so slow motion and real water fit. The line chart explains the hot, cold, rest cycle better than a paragraph would, and scrolling through it feels like doing a round.

The trade-offs are visible in the code. Glass over moving content costs frames, so only the hero nav, the conditions panel and the cycle panel sit over motion, and the cycle panel is in a different screen from the hero. Cards and the token sit over CSS patterns that never change. Every picture has a fallback: if the shader fails, the pool and dusk images show as plain backgrounds. With reduced motion, the pinned scene turns off, the three steps stack, and the line sits fully drawn. The unit toggle (°C/°F) is remembered in localStorage inside try/catch. When a card opens full screen, focus is trapped, Escape closes it, and the page behind stops scrolling. The booking form is real enough to test: closed Tuesdays, lantern swims on Thursdays only, with gate time worked out from sunset.

Who this kind of site is for

It wins for spas, saunas, swim clubs, cold-plunge studios, coastal hotels and any place that sells calm and wants to look premium. It also suits businesses where booking is the point, because the wow sits beside a working form.

It is the wrong call for a site people open in a hurry on a weak phone, or for a business whose pictures should be real photos. Pool lettering reads fully only on wide screens.

When showing it, start with the conditions panel and the token first, since they prove it is a working tool and not just a pretty page. For reuse, swap the rituals array, the tile word and the open hours, and the rest carries over.

How to make it

Stack and key techniques

• One HTML file, roughly 76 KB of hand-written source, plus inlined kit parts.
• Paper water shader refracting a canvas-drawn tile floor (5 by 7 block letters, laid out differently for portrait and landscape). Paper warp for the color cycle, with uniforms set from scroll.
• Kit glass (SVG refraction with frost fallback), switched off and on in code for the open card.
• GSAP: SplitText, ScrollTrigger (pin and scrub), DrawSVG, Flip, quickTo for the pointer drift.
• Computed values: solar-formula sunset, a 12 h 25 min tide cycle, a monthly sea-temperature table, a hash-based "spaces left" per slot.
• Booking flow: ritual, 14 real days, slots, party size, name, code, .ics download via Blob, print stylesheet that shows only the token.

The prompt

Build a single-file website, no build step, for "Saltglass Bathhouse", a made-up wood-fired sauna and cold-plunge bathhouse at the end of a stone pier in the made-up town of Port Wren. The footer must say the business and town are fictional.

Theme: glass over living water. Use these pinned tools: Paper Shaders 0.0.81 (water, warp), GSAP 3.15.0 (SplitText, ScrollTrigger, DrawSVG, Flip), SVG-refraction glass with a frost fallback for non-Chromium browsers, and two still CSS patterns as backdrops. No other libraries. Draw all pictures in code.

Palette: ink #0b1d24, sea glass #7fd1c7, brass #c9a46a, foam #eef6f3; ember #c4502a and ice #c8f3ff for the cycle. Fonts: Fraunces (soft axis up) and IBM Plex Mono. Motion is slow and heavy, nothing bounces.

Sections and signature moments:
1. Hero: a Paper water shader refracting a pool floor you draw on a canvas in tiles, with SALTGLASS spelled in lit tiles using a 5 by 7 block font (stack SALT / GLASS on portrait screens). A glass nav and a glass conditions panel with sea temperature, sauna state, next tide and sunset, computed from the real date (solar-formula sunset for 44 degrees north). Numbers count up. A C/F toggle changes every temperature on the page and is remembered.
2. The cycle: a pinned scroll scene. A temperature line (hot, cold, rest) draws itself with DrawSVG while a Paper warp background shifts ember to ice to sea glass, and a glass panel changes between three steps.
3. Rituals: five glass cards over a still pattern. Each grows into a full plan with Flip; Escape closes it, focus stays inside, the glass turns solid while open.
4. Booking: choose ritual, a day from the next 14 real days (Tuesdays closed; the lantern swim only on Thursdays, gate time from sunset), a time slot (some full or past), party size capped by spaces left. End in a glass token with a booking code and a stamp, a Print button that prints only the token, and an .ics calendar download.
5. Dusk band: a pier at dusk drawn in code with flickering lanterns; a mirrored copy runs through the water shader as a live reflection under one glass panel listing the next four Thursdays.
6. FAQ, a ?fps frame-rate chip, a link back to the gallery.

Rules: at most two glass pieces over moving content; glass elsewhere only over still backgrounds; no glass or blur on sticky elements. Respect prefers-reduced-motion (no pin, steps stacked, line fully drawn). Wrap localStorage in try/catch. Every shader needs a still fallback. Text on glass sits on a darker tint. No em dashes.

Verify: screenshot at five scroll stops at 1440 wide and four at phone width, run with reduced motion, click through every control, check the console is clean and nothing overflows at 1440, 390 and 360. Fix and repeat.

Build notes

• The shader needs every texture fully loaded before it mounts, so the pool and reflection images are made as JPEG blobs and awaited first.
• Resizes rebuild the pool and dusk images, but only when the width changes by 40 px or more, which avoids phone toolbar jitter.
• Glass is switched off while a card is open and back on after the close animation ends.
• Booking codes, "spaces left" and slot availability are generated from a hash, so they look stable but are fake. No server exists.
• The builder flagged the pool lettering as fully legible only on wide screens, and headless Flip close as slow under software graphics.
• Not checked: real-device frame rate, Safari and Firefox (frost fallback), real printing.

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work, and the evidence is the spec table, Anthropic's own pages and extrapolation from model tier. The point here is how much the tested kit carries for a smaller model.

Overall, as a judgment call: Sonnet 5.5 with the kit keeps roughly 70 to 85 percent of the visual impact in one pass. From a blank page, roughly 40 to 60 percent, mostly lost in the shader, glass and Flip details. Opus 5.5 built this one, and the gap to Fable 5.1 is probably small here because the kit did the hard shader and glass work. Screenshot feedback loops and splitting the build into sections would close most of the gap for Sonnet.