Silk Mesh
N° 0007A silk gradient fills the first screen, a woven sheen follows your cursor, and the page slides over the cloth on scroll.
Halation
Soft lights ringed in red halation drift over film grain. The key light eases toward your pointer and scrolling cools the palette.
Source files, Studio plan
36 KB of text that builds one HTML file. Paste it into Claude Code, Cursor or v0 to rebuild this page.
Loading the layer
LooksShowing Linden 160Each 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 remix is a Pro feature at launch. It is open in the preview.
Overview
A film gradient hero for an invented Leeds film lab: two to four soft lights drift over a film base with a red halation bloom at their edges, a streaky light leak enters from the right, fine emulsion grain changes every frame, and scrolling cools the palette and lowers the exposure until the page below reads clean.
Signature momentScroll 0 with the pointer just right of centre: the key light eased toward it on a heavy spring, its edge ringed in red halation, the leak streaking in from the right edge, grain across the cream.
The lights
Two to four soft ellipses over a film base, each exp(-(d²)^1.3 × 1.7) with a flat middle and a defined soft edge; the key light is 0.24 to 0.36 of the frame height across and sits right of centre, the others roam. Each drifts 2.5 to 6% of the frame on Lissajous paths with 16 to 34 s periods.
Halation
Only the lights bloom: their luminance is thresholded at 0.35, blurred by a 9 tap gaussian at a quarter of the canvas (1.7 texel steps) and again at an eighth (2.2 texels), then added back at 1.3 and 1.0 times in a red to orange tint, so the bleed sits at the brightest edges and never fogs a light look.
Light leaks
A streaky band enters from the right edge, reaching 30 to 45% of the width, with streaks at 46 and 19 cycles that slide at 0.21 and 0.12 rad/s and a band that breathes on 70 and 90 s periods; a softer wedge comes down from the top. Red at the fringe, orange in the core; the low quality tier keeps one of them.
Grain and gate weave
A per pixel integer hash reseeded every frame, amplitude 0.3 × grain × (0.4 + 0.6 × (1 minus luminance)), with the blue layer drawn from its own pattern so the speckle has colour. The whole frame weaves by 0.55 and 0.4 device pixels on 4.3 and 3.4 s periods; the grain stays put.
Pointer and scroll
The key light follows the pointer on a heavy spring (k 8, damping 1.15 times critical, up to 16% of the frame) and eases back when it leaves. Half a viewport of pin cools the palette by 30%, drops exposure to 62% and fades the copy from halfway, so the price table slides up over a quiet plate.
Nine stocks, 49 KB
Linden 160, Tallow 400, Harbour 100, Lantern 800, Harrow 1600, Cellar 200, Kestrel 100, Pitch 400 and Alder 50: five light pages, four dark. Raw WebGL2 run in a worker on an OffscreenCanvas, so context creation and shader compiles never block the page; one 49 KB file, Lenis the only library.
Build details
- Kind
- Gradient
- Plan
- Pro
- Tone
- Light, Dark
- Industries
- Portfolio, Agency, Beauty
- Technique
- Shaders
- Built with
- Lenis 1.3.27, plain HTML, CSS and one ES module
- Looks
- 9
- Weight
- 49 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 |
|---|---|---|---|
| Film base | base | color | #D5C3A6 |
| Key light | light1 | color | #FFF4E2 |
| Second light | light2 | color | #F2C690 |
| Third light | light3 | color | #E3BFB3 |
| Halation colour | halation | color | #FF3D12 |
| Halation | halationAmount | 0 to 2 | 1.35 |
| Light leak colour | leak | color | #FF8A3A |
| Light leaks | leakAmount | 0 to 1.5 | 0.75 |
| Grain | grain | 0 to 1 | 0.35 |
| Drift speed | drift | 0 to 2 | 1 |
| Exposure | exposure | 0.6 to 1.4 | 0.98 |
| Vignette | vignette | 0 to 1 | 0.32 |
| Lights | shapes | 2 to 4 | 3 |
| Seed | seed | 1 to 9999 | 7 |
| Page | page | color | #F4EFE6 |
| Accent (buttons) | accent | color | #B5472B |
Something wrong with this layer? Report a problem and we fix it in the next version.
The prompt
One text file, 36 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: the film gradient
- 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
# Halation: build prompt
## Role
You are a senior creative front-end developer. Build one self-contained `index.html`: the website of {{BRAND_LONG}}, an invented film lab in {{BRAND_PLACE}}. The hero is a full viewport film gradient in raw WebGL2, written from scratch: two to four large soft lights drift over a film base, a red halation bloom bleeds outward from their brightest edges (a separable blur of a thresholded luminance pass at quarter resolution, added back on top), streaky light leaks enter from the right and top edges, fine emulsion grain changes every frame with the blue layer offset, a slight vignette, and the frame weaves by under a pixel like film through a gate. The pointer eases the brightest light toward itself on a heavy spring. The hero is pinned for half a viewport while the palette cools and the exposure drops so the page below reads clean. Real text sits over the gradient with a measure. Around it, the page the lab would publish. It must look like light on film, not a filter: restrained saturation, halation only at the brightest edges, grain visible but fine, no rainbow gradients. It must read as a company's site, not a demo.
## Output contract
- One file `index.html`, no build step, no framework: plain HTML, one `<style>`, one `<script type="module">`. Under 120 KB; no images; the only library is Lenis.
- Import map with one exact version: `"lenis": "https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.mjs"`. `import('lenis')` after `load` and an idle callback (`new Lenis({ lerp: 0.1, smoothWheel: true, autoRaf: false })`, driven by your rAF with `lenis.raf(now)`); ignore failures; skip it under `?capture=1` and reduced motion; read `scrollY` until it resolves.
- Fonts: preconnect to both Google Fonts hosts, one link, non-blocking (`media="print" onload="this.media='all'"`, a `<noscript>` copy), `display=swap`: `{{FONT_DISPLAY}}:wght@300;400;500` and `{{FONT_BODY}}:wght@400;500`. Two metric matched local fallbacks so copy does not reflow:
[33,483 more characters. Copy the prompt to get all of it.]More layers
Tidal Glass
N° 0022An underwater scene that rises through the surface as you scroll.
Ledger Swiss
N° 0021A full finance site on a strict twelve column grid. A bronze arch rises from liquid metal and bristles near your pointer.