N° 0016TemplatePro

Clinic Noir

A full skin clinic site in brass on near black. Gold pollen forms a ginkgo leaf, then lets go as you scroll.

44 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 NoirEach 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 longPlaceAddressPhoneEmailEyebrowHeadlineHeadline, second partSubheadFact oneFact twoFact threeButtonCta linkConsult feeBackground#0F0D0BColor ink#EEE6D8Accent#C9A46ADisplay fontBody font

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

Overview

A whole site for an invented Marylebone skin clinic in brass on near black: gold pollen slowly gathers into a ginkgo leaf beside the headline and lets go grain by grain as you scroll, then a treatments grid that lets in a warm light leak under the pointer, typographic practitioner cards, glass membership plans whose prices roll, a constellation of client notes, a four step first consultation, and a booking card.

Signature momentAbout three seconds in at scroll 0: 22,000 grains of gold pollen have gathered from a mist into a tilted ginkgo leaf with its veins open, lit by a soft shaft from the top right with out of focus discs behind it, beside the headline and the brass booking button.

Pollen that gathers
22,000 particles (a third on phones) in two RGBA32F textures move on the GPU inside a Worker: curl noise drift and a spring (k 7) toward points sampled from a ginkgo, orchid, fern or leaf. Each grain’s spring ramps in over 2.4 s, so a mist along the light becomes a leaf with open veins in about three seconds.
Letting go on scroll
Scrolling the 70svh pin releases each grain at its own moment and lets it rise back along the light at (minus 0.10, 0.22); scrolling back gathers it again. Changing the silhouette keeps the particles and gives them new targets, so the dust flows from one shape into the next.
Light leaks
Eight treatment cells let warm light in from above the pointer: three CSS gradients and 160 px of seeded grain painted in the Worker. The leak is capped per look so lit text keeps 4.7:1, and the cell’s text moves toward the ink as it brightens.
Liquid membership
Three glass plans sit over a ginkgo engraving drawn as one SVG path. The toggle rolls nine digit columns forward one full turn over 0.9 s with a 60 ms stagger, and in Chromium the hovered plan refracts the engraving through a displacement map of up to 46 px.
Client constellation
Eight client notes are the bright stars among 40 on a Canvas 2D sky. Pointing within 180 px draws hairlines to three neighbours and a line of the note; a click flies the camera 700 ms to 1.6 times zoom and opens it, and every note is also a keyboard button.
One colour system
Page, ink and accent drive every surface: muted text is walked to 4.8:1 on both grounds, button labels are picked by contrast, and the sky, glass and leaks are derived, so STRATA.set turns the whole site light or dark live. Nine looks, four of them light.

Build details

Kind: Template
Plan: Pro
Tone: Dark, Light
Industries: Wellness and clinics, Beauty
Technique: Particles, Shaders, Glass refraction, SVG
Built with: Lenis 1.3.27, plain HTML, CSS and one ES module
Looks: 9
Weight: 125 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
Accent (booking buttons, step numerals, constellation lines, the light in the leaks)	`accent`	color	#C9A46A
Page tone (under 0.2 luminance the page is dark; sky, glass and leaks follow)	`page`	color	#0F0D0B
Ink	`ink`	color	#EEE6D8
Hero particles (a third on phones)	`particleCount`	6000 to 48000	22000
Hero silhouette	`heroShape`	select: ginkgo, orchid, fern, leaf	ginkgo
Pollen warmth (champagne to copper)	`warmth`	0 to 1	0.45
Gathering time (seconds)	`gather`	1.5 to 6	2.4
Pollen drift (curl noise)	`drift`	0 to 2	0.8
Pricing glass strength (frost and hover refraction)	`glass`	0 to 1	0.55
Light leak strength (capped per look so lit text keeps 4.7:1)	`leak`	0 to 1	0.7
Grain inside the light leaks	`grain`	0 to 1	0.3
Constellation stars (eight of them are clients)	`starCount`	20 to 90	40
Line reach (pointer distance in px that lights a client)	`lineReach`	60 to 320	180
Section spacing	`spacing`	0.7 to 1.4	1
Corner radius (px)	`radius`	0 to 20	8
Seed (silhouette sampling, sky layout, grain)	`seed`	1 to 99	7

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

The prompt

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

# Clinic Noir: build prompt

## Role
You are a senior creative front-end developer. Build one self-contained `index.html`: the whole site of {{BRAND_NAME}}, an invented skin and aesthetics clinic in a {{PLACE}} mews house, brass on near black, that passes for a real high end clinic when read. Gold pollen gathers slowly into one botanical silhouette in the hero (raw WebGL2 in a Worker) and lets go on scroll; treatment cells let a warm light leak in under the pointer; typographic practitioners; glass membership plans with rolling digits; client notes as a Canvas 2D constellation; first consultation steps; visit and booking; questions; footer. Calm, warm, expensive: space, one brass accent, real numbers; every colour derives from page, ink and accent.

Copy rules: no medical claims, no guaranteed results, no before and after language, no "cure", "fix" or "anti-aging"; say "consultation", "suitability", "talk through options". Injectables appear only as "Injectables consultation with a medical practitioner". Client notes speak of the experience and the staff, never results. No em or en dashes (ranges read "9:00 to 19:00"), sentence case, British spelling.

## Output contract
- One file: `<style>`, a classic head script, the body, one module; no images.
- Import map `{"imports":{"lenis":"https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.mjs"}}`; import Lenis in an idle callback after `load` (`lerp: 0.1, smoothWheel: true, autoRaf: false, anchors: true`, `lenis.raf(now)` in your loop), never under capture or reduced motion. No other libraries or hosts.
- Fonts: preconnect both Google hosts, one non-blocking link (`media="print" onload="this.media='all'"` plus `<noscript>`) for `family=EB+Garamond:wght@400;500&family=Be+Vietnam+Pro:wght@400;500&display=swap`. Metric matched fallbacks (size-adjust, ascent, descent; line gap 0): EB Garamond on Georgia 78.5/128.3/38%, DejaVu Serif 74/136.1/40.3%, Liberation Serif or Times New Roman 94.3/106.8/31.6%; Be Vietnam Pro on Arial, Liberation Sans or Arimo 110.5/90.5/24%, DejaVu Sans 96.5/103.6/27.5%, each listed after the web font.

[41,662 more characters. Copy the prompt to get all of it.]