N° 0020ScenePro

Chrome Script

Chrome lettering breaks apart under soft studio light, one letter at a time as you scroll.

35 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 MirrorEach 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 and the word change the preview live.

Brand nameWordWord on phonesCityEyebrowClaim strongClaimSubheadButtonCta heroLinkPlaceColor backdrop#D7D8DAColor metal#E9EBEEAccent#1E3354Display fontBody font

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

Overview

A huge extruded chrome word stands on a pale studio sweep for an invented Sheffield silver jeweller, and on scroll each letter peels off the line in turn, tumbles through the softbox light and settles into a loose spill on the floor while the camera cranes up over it.

Signature momentThe O has lifted off the line and turned on its side, its rim flashing white against a black card, while the r tips back into the light and the rest of the word still stands on its soft contact shadow.

Chrome from outlines
Unbounded at weight 800 is instanced, cleared of overlaps and written as 68 relative SVG paths, 22 KB with kerning. Each letter is its own ExtrudeGeometry, 0.24 em deep, with a 5 segment bevel (2 on phones), 6 curve segments (3) and a bevel offset equal to the bevel size, so the silhouette is exactly the glyph.
A studio in one shader
A sphere drawn from the inside with 14 analytic boxes, nine softboxes and five black cards, prefiltered once into a 512 PMREM (256 on phones). The first box's lower edge sits 7.5 degrees below the camera, which cuts a crisp chrome horizon across every face at 0.45 em.
Exactly in place
First paint is the same outlines as an inline SVG on a CSS studio sweep. The camera stands 7 em back with a lens shift worked out from the SVG's box, so the front faces land on it pixel for pixel; three.js loads at the first input or 3.2 s after load.
The peel
Each letter rides six springs (k 64, c 9.5) through five Hermite keys, turns 40 to 120 degrees on two axes and takes 0.32 of the 240vh pin, staggered left to right, right to left, centre out or in a seeded order. It lands face up in a seeded spill that never overlaps.
Shadows drawn once
A 128 px tile atlas holds two footprints per letter, the standing contact runs read from the glyph at the baseline and the lying silhouette, blurred once per word layout. Each frame only fades, grows and turns them with the letter's height above the floor.
Nine finishes
Polished chrome on pale grey and on black, gold, rose gold, gunmetal, brushed steel with anisotropy 0.82, black chrome, white ceramic under a full clearcoat and holographic film at 160 to 620 nm. Five looks have light pages, four dark; the stills below are rendered in the same studio.

Build details

Kind: Scene
Plan: Pro
Tone: Light, Dark
Industries: Ecommerce, Agency, Portfolio
Technique: 3D type, WebGL 3D
Built with: Three.js 0.187.0, plain HTML, CSS and one ES module
Looks: 9
Weight: 86 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
Word	`word`	text, up to 12 characters	Orbell
Word on phones	`phoneWord`	text, up to 12 characters	Orb
Bevel	`bevel`	0 to 1	0.55
Metal colour	`metal`	color	#E9EBEE
Metalness	`metalness`	0 to 1	1.0
Roughness	`roughness`	0.02 to 0.6	0.05
Surface	`surface`	select: polished, brushed, film	polished
Studio tone	`envTone`	0 to 1	0.72
Shadow softness	`shadow`	0 to 1	0.5
Peel order	`peelOrder`	select: left, right, centre, random	left
Peel distance	`spill`	0.4 to 1.6	1.0
Pointer tilt (degrees)	`tilt`	0 to 8	4
Seed	`seed`	1 to 9999	7
Studio backdrop	`backdrop`	color	#D7D8DA
Accent	`accent`	color	#1E3354
Page tone	`pageTone`	select: light, dark	light

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

The prompt

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

# Chrome Script: build prompt

## Role
You are a senior creative front end developer. Build one self contained `index.html`: the home page of {{BRAND_NAME}}, an invented jeweller in {{CITY}} that casts domed rings, hoops and letter pendants in recycled sterling silver. The hero is the brand word {{WORD}} as huge extruded chrome letters standing on a pale studio sweep, lit by an environment of softboxes and black cards. First paint is the same word drawn in HTML as an inline SVG on a CSS studio gradient; three.js replaces it exactly in place, pixel for pixel on the front faces. On scroll each letter peels off the line in sequence, lifts and turns 40 to 120 degrees on two axes on a spring so its faces sweep through the softboxes, and settles lying face up in a loose spill on the floor while the camera cranes up over it. Soft contact shadows come from a blurred shadow atlas drawn once per word layout. Below the hero: the collection with prices and stills rendered from the same scene, the workshop with real numbers, fittings and stockists, a four group footer. Everything is in one file: a classic head script, inline CSS, one ES module.

## Output contract
- Files: `index.html` only. No assets folder: the letter outlines are embedded as JSON, the stills are rendered at run time.
- three.js 0.187.0 from jsDelivr through an import map. three's `build/three.module.js` imports `./three.core.js`, so remap the core to its minified twin: `{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.187.0/build/three.module.min.js","https://cdn.jsdelivr.net/npm/three@0.187.0/build/three.core.js":"https://cdn.jsdelivr.net/npm/three@0.187.0/build/three.core.min.js"}}`. No addons, no Lenis, no GSAP, no bundler. `import('three')` only inside `boot()`.

[33,008 more characters. Copy the prompt to get all of it.]