N° 0015ScenePro

Cathedral Grid

Shafts of sun fall from roof lights into a hazy hall of stone columns, and scrolling walks you down the nave.

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 Warm stoneEach 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 nameCityEyebrowHeadline strongHeadlineSubheadButtonCta heroLinkPlaceColor fog#BBB2A6Color stone#A99D8EAccent#8C6219Display fontBody font

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

Overview

An endless hall of stone columns in warm haze for an invented Edinburgh architecture practice: thick shafts of sun fall from square roof lights into pools on the floor, dust drifts in the light, and scrolling walks you forward down the nave past two shafts toward a third.

Signature momentA quarter of the way down the nave, a shaft of sun falls past the nearest column into a bright square pool on the floor while two more shafts fade into the haze beside the headline.

An endless hall
Up to 380 instanced columns in one draw call on a laptop and 160 on a phone, 6 m apart and 14 m tall by default, as round stone drums, octagonal piers or square board marked concrete with plinths, abaci and beams. The window of columns travels with the camera, nearest rows first.
Light in dust
Each shaft is a camera facing slab drawn additively at half resolution and softened against the hall's depth: a soft core, streaks drifting at 0.03 and 0.07 a second and dust motes that rise and twinkle. Six shafts in view by default, one to twelve, each landing as a soft square pool.
Haze with no end
Distance fog, height fog falling off at 0.3 per metre and a cubic ramp to seven optical depths where each ray leaves the grid, so the nave recedes into haze at every scroll position and never shows a wall.
A walk on scroll
A 250svh pin walks the camera 30 m down the nave on a Catmull Rom spline, past two shafts toward a third, with a 2 cm bob, a lean into the walk and a pointer spring of up to 4 degrees.
A passing cloud
A seeded flicker dims one or two roof lights by up to 55% for about a second every 7 to 12 s, and replays frame for frame under capture.
Light on phones
Hand written WebGL2, four programs in a Worker on an OffscreenCanvas, 81 KB of HTML. Phones draw 160 columns with shafts baked as gradient slabs; nine looks run from Warm stone to Night hall and White gallery.

Build details

Kind: Scene
Plan: Pro
Tone: Light, Dark
Industries: Agency, Portfolio, AI and tech
Technique: WebGL 3D
Built with: Lenis 1.3.27, plain HTML, CSS and one ES module
Looks: 9
Weight: 95 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, 16 of them, all live through DUSKLAYER.set()

Control	Key	Range	Default
Column spacing (m)	`columnSpacing`	3.5 to 10	6.0
Column height (m)	`columnHeight`	8 to 24	14
Column shape	`columnShape`	select: square, octagonal, round	round
Shafts in view	`shaftCount`	1 to 12	6
Shaft width (m)	`shaftWidth`	0.6 to 3.2	1.8
Light warmth	`lightWarmth`	0 to 1	0.55
Fog density	`fogDensity`	0.01 to 0.12	0.026
Dust	`dust`	0 to 1	0.5
Walk speed	`walkSpeed`	0.4 to 2	1.0
Camera sway	`sway`	0 to 1	0.5
Fog colour	`fog`	color	#BBB2A6
Stone colour	`stone`	color	#A99D8E
Accent	`accent`	color	#8C6219
Page tone	`pageTone`	select: light, dark	light
Grain	`grain`	0 to 0.6	0
Seed	`seed`	1 to 9999	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

# Cathedral Grid: build prompt

## Role
You are a senior creative front-end developer. Build one self-contained `index.html`, the home page of {{BRAND_NAME}}, a practice of 28 in {{CITY}} that plans public buildings around daylight. The hero is hand written WebGL2: an endless hall of tall columns in haze ({{COLOR_FOG}} fog, {{COLOR_STONE}} stone), thick shafts of sun falling from square roof lights into soft pools, dust in the light. Scroll walks the camera down the nave past two shafts toward a third; now and then a cloud dims a roof light. It renders in a Worker on an OffscreenCanvas. Below: buildings with stills from the scene, the method and numbers, the studio with jobs and an enquiry card, a footer. It must read as a real practice's site.

## Output contract
- Files: `index.html` (classic head script, inline CSS, one ES module) and four stills in `assets/` (see Layout).
- Lenis 1.3.27 through an import map (`https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.mjs`), imported once the renderer starts, `{ lerp: 0.1, smoothWheel: true, autoRaf: false }`, `raf(now)` from the page loop; never under capture or reduced motion.
- Fonts: one non-blocking link (`media="print" onload="this.media='all'"`, plus `noscript`): `{{FONT_BODY}}:wght@400;500`, `{{FONT_DISPLAY}}:wght@300;500`, `display=swap`. Fallback faces, line gap 0: display from Times New Roman, Liberation Serif, Tinos (300: size-adjust 114.4%, ascent 93.4%, descent 25.6%; 500: 120.8%, 88.5%, 24.3%); body from Arial, Liberation Sans, Arimo (400: 98.6%, 89%, 21.3%; 500: 100.5%, 87.4%, 20.9%).
- Presets in `<script type="application/json" id="dusklayer-presets">/*PRESETS*/[nine looks]/*/PRESETS*/</script>`: defaults, then `?preset=001` to `008`, then `?seed=n`. A head script `window.CG` writes the look's custom properties and `theme-color` before the body parses and adds `html.js`.

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