Thread Process
N° 0008A hand drawn thread sews itself down through the process steps as you scroll, and each node flares like a struck match.
Quote Constellation
Ten customer quotes shine as stars. Point at one for a line, or click and the camera flies in to open it.
Source files, Studio plan
35 KB of text that builds one HTML file. Paste it into Claude Code, Cursor or v0 to rebuild this page.
Loading the layer
LooksShowing NightEach 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
Ten customer quotes sit in a quiet canvas sky as the brighter stars; pointing near one draws hairlines to its neighbours and shows a line of the quote, and a click flies the camera to it and opens the whole quote beside it.
Signature momentThe camera settled on one star at 1.6 times zoom, three hairlines to its neighbours, and the full quote open on the right with a leader line back to the star.
The sky
A seeded Canvas 2D field of 24 to 80 stars on two depth layers behind ten brighter ones, the customers. One mulberry32 seed places everything, so the sky is the same on every visit and every device.
Hover lines
Within 180 px of a bright star, three 1 px hairlines in the accent at 26% opacity fade in over 300 ms to its nearest stars, the far ends brighten, and one line of the quote appears in the serif beside the star.
The flight
A click pans and zooms the camera 1.6 times in 700 ms on an ease out expo, parks the star at 34% across, and opens the whole quote in a panel with a leader line back to the star. Escape or a click on empty sky flies back.
Keyboard and touch
The ten customers are focusable buttons in a visually hidden list that drives the same lines, preview and flight, with a 13 px focus ring drawn on the canvas. On phones a 48 px tap opens the quote as a bottom sheet.
Nine looks
Night, Dawn, Overcast, Indigo, Ember, Sparse, Dense, Harbour and Dusk change the sky from near black to a pale dawn, with 24 to 80 stars, reach from 120 to 300 px and drift from 0.2 to 0.8. Three sit on a light page.
A customers page around it
A short hero with a price, a numbers table of four hairline rows, a start free band with a one field form and a four group footer. 46 KB of HTML with no images; Lighthouse mobile 100 / 100 / 100.
Build details
- Kind
- Section
- Plan
- Pro
- Tone
- Dark, Light
- Industries
- SaaS, Agency, Hospitality and travel
- Technique
- Particles
- Built with
- Lenis 1.3.27, plain HTML, CSS and one ES module
- Looks
- 9
- Weight
- 46 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 |
|---|---|---|---|
| Stars in the frame | starCount | 24 to 80 | 44 |
| Layout seed | seed | 1 to 9999 | 7 |
| Star size | starScale | 0.6 to 1.6 | 1 |
| Twinkle | twinkle | 0 to 1 | 0.4 |
| Pointer drift | drift | 0 to 1 | 0.5 |
| Line reach (px) | lineReach | 80 to 320 | 180 |
| Line opacity | lineStrength | 0.1 to 0.4 | 0.26 |
| Faint lines at rest | restLines | boolean | False |
| Fly in zoom | flyZoom | 1.2 to 2.2 | 1.6 |
| Accent | accent | color | #E8B86D |
| Sky | sky | color | #0B0D12 |
| Horizon | horizon | color | #12151D |
| Page | page | color | #0B0D12 |
| Ink | ink | color | #ECE8E0 |
| Star tone | starTone | color | #F4EFE4 |
Something wrong with this layer? Report a problem and we fix it in the next version.
The prompt
One text file, 35 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
- The sky
- 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
# Quote Constellation: build prompt
## Role
You are a senior creative front-end developer. Build the layer below as one self-contained `index.html`: the customers page of {{BRAND_NAME}}, a small company that makes front desk software for independent hotels, guesthouses and hostels. The page is a real page, not a demo: a fixed header, a short text hero, then the section this layer is about, a full viewport canvas sky in which ten customers are the brighter stars. Pointing near one of them draws three hairlines to its nearest stars and shows one line of what that customer said; clicking flies the camera to the star (pan and zoom, 700 ms) and opens the whole quote in a panel beside it, with a leader line back to the star. Below the sky: a numbers section, a start free band with a one field form, and a four group footer. Canvas 2D only, no WebGL; Lenis is the only library. The feel is a quiet night: few stars, real darkness, hairlines at a quarter opacity, one warm accent.
## Output contract
- One file `index.html`, no build step, no framework, no GSAP: plain HTML, CSS and one ES module. Under 60 KB.
- 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 first frame (ignore failures); not under `?capture=1` or reduced motion. Drive it from the same rAF loop (`lenis.raf(now)`, `autoRaf: false`).
- Fonts: one Google Fonts link after the two preconnects, non-blocking (`media="print" onload="this.media='all'"`, a `<noscript>` copy), `display=swap`: `Spectral:wght@300;400;500` and `Host+Grotesk:wght@400;500`. Two local fallback faces so nothing reflows when the web fonts land: `'Spectral Fallback'` = local Times New Roman or Liberation Serif with `size-adjust: 107.9%; ascent-override: 98.2%; descent-override: 42.9%; line-gap-override: 0%`; `'Host Fallback'` = local Arial, Liberation Sans or Helvetica with `size-adjust: 105%; ascent-override: 96.7%; descent-override: 30%; line-gap-override: 0%`.
[32,482 more characters. Copy the prompt to get all of it.]More layers
Liquid Pricing
N° 0003Three glass pricing cards turn liquid under your cursor. Switch to yearly and every digit rolls like an odometer.
Magnet Marquee
N° 0002Rows of invented client logos drift between fine field lines, bend away from your pointer and spring back into rhythm.