N° 0004Product filmPro

Suspended Splash

A bottle drops into its own splash as you scroll, then the camera circles it while droplets cross the headline.

Source files, Studio plan

33 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 Blood OrangeEach 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 nameHeadlineSubheadButtonPrice caseBackground#0E0B0AText#F4EDE4Accent#FF6A2BDisplay fontBody font

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

Overview

A bottle drops into its own splash as you scroll, then the camera circles it in slow motion. The headline sits behind the liquid.

Signature momentThe crown splash at its peak, droplets crossing in front of the giant headline while the bottle splits it in two.

The drop
Scrolling the first half of the page scrubs 65 frames of a bottle falling into its own pool of juice. The splash grows with every pixel of scroll.
The headline behind the liquid
The DOM headline sits between a backdrop plate and the film. Each frame is keyed in a Web Worker, so droplets and sheets of liquid cross in front of the letters.
The frozen orbit
After the peak the camera walks around the splash while time stands still, 42 frames of a slow 12 degree arc.
Flavour picker
Three flavours regrade the whole film live through the runtime API: hue, saturation, accent and backdrop change together.
A real page underneath
The range with graded stills, nutrition per bottle, stockists by city and an order card with deposit terms.
Phones
A 5:6 crop of the film, fitted to the width and anchored to the bottom, with the headline in a band above it.

Build details

Kind: Product film
Plan: Pro
Tone: Dark
Industries: Food and drink, Ecommerce, Beauty
Technique: Image sequence
Built with: Lenis 1.3.27, other {'webgl': '1 (raw, one fragment shader)'}, plain HTML, CSS and one ES module
Looks: 9
Weight: 7.8 MB, layer files only
Mobile performance: 100
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, 21 of them, all live through DUSKLAYER.set()

Control	Key	Range	Default
Liquid hue shift (°)	`liquidHue`	-180 to 180	0
Saturation	`saturation`	0 to 1.6	1
Contrast	`contrast`	0.8 to 1.4	1
Exposure	`exposure`	0.7 to 1.3	1
UI accent	`accent`	color	#FF6A2B
Backlight colour	`bgTone`	color	#6A1F08
Backlight strength	`bgGlow`	0 to 1	0.35
Headline layer	`textLayer`	select: behind, front, blend	behind
Headline scale	`headlineScale`	0.6 to 1.3	1
Headline offset (viewport heights, landscape)	`headlineY`	-0.3 to 0.25	-0.13
Portrait headroom above the film (tablets)	`mobileHeadroom`	0 to 0.35	0.24
Film offset at rest (viewport heights)	`idleDrop`	0 to 0.12	0.05
Key: colour threshold	`keyChroma`	0.02 to 0.4	0.08
Key: softness	`keySoft`	0.02 to 0.4	0.12
Key: highlight threshold	`keyLuma`	0.3 to 0.95	0.45
Camera zoom	`cameraZoom`	1 to 1.25	1.03
Pointer parallax	`parallax`	0 to 1	0.6
Scrub weight	`scrubWeight`	0 to 1	0.5
Film grain	`grain`	0 to 0.08	0
Vignette	`vignette`	0 to 0.7	0.35
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, 33 KB, 13 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
Keying (the core technique, use verbatim as the worker source)
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

# Suspended Splash: build prompt

## Role
You are a senior creative front-end developer. Build the layer described below as one self-contained `index.html`: the homepage of a small sparkling-juice company whose hero is a scroll-scrubbed product film. A bottle drops into its own splash and the camera then circles the crown in ultra slow motion; the giant headline sits *behind* the liquid, so droplets and liquid sheets pass in front of the letters. Below the film the page is a believable drinks site: the range, what's in the bottle, stockists, an order card, a footer. A screenshot should pass for a real company's page.

## 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"`.
- Fonts: one Google Fonts link for {{FONT_DISPLAY}} roman only, `opsz,wght@9..144,300;9..144,400` (no italic anywhere), and {{FONT_BODY}} 400 and 500, loaded without blocking render (`media="print" onload="this.media='all'"`).
- `<title>` "{{BRAND_NAME}} sparkling blood orange | {{BRAND_NAME}}", a meta description, `theme-color` {{COLOR_BG}}.
- Real DOM text for every headline, paragraph, list and button. Canvas is decoration only and gets `aria-hidden="true"`.
- Expose `window.DUSKLAYER = { version: 1, params, set(values), pause(), resume(), ready }`. `ready` resolves after the first film frame is drawn; at that moment set `document.documentElement.dataset.dusklayerReady = '1'`.
- URL params: `?preset=001`, `?capture=1` (cursor hidden, no intro delay, no idle hover, start loading immediately instead of on idle, no spring lag: the playhead equals its target, key every frame up front and keep them, set `data-dusklayer-keyed="1"` when all are keyed), `?reduced=1`, `?quality=low|med|high` (high: decode window 10 ahead; med: 7; low: 7 and only every other frame), `?seed=42`.
- When framed, listen for `{source:'dusklayer-host', type:'set'|'pause'|'resume', values}`; post `{source:'dusklayer', type:'ready', params}` once and `{source:'dusklayer', type:'fps', value}` every 2 s.

[31,040 more characters. Copy the prompt to get all of it.]