N° 0014ScenePro

Paper Atlas

A folded map opens into a landscape of routes and contours.

38 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 FieldEach 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 nameEyebrowHeadline strongHeadlineSubheadButtonLinkPrice fromPlaceBackground#E3DCCDColor paper#F2EBDCColor ink#2C2722Accent#B4432BDisplay fontBody font

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

Overview

A folded walking map lies closed on the desk; scrolling opens it on hinged, curling folds, panel by panel, then fells rise out of the paper with their contour lines spreading from the summits, the route is inked across the tops and pins drop onto it with a soft bounce.

Signature momentThe open sheet in raking light: fells risen out of the paper, 1 px ink contours across them, the red route inked over the tops, pins standing on it with their place names and the title block printed in the corner.

The fold
A 10 by 6.25 sheet cut into 4 to 12 panels opens as a real roll fold: each crease hinges at its own height so the closed panels stack, and the free edge lags and curls as it turns. Scroll 3% to 42% opens it, panel by panel.
Creases that stay
Once open the sheet keeps its folds: a shallow zigzag and darker crease lines that the creaseMemory knob turns up or down, so it reads as paper that was folded, not a flat plane.
Fells out of the paper
From 42% to 76% of the scroll a seeded heightfield rises out of the sheet, up to 820 m on the map's scale, with hillshade from a warm key light at the upper left.
Contours at 1 px
Contour lines come from the height in the shader with screen space antialiasing, every fourth one heavier, at an interval you set from 5 to 60 m.
The route and the pins
A red route is inked across the tops from 75% to 92%, through seven waypoints that pass the high point. Pins with place names drop onto it over 420 ms as the ink reaches them, then the title block prints in the corner.
Fast on phones
The renderer runs in a worker, draws only when something changed, and starts open on phones with no table shadows. Nine looks from Field and Blueprint to Night map.

Build details

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

Control	Key	Range	Default
Fold panels (the concertina, 4 to 12)	`folds`	4 to 12	8
Fold pace (higher turns each panel faster, with more overlap)	`foldSpeed`	0.5 to 2	1
Crease memory (how much the open sheet keeps its folds)	`creaseMemory`	0 to 1	0.5
Relief (1 puts the high point near 820 m)	`relief`	0.3 to 2	1
Contour interval in metres	`contourSpacing`	10 to 120	50
Hillshade (how strongly the slopes take the light)	`hillshade`	0 to 1	0.6
Key light warmth	`lightWarmth`	0 to 1	0.55
Paper fibre (texture in the sheet itself)	`fibre`	0 to 1	0.5
Paper	`paperTone`	color	#F2EBDC
Ink (contours, grid, type on the sheet)	`inkColor`	color	#2C2722
Accent (route, pins, buttons)	`accent`	color	#B4432B
Page tone (the table under the sheet)	`pageTone`	select: light, dark	light
Route on the sheet (place names and title)	`route`	select: hollin, scarrow, lingwater, coast	hollin
Pins (0 to 6)	`markerCount`	0 to 6	5
Seed (terrain and route)	`seed`	1 to 999	3

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

The prompt

One text file, 38 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

# Paper Atlas: build prompt

## Role
You are a senior creative front-end developer. Build one self-contained `index.html`: the home page of {{BRAND_NAME}}, which sells self guided walking holidays and draws a 1:25,000 map for every route. The hero is raw WebGL2: a folded paper map lies closed on a desk, cover up; scrolling opens the half fold, then the concertina panel by panel on hinged, curling folds; fells rise out of the flat sheet while 1 px ink contours spread from the summits, the route is inked in the accent and pins drop onto it with a 420 ms soft bounce, and a title block appears printed in the corner. Below: four routes with prices and distances, what is included, dates with a booking card, a four group footer. No Three.js, no framework. It must read as a real company's site.

## Output contract
- One `index.html`, no build step: HTML, CSS, eight GLSL script tags, one ES module, no image assets (the route sheets below the fold are drawn at runtime from the same terrain).
- Import map: `"lenis": "https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.mjs"`, loaded with `import('lenis')` after the scene boots (`lerp: 0.1, autoRaf: false`, driven from the page loop), never under `?capture=1` or reduced motion.
- Fonts: one Google Fonts link after two preconnects, non-blocking (`media="print" onload="this.media='all'"`, plus `noscript`): `{{FONT_DISPLAY}}:opsz,wght@8..60,300;8..60,500` and `{{FONT_BODY}}:wght@400;500`, `display=swap`. Serif text uses `font-variation-settings: 'opsz' 48`. Metric matched fallbacks, one `@font-face` per local font and weight, `line-gap-override: 0%`, all chained in the stacks. Serif 300 / 500: `local('Georgia')` size-adjust 94% / 95.2%, ascent 110.3% / 108.8%, descent 35.7% / 35.2%; `local('DejaVu Serif')` 80.9% / 82%, 128% / 126.4%, 41.4% / 40.9%; `local('Liberation Serif')` 102.8% / 104.2%, 100.7% / 99.4%, 32.6% / 32.1%. Body 400 / 500: `local('Arial')` and `local('Liberation Sans')` 103.4% / 104.4%, 93.4% / 92.5%, 23.8% / 23.6%; `local('DejaVu Sans')` 90.7% / 91.6%, 106.5% / 105.5%, 27.1% / 26.9%. Measures in em, never ch.

[35,136 more characters. Copy the prompt to get all of it.]