N° 0022ScenePro

Tidal Glass

An underwater scene that rises through the surface as you scroll.

34 KB of text that builds one HTML file. Paste it into Claude Code, Cursor or v0 to rebuild this page.

Open full page Live. Scroll inside the preview to play it.

Loading the layer

LooksShowing AbyssEach look changes the colours of the live preview and goes into the prompt you copy.

Make it yoursYour brand, copy and colours go into the prompt you copy. Colours change the preview live.

Brand nameLegal nameCityPlaceEyebrowHeadlineHeadline strongSubheadButtonLinkColor water#0A2E33Color sky#9FC2C4Accent#8FD3C7Display fontBody font

Brand remix is a Pro feature at launch. It is open in the preview.

Overview

You look up through the surface of the sea from 9 m down, Snell's window bright overhead and the depths mirrored around it, while glass ribbons twist in the current and caustics run over the sand and the glass; scrolling raises the camera, breaks the surface with one ripple, and leaves the ribbons standing in calm water beside their reflections.

Signature momentFrom deep water, the bright 97 degree disc of Snell's window with the broken sun in it, light shafts falling from it and five to nine glass ribbons crossing it, each bending the window behind it with a faint colour split while caustics slide over the glass.

Snell's window
From 9.6 m down every ray that meets the surface within 48.6 degrees of vertical refracts out to the sky, so the whole sky fits a 97 degree disc; outside it the underside of the surface mirrors the depths by total internal reflection. The edge is solved at water indices 1.329, 1.333 and 1.337, which leaves a thin colour fringe the waves break up.
One wave field
Eight seeded waves of 0.6 to 3.4 m tilt the surface. Caustics are one over the Jacobian determinant of the refracted light map, one step back to where the light entered, red and blue focusing 3% apart as water disperses; the same field shakes the window's edge, the mirror images and the 12 step light shafts.
Glass that bends the sea
The water renders first into a half size, half float texture; each ribbon samples it through two refractions of a thin lens cross section at three indices (ior 1.2 to 1.5, plus and minus 0.016), with exact Fresnel against water or air and a green tint where light crosses more glass.
A lens that straightens
Looking up, a stereographic dome port 116 degrees tall keeps the window round and right of the copy; by 80% of the climb it has eased into a 54 degree pinhole, so the horizon is straight when the camera breaks through.
Through the surface
Across 5.6% of the scroll a wavy waterline crosses the lens, sky above and sea below, each pixel drawn from its own side of the water. One ring spreads at 1.3 m/s in the water and one across the lens, then the surface settles to a third of its slope and the ribbons stand beside clear reflections.
Phones and budgets
Phones draw 3 ribbons shaded from the analytic water with no scene texture, still shafts at 6 steps and a 0.66 scale canvas; laptops draw 5 to 9 ribbons with 12 shaft steps and MSAA. One HTML file of 80 KB, no assets, rendered in a Worker on an OffscreenCanvas.

Build details

Kind: Scene
Plan: Pro
Tone: Dark, Light
Industries: Wellness and clinics, Beauty, AI and tech
Technique: Glass refraction, Shaders, WebGL 3D
Built with: Lenis 1.3.27, plain HTML, CSS and one ES module
Looks: 9
Weight: 80 KB, layer files only
Mobile performance: 100
Accessibility: 100
Fidelity Score: In review
Licence: Commercial, including client work. No redistribution. Read it
Version: 1, updated 3 November 2026
Released: 3 November 2026

Parameters, 13 of them, all live through DUSKLAYER.set()

Control	Key	Range	Default
Ribbons	`ribbonCount`	5 to 9	7
Index of refraction	`ior`	1.2 to 1.5	1.45
Caustic scale	`causticScale`	0.5 to 2	1.0
Caustic speed	`causticSpeed`	0.2 to 2	0.8
Water tint	`waterTint`	color	#0A2E33
Sky	`skyTint`	color	#9FC2C4
Depth (m)	`depth`	5 to 24	16
Surface at	`surfaceAt`	0.5 to 0.9	0.7
Light shafts	`rayIntensity`	0 to 2	1.0
Accent	`accent`	color	#8FD3C7
Page tone	`pageTone`	select: dark, light	dark
Spring stiffness	`springStiffness`	0.4 to 2.5	1.0
Seed	`seed`	1 to 999	7

Something wrong with this layer? Report a problem and we fix it in the next version.

The prompt

One text file, 34 KB, 10 sections. Every number the page uses is in it, so another model can rebuild the layer without seeing this one.

Role
Output contract
Design tokens
Layout
Scene
Presets
Motion
Responsive and performance
Acceptance checklist
Customize

How to use it

Pick a look. The look you choose above is written into the prompt’s parameter block.
Copy the prompt. Paste it into Claude Code, Cursor or v0 as the first message of a new session.
Make it yours. Change the brand name, copy, colours and fonts first; every placeholder is marked. Keep the structure.
Check it. The prompt ends with an acceptance checklist. Run through it before you ship.

Read the opening of the prompt

# Tidal Glass: build prompt

## Role

Build one self contained `index.html` for {{BRAND_NAME}}, an invented float and cold water studio on {{PLACE}}, {{CITY}} (four float rooms at 35.5 °C, a 6 °C plunge, a cedar sauna). The hero is a sea you look up through from 9 m down: Snell's window, a bright 97 degree disc with a wave broken edge and the sun in it, and around it the underside of the surface mirroring the depths. Five to nine thin glass ribbons stand from the floor up through the surface, twisting; each refracts the water behind it with Fresnel and a slight colour split, and caustics slide over the glass; shafts fall from the window. Scroll raises the camera and pulls it back, breaks the surface at `surfaceAt` with one ripple, and leaves the ribbons standing in calm water beside their reflections. The cursor bends them on heavy springs. Below: the page a real float studio would publish. Hand written WebGL2, no three.js, no textures, no images; one wave field drives the window, the caustics and the shafts.

## Output contract

- One file, CSS and scripts inline, the scene in an ES module; no build step, framework or GSAP. Lenis only, by import map `{"imports":{"lenis":"https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.mjs"}}`, imported after the scene starts, never under capture or reduced motion (`lerp 0.1`, `autoRaf: false`).
- Fonts from Google Fonts in one request: {{FONT_DISPLAY}} 300 and 500, {{FONT_BODY}} 400 and 500, `display=swap`, `media="print" onload="this.media='all'"`, a `<noscript>` copy. Fallbacks: `'Trirong Fallback'` from `local('Times New Roman'), local('Liberation Serif'), local('Tinos')`, weight 300 size-adjust 115.7%, ascent 103.7%, descent 46.2%, weight 500 size-adjust 123%, ascent 97.5%, descent 43.4%; `'Figtree Fallback'` from `local('Arial'), local('Liberation Sans'), local('Arimo')`, 400 101.2%, 93.9%, 24.7%, 500 102%, 93.1%, 24.5%; line gap 0. `font-variant-numeric: tabular-nums` on the body.

[32,296 more characters. Copy the prompt to get all of it.]