N° 0013SceneFree

Pollen Drift

Golden pollen gathers into a leaf, then a seed head and a flower as you scroll, and parts softly around your cursor.

39 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 BoneEach 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 nameBrand longBrand placeEyebrowHeadlineHeadline, second partSubheadSeed headlineSeed restSeed subheadFlower headlineFlower restFlower subheadFact oneFact twoFact threeButtonCta linkPriceBackground#F3EEE4Accent#B64A2CDisplay fontBody font

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

Overview

Golden pollen drifts along a warm sunbeam over bone paper and gathers into a leaf, loosens into a seed head and then a flower as you scroll, and parts softly around the cursor before springing back into shape.

Signature momentA few seconds in at scroll 0: 24,000 grains of pollen have gathered into a tilted leaf with its veins open, lit by a shaft of light from the top right with backlit bokeh behind it, and the cursor has parted a soft clearing at its edge.

Pollen on the GPU
24,000 particles (8,000 on phones) live in two RGBA32F textures and move every frame on the GPU: value noise curl drift, a spring toward a target point (k 7, damping 0.6 + 1.55√k) and wind for the 13% left loose in the sunbeam. 36 backlit bokeh discs drift behind them at 5 to 19% of the frame height.
Six silhouettes
Leaf, seed head and flower (or fern, berry sprig and tulip) are path data rasterised at 384 px and sampled into target points, a quarter on the outline and the rest thinned by a soft noise so the dust lies in drifts; sorting by 48 angle bins keeps each morph short.
The gather
On arrival the pollen drifts in as a mist along the beam and each grain's spring ramps in at its own moment over 1.8 s, so the leaf condenses in about 2.7 s. A cursor within 11% of the frame height parts it with a slight swirl, and the spring closes the clearing in about a second.
Three chapters
Scrolling the 250svh hero morphs the leaf into a seed head at 22 to 40% and the seed head into a flower at 58 to 76%, loosening the spring to 28% at each midpoint; the headline and subhead change with each blend.
Light on paper
Grains are summed into a half float light buffer and composited as amber, gold and a pale sunlit core over the paper, with a warm shaft from the top right. Grain size follows each shape's area, so the leaf, the seed head and the flower read at one density.
Off the main thread
Raw WebGL2 in a Worker on an OffscreenCanvas, a 3,000 particle CPU path where float targets are missing, and a still per chapter for reduced motion. Lighthouse mobile 100 with 10 ms of blocking time; 79 KB of HTML plus four 400 by 300 stills cut from the scene.

Build details

Kind: Scene
Plan: Free
Tone: Light
Industries: Wellness and clinics, Beauty, Food and drink
Technique: Particles, Shaders
Built with: Lenis 1.3.27, plain HTML, CSS and one ES module
Looks: 9
Weight: 132 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
Particles (a third on phones, 3,000 at most on the CPU fallback)	`particleCount`	4000 to 60000	24000
Silhouettes (meadow: leaf, seed head, flower; garden: fern, berry sprig, tulip)	`shapeSet`	select: meadow, garden	meadow
Drift (curl noise)	`drift`	0 to 2	1
Attraction (spring toward the silhouette)	`attraction`	0.3 to 2	1
Wind (loose pollen, left to right)	`wind`	-1 to 1	-0.2
Cursor radius (share of the stage half height)	`pointerRadius`	0.05 to 0.5	0.22
Grain size	`spriteSize`	0.5 to 2	1
Silhouette size	`shapeScale`	0.6 to 1.25	1
Backlight bokeh	`bokeh`	0 to 1	0.55
Sunbeam	`sunlight`	0 to 1	0.65
Warmth (straw to vermilion pollen)	`warmth`	0 to 1	0.5
Paper grain	`grain`	0 to 1	0
Paper (page tone; under 0.2 luminance the ink turns light)	`paper`	color	#F3EEE4
Accent (buttons and focus ring)	`accent`	color	#B64A2C
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, 39 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

# Pollen Drift: build prompt

## Role
You are a senior creative front-end developer. Build one self-contained `index.html`: the website of {{BRAND_NAME}}, an invented herbal tea house in {{BRAND_PLACE}} that grows its own herbs. The hero is a GPU particle scene in raw WebGL2 (no 3D library): golden pollen drifts along a warm sunbeam over bone paper, gathers into a leaf, then loosens and gathers into a seed head and a flower as the visitor scrolls a pinned hero, and parts softly around the cursor before springing back. Below it is the page a small tea maker would publish. It must be lovely in daylight, soft and warm, never glitter, the silhouette readable at a glance, and it must look like a company, not a demo.

## Output contract
- `index.html` (one `<style>`, a classic head script, one module) plus four 400×300 transparent WebP stills in `./assets/`: `blend-leaf`, `blend-seed`, `blend-flower` (the page at 480×360, ratio 2, `?capture=1&bare=1&preroll=320`, `set({ bokeh: 0 })`, hero progress .1, .49, .88, one `scrollTo`, transparent screenshot, WebP 62) and `blend-three` (the three side by side). Page under 90 KB, script under 60 KB.
- Import map `{"imports":{"lenis":"https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.mjs"}}`; import it after `load` plus an idle callback, `new Lenis({ lerp: 0.1, smoothWheel: true, autoRaf: false })` driven by your loop; never under capture or reduced motion; read `scrollY` until it exists.
- Fonts: preconnect both Google hosts, one non-blocking link (`media="print" onload="this.media='all'"` plus `<noscript>`): `family={{FONT_DISPLAY}}:opsz,wght@8..30,300;8..30,500&family={{FONT_BODY}}:wght@400;500&display=swap`. Metric matched fallbacks, size-adjust / ascent / descent, line gap 0: Piazzolla from Georgia 88.2 / 125.9 / 35.1%, DejaVu Serif 84.6 / 131.2 / 36.6%, Liberation Serif 107.6 / 103.2 / 28.8%; Work Sans from Arial or Liberation Sans 112.4 / 82.7 / 21.6%, DejaVu Sans 98.8 / 94.1 / 24.6%. Measures in `em`, never `ch`.

[36,400 more characters. Copy the prompt to get all of it.]