N° 0005Product filmStudio

Material Shift

One vessel turns from glass to stone to brushed steel as you scroll, with a finish picker and copy for each material.

30 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 GalleryEach 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 nameProduct nameHeadlineHeadline strongButtonPrice fromBackground#D6D2CAText#1C1A17Accent#9C4A2ADisplay fontBody font

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

Overview

One vessel turns from glass to stone to brushed steel as you scroll, with a chapter of copy for each material and a finish picker.

Signature momentMid scroll, a band of light climbs the stone vessel and leaves brushed steel behind it.

One form, three materials
Two 8 second clips cut into 115 frames: the vessel turns from mouth blown glass to honed travertine to brushed steel without moving.
The material word
Each material name draws as an outline and fills from the bottom up in step with the band of change climbing the vessel.
Finish picker
Three swatches scroll the film to each material. The active one is marked, and the page copy changes with it.
Grades, not reshoots
Nine looks apply CSS grades to the film: warmth, saturation, contrast and exposure, plus page tone and inset.
A studio page underneath
Materials with prices, weights and lead times, a dimensions and care table and a reserve card with deposit terms.
Portrait
The title takes a band above the film and the material word sits over the plinth.

Build details

Kind: Product film
Plan: Studio
Tone: Light
Industries: Ecommerce, Portfolio, Agency
Technique: Image sequence
Built with: Lenis 1.3.27, plain HTML, CSS and one ES module
Looks: 9
Weight: 3.8 MB, layer files only
Mobile performance: 99
Accessibility: 100
Fidelity Score: In review
Licence: Commercial, including client work. No redistribution. Read it
Version: 1, updated 2 November 2026
Released: 2 November 2026

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

Control	Key	Range	Default
Warmth (cool ← → warm)	`warmth`	-1 to 1	0
Saturation	`saturation`	0 to 1.5	1
Contrast	`contrast`	0.8 to 1.3	1
Exposure	`exposure`	0.8 to 1.2	1
Paper (matches the studio backdrop)	`paper`	color	#D6D2CA
Ink	`ink`	color	#1C1A17
Muted ink	`muted`	color	#5C5852
Accent	`accent`	color	#9C4A2A
Page around the film	`page`	color	#D6D2CA
Film inset (fraction of the short side)	`inset`	0 to 0.08	0
Film corner radius (px)	`radius`	0 to 32	0
Copy side wash	`scrim`	0 to 1	0.55
Material word scale	`materialScale`	0.6 to 1.3	1
Portrait band above the film	`mobileHeadroom`	0 to 0.35	0.2
Camera push in on the vessel	`cameraZoom`	1 to 1.3	1
Pointer parallax	`parallax`	0 to 1	0.5
Scrub weight	`scrubWeight`	0 to 1	0.55
Film grain	`grain`	0 to 0.08	0
Seed	`seed`	1 to 9999	3

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

The prompt

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

Role
Output contract
Assets (provided next to the file)
Design tokens
Layout
Film engine
Presets
Motion
Responsive and performance
Acceptance checklist
Customize
Appendix: shooting your own film

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

# Material Shift: build prompt

## Role
You are a senior creative front-end developer. Build the layer below as one self-contained `index.html`: {{BRAND_NAME}}'s product page for {{PRODUCT_NAME}}. At the top, a scroll-scrubbed film: one vase turns from clear glass to honed stone to brushed steel across three scroll chapters. The vase never moves; a band of change climbs it from base to rim, and a large roman material word fills bottom-up in step with the band. A finish picker scrolls to each material. Below: the three materials as rows with stills from the film, a dimensions and care table, a reserve card and a four-group footer. It must read as a real studio's site, not a demo.

## Output contract
- One file `index.html`, no build step, no framework: plain HTML, CSS and an ES module.
- Import map with one exact version: `"lenis": "https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.mjs"`. Load it with `import('lenis')` after first paint (ignore failures); until it resolves, read `scrollY` and scroll natively.
- Fonts: one Google Fonts link after the preconnects, non-blocking (`media="print" onload="this.media='all'"`), `display=swap`: {{FONT_DISPLAY}} roman only, 300 and 400 across its optical-size axis (`Newsreader:opsz,wght@6..72,300;6..72,400`; no italic axis), {{FONT_BODY}} 400 and 500.
- Real DOM text for all copy; canvas, scrim, grain layer and the outline copies of the material words are `aria-hidden="true"`. Sections below the film carry `aria-labelledby`.
- Expose `window.DUSKLAYER = { version: 1, params, set(values), pause(), resume(), ready }`. `set` merges known keys and re-applies them. `ready` resolves one frame after the first film frame is drawn; then set `document.documentElement.dataset.dusklayerReady = '1'`.
- Presets live in `<script type="application/json" id="dusklayer-presets">` between `/*PRESETS*/` and `/*/PRESETS*/` markers (strip them before `JSON.parse`); `params = { ...PRESETS[0].values, ...preset.values }`, then `?seed` overrides `seed`.

[28,438 more characters. Copy the prompt to get all of it.]