N° 0006Product filmPro

Orbit & Explode

An earbuds pod separates into seven labelled parts 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 MidnightEach 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 nameProduct typeHeadlineHeadline, second partSubheadButtonPriceClosing headlineClosing subheadBackground#0B1120Text#EDE7DDMuted text#9AA3B1Accent#E28B4DDisplay font

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

Overview

An earbuds pod turns half a circle on scroll, then splits into seven floating parts, each with a label that rides along.

Signature momentThe lid lifts, the parts drift apart, and a leader line grows out of each one to its label as it comes free.

The orbit
The closed pod turns half a circle over 65 frames beside the hero copy. The frames are transparent, so the page tone is yours to choose.
The explode
It opens and separates into seven floating parts over 96 frames. The camera pulls back from the pod to the whole stack as it happens.
Callouts that ride along
Each part has a label on a leader line pinned to its silhouette. The anchors were tracked frame by frame, so the dots stay on the parts as they move.
Pins on phones
Narrow screens swap the side labels for numbered pins and one legend card that names the newest part.
Parts, specs and price
A seven row parts list with cutouts from the last frame, repair steps, a 12 row specs table and a price card.
Settles on a frame
When scrolling stops the canvas eases to a single frame, so nothing ever rests on a blend.

Build details

Kind: Product film
Plan: Pro
Tone: Dark, Light
Industries: Ecommerce, Agency
Technique: Image sequence
Built with: Lenis 1.3.27, plain HTML, CSS and one ES module
Looks: 9
Weight: 7.6 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, 12 of them, all live through DUSKLAYER.set()

Control	Key	Range	Default
Background tone	`tone`	color	#0B1120
Backlight behind the product	`glow`	0 to 1	0.8
Ink	`ink`	color	#EDE7DD
Muted ink	`muted`	color	#9AA3B1
Accent	`accent`	color	#E28B4D
Callout set	`callouts`	select: parts, specs, materials, none	parts
Frame density	`frameDensity`	select: full, half, third	full
Product scale	`productScale`	0.8 to 1.15	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	7

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

The prompt

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

Role
Output contract
Assets (next to the file)
Design tokens
Layout
Film engine
Presets
Camera
Callouts (the core technique)
Motion
Responsive and performance
Acceptance checklist
Customize
Appendix: making 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

# Orbit & Explode: build prompt

## Role
You are a senior creative front-end developer. Build the layer below as one self-contained `index.html`: the product page of {{BRAND_NAME}}, an invented audio brand, for {{PRODUCT_NAME}}, {{PRODUCT_TYPE}} in a flax-fibre pod. At the top a scroll-scrubbed film: the closed pod turns half a circle beside the hero copy, drifts to the centre and pulls apart into seven floating parts, each with a DOM callout (number, name, spec) on a leader line grown from a dot on its silhouette. Frames are transparent, so the page tone is free; narrow or portrait screens get numbered pins and a legend card. Below the film, what an earbuds shop publishes: parts with prices, a repair guide, specs, a price card, a footer. A screenshot must pass for a real company's page.

## Output contract
- One file `index.html`, no build step, no framework; `lang="en"`; viewport `width=device-width, initial-scale=1, viewport-fit=cover`; `<title>{{PRODUCT_NAME}} earbuds | {{BRAND_NAME}}</title>`, a one-sentence meta description, `theme-color` {{COLOR_BG}}, `<link rel="icon" href="data:,">`, an inline `<script>document.documentElement.classList.add('js')</script>`; real DOM text; canvas `aria-hidden`; alt text on the poster and repair still, empty alt on the cut-outs.
- Fonts: one Google Fonts link `family={{FONT_DISPLAY}}:wght@300;400;500;600&display=swap`, `media="print" onload="this.media='all'"`, after preconnects. No second family, no mono. Stack `'{{FONT_DISPLAY}}', '{{BRAND_NAME}} Fallback', ui-sans-serif, system-ui, sans-serif`; the fallback is two local `@font-face` rules so copy doesn't reflow: 300 to 500 → `local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'), local('Helvetica')`, `size-adjust: 103%`; 600 to 700 → their Bold faces, `size-adjust: 98%`.
- Preload frame 0 of each set (`fetchpriority="high"`): `d/f000.webp` under `not all and (max-width: 600px) and (max-aspect-ratio: 1/1)`, `m/f000.webp` under the phone query.
- Import map, one exact version: `"lenis": "https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.mjs"`, loaded by a dynamic `import('lenis')` after first paint (failures ignored), not under reduced motion.

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