N° 0008SectionPro

Thread Process

A hand drawn thread sews itself down through the process steps as you scroll, and each node flares like a struck match.

34 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 LinenEach 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 placeEyebrowHeadline strongHeadlineSubheadButtonProcess titleProcess introBackground#F3EFE7Text#1B1917Color thread#B8432BAccent#B8432BDisplay fontBody font

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

Overview

A sticky four to six step process for an invented bindery: one hand drawn thread sews itself down through the step nodes as you scroll, each node ignites like a struck match when the thread reaches it, and that step's card reveals line by line.

Signature momentThe thread arriving at the fourth node: the match flare lifts off the ring while the step's two lines and its fact settle in beside it.

The thread
One SVG path, 1.5 px, through every step node: a Catmull-Rom spline over seeded waypoints with 15 to 30 px swings and a tension that drifts per segment, so it reads as a hand and not a plotter. Nine seeds, nine different threads.
Drawn by scroll
stroke-dasharray draws it from 3% to 93% of a sticky section that is one viewport per step plus one. The thread chases the scroll with a lag you set (drawLag 0 to 1), so a fast scroll leaves it sewing for a beat.
The match
When the thread passes a hole the node ignites: a 5.5 px core pops in 60 ms, a flame shaped halo lifts 7 px and fades over 420 ms, one spark rises 16 px, then a 1 px ring with a dot stays lit. flareIntensity 0 to 1.5.
Line by line
Each step card is two sentences and a fact. They arrive 70 ms apart (40 to 120), each over 400 ms on an ease out expo, and leave in 160 ms if you scroll back up.
Four, five or six steps
steps rebuilds the rows, the section height and the thread; the page copy for six bindery steps is in the DOM and the label reads Step 4 of 6 in plain words. On phones the band stays and the rows slide under it.
Nine looks, 45 KB
Linen, Night Shift, Unbleached, Indigo, Graphite, Oxblood, Chalk, Moss and Quarto change page tone, thread colour, step count, spacing and flare. One HTML file, no images, no canvas, Lenis the only library.

Build details

Kind: Section
Plan: Pro
Tone: Light, Dark
Industries: SaaS, Agency, Education
Technique: SVG
Built with: Lenis 1.3.27, plain HTML, CSS and one ES module
Looks: 9
Weight: 44 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, 14 of them, all live through DUSKLAYER.set()

Control	Key	Range	Default
Steps	`steps`	4 to 6	6
Thread colour	`threadColor`	color	#B8432B
Thread width (px)	`threadWidth`	1 to 2.5	1.5
Flare intensity	`flareIntensity`	0 to 1.5	1
Thread swing between holes	`swing`	0 to 1	0.7
Hand wobble	`wobble`	0 to 1	0.6
Seed	`seed`	1 to 9999	7
Thread lag behind the scroll	`drawLag`	0 to 1	0.45
Line stagger (ms)	`revealStagger`	40 to 120	70
Row spacing	`spacing`	0.8 to 1.6	1.4
Node size (px)	`nodeSize`	8 to 16	12
Page	`page`	color	#F3EFE7
Ink	`ink`	color	#1B1917
Accent (buttons)	`accent`	color	#B8432B

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

The prompt

One text file, 34 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 thread
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

# Thread Process: build prompt

## Role
You are a senior creative front-end developer. Build one self-contained `index.html`: the website of {{BRAND_NAME}}, an invented bindery in {{BRAND_PLACE}} that prints, folds, sews and cases books for publishers, museums and studios. The centrepiece is a sticky process section. One hand drawn thread (a single SVG path, 1.5 px) sews itself down through four to six step nodes as the visitor scrolls. When the thread reaches a node the node ignites like a struck match (a hot core, a flame shaped halo that lifts and fades in 420 ms, one spark) and settles to a 1 px ring with a dot, while that step's card reveals line by line (400 ms ease out expo per line, 70 ms apart). The left column holds the section heading and the current step's title; the right column holds the step rows. Around it, the page a real bindery would publish: a header, a short text hero, a commissions table with real looking numbers, a start a book band with prices and lead times, and a four group footer. Pure DOM, SVG and `requestAnimationFrame`; no canvas, no WebGL, no library except Lenis for smooth scroll. It must read as a company's site, not a demo.

## Output contract
- One file `index.html`, no build step, no framework: plain HTML, CSS in one `<style>`, and one `<script type="module">`. Under 120 KB; no images.
- 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 first paint (`new Lenis({ lerp: 0.1, smoothWheel: true, autoRaf: false })`, driven by your own rAF with `lenis.raf(now)`); ignore failures; skip it entirely under `?capture=1` and reduced motion. Until it resolves, read `scrollY`.
- Fonts: preconnect to `fonts.googleapis.com` and `fonts.gstatic.com`, then one Google Fonts 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 when the webfonts land:

[31,058 more characters. Copy the prompt to get all of it.]