Halation
N° 0011Soft lights ringed in red halation drift over film grain. The key light eases toward your pointer and scrolling cools the palette.
Silk Mesh
A silk gradient fills the first screen, a woven sheen follows your cursor, and the page slides over the cloth on scroll.
Source files, Studio plan
39 KB of text that builds one HTML file. Paste it into Claude Code, Cursor or v0 to rebuild this page.
Loading the layer
LooksShowing SilkEach 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 domain warped silk gradient fills the first screen of a textile house's page; a woven sheen follows the cursor on a spring, and the page slides over the cloth as you scroll.
Signature momentThe light pool at right of centre throwing long satin streaks along the drape, with the headline on the calm side of the cloth.
The cloth
A 2 KB WebGL2 fragment shader: two smooth noise fields warp the domain, a third draws the folds at 2.3 times their frequency, and analytic derivatives carried through the warp give an exact surface normal with no extra taps.
The sheen
Per pixel anisotropic lighting: a Kajiya-Kay lobe along the warp thread, a weaker one along the weft, a Blinn-Phong lobe on the fold crests, and a thread grain every 4 device pixels that modulates the highlight so the sheen carries the weave.
The light
A point light 0.79 screen heights above the cloth follows the cursor on a spring (k 26, one soft overshoot, about 0.6 s to settle) and drifts on a 13 by 17 second path when nobody is pointing.
Nine looks
Silk, Oil, Dusk, Mineral, Paper, Ink, Brass, Glacier and Night: four light pages and five dark, each with its own four cloth colours, drape scale, relief, gloss and pool size. A colourway row in the hero switches between the looks of the current tone live.
A textile house underneath
The page slides over the pinned silk: eight CSS only fabric swatches with weights and prices per metre, the atelier with a satin weave diagram and an eight row specification table, five stockists and an appointment form.
Contrast at rest
Every look was measured behind each text block at 1440 by 900 and 390 by 844: small text keeps 4.5 to 1 or better against the cloth in all nine, with the light pool kept to the right of the copy on desktop and in the top band on phones.
Build details
- Kind
- Gradient
- Plan
- Free
- Tone
- Light, Dark
- Industries
- Beauty, Agency, Wellness and clinics
- Technique
- Shaders
- Built with
- Lenis 1.3.27, plain HTML, CSS and one ES module
- Looks
- 9
- Weight
- 41 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 |
|---|---|---|---|
| Cloth colour 1 | color1 | color | #F3E4D8 |
| Cloth colour 2 | color2 | color | #E0BDB0 |
| Cloth colour 3 | color3 | color | #C49A8C |
| Cloth colour 4 | color4 | color | #F8F1E9 |
| Ink over the cloth | ink | color | #2A2220 |
| Accent (buttons, focus ring) | accent | color | #8F4B3C |
| Page below the hero | page | color | #F6F1EB |
| Domain warp | warp | 0 to 2.5 | 1.3 |
| Fold scale | scale | 0.5 to 3 | 1 |
| Fold depth | relief | 0 to 1 | 0.65 |
| Thread grain | weave | 0 to 1 | 0.5 |
| Sheen strength | sheen | 0 to 1 | 0.85 |
| Sheen sharpness | gloss | 0 to 1 | 0.68 |
| Light spread | spread | 0 to 1 | 0.6 |
| Idle flow speed | flow | 0 to 1 | 0.5 |
| 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
# Silk Mesh: build prompt
## Role
You are a senior creative front-end developer. Build the layer below as one self-contained `index.html`: the home page of {{BRAND_NAME}}, a small textile house in {{PLACE}} that weaves silk to order. The first screen is a length of silk rendered live in a 2 KB WebGL2 fragment shader: a domain warped mesh of four colours lit as woven cloth, with a per pixel anisotropic sheen along the warp and weft, long folds, a thread grain, and a light that follows the cursor on a spring and drifts slowly on its own. Real copy sits on the calm side of the cloth. The page below slides over the pinned silk and holds what a textile house publishes: a collection grid with CSS only swatches, the atelier and a specification table, stockists with an appointment form, a four group footer. Nine looks change cloth, page tone and light together; a colourway row switches between the looks of the same tone live. It must read as a real company's site, not a demo.
## Output contract
- One file `index.html` plus two small first-paint images in `assets/` (`pre.webp` 640 × 400 and `pre-m.webp` 300 × 650, text-free renders of the default look, about 3.5 KB each; if you cannot render them, leave the `<picture>` out and the CSS gradient does the job). No build step, no framework: plain HTML, CSS and one ES module. No libraries except Lenis.
- 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 the shader starts (ignore failures), `new Lenis({ lerp: 0.1, smoothWheel: true, autoRaf: false })`, driven from the layer's own `requestAnimationFrame` loop with `lenis.raf(now)`. Not loaded under `?capture=1` or reduced motion.
- Fonts: one Google Fonts link after two preconnects, non-blocking (`media="print" onload="this.media='all'"`) with a `<noscript>` copy, `display=swap`: `Cormorant+Garamond:wght@300;400;500` and `Albert+Sans:wght@400;500`. Two metric matched local fallbacks so copy does not reflow when the web fonts land:
[36,974 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.