N° 0019TemplatePro

Launch Orchard

A full launch site for a developer tool. A lit field parts into a lane toward the sign up 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 CoralEach 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 nameCompanyPlaceEyebrowHeadline strongHeadlineSubheadButtonLinkQuoteQuote nameQuote roleBackground#0E0D0CColor ink#EEEAE4Accent#FF7A59Display fontBody fontFont code

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

Overview

A whole launch site for Leat, an invented deploy previews and feature flags tool: a night field of 12,000 lit stems parts into a lane that runs to the sign up as you scroll, invented customer logos drift between field lines and part around the pointer, six product cells play small live demos, glass plans roll their prices, and a dated changelog, questions and a sign up close the page.

Signature momentMid pin: the lane has opened through the coral lit field toward the vanishing point under the email field and Start free, and a pulse lights both banks.

The field and its lane
12,000 fibre stems (3,000 on phones) drawn in two instanced calls inside a Worker sway in two octaves of wind. Scrolling the 100svh pin parts them into a lane whose front runs out to 50 units and ends under the email field, while pointer pulses cross the field at 2.6 units a second.
Logos that part
Ten invented customers, drawn as one family of 20 unit glyphs, drift at 34 px a second between three hairline field lines. Within 170 px of the pointer, or of a slow ghost when nobody points, each mark rides a k 140 spring, tilts up to 7 degrees and the lines bend around it.
Six live cells
A command bar that types at 85 ms a key, a status check that runs from queued to ready in 3.9 s, a diff, a 60 sample sparkline that draws in over 1.6 s, a rollback and a flag switch. Each plays once when 40 per cent of it is on screen, then rests; the last two also work from the keyboard.
Glass plans that roll
Three frosted plans sit over a hairline still of the field. Yearly rolls each digit forward a full turn plus the distance in 0.9 s with a 60 ms stagger, and in Chromium the hovered plan refracts the still through a displacement map of up to 46 px.
A changelog on a rail
Six releases, all shipped on a Tuesday, from 0.17.0 in August to 1.0.0 on 3 November. When a fifth of the list is on screen the rail draws down over 1.3 s and the rows arrive 110 ms apart.
One colour system
Page, ink and accent drive every surface: muted text is walked to 4.6:1 on the raised panels, accent text on its own tint, and button labels are picked by contrast, 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: SaaS, AI and tech
Technique: Particles, WebGL 3D, Physics, Glass refraction, SVG
Built with: Lenis 1.3.27, plain HTML, CSS and one ES module
Looks: 9
Weight: 127 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 (stem tips, buttons, one highlight per section)	`accent`	color	#FF7A59
Page tone (under 0.2 luminance the page is dark)	`page`	color	#0E0D0C
Ink (walked to 7:1 on the page if it falls short)	`ink`	color	#EEEAE4
Hero ground (night keeps a dark field on a light page)	`heroTone`	select: night, page	night
Stems in the hero (3,000 on phones)	`stemCount`	3000 to 20000	12000
Wind	`wind`	0 to 2	0.8
Pulse speed	`pulseSpeed`	0.3 to 3	1
Lane width	`laneWidth`	0.3 to 1.2	0.55
Logo drift speed	`marqueeSpeed`	0.2 to 2.5	1
Logo repel radius (px, 0.55 of it on phones)	`repelRadius`	60 to 320	170
Glass strength (frost and hover refraction on the plans)	`glass`	0 to 1	0.6
Product cells play their demos	`bentoMotion`	boolean	True
Corner radius (px)	`radius`	0 to 20	10
Section spacing	`spacing`	0.7 to 1.4	1
Grain in the hero ground	`grain`	0 to 1	0
Seed (field, logo order, stills, sparkline)	`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

# Launch Orchard: build prompt

## Role

Build the launch homepage of {{BRAND_NAME}}, an invented tool that gives every pull request a live preview and keeps every feature behind a flag, for product teams of two to forty, as one self contained `index.html` that passes for a real, well funded product's site. It joins three of our published layers and new parts: a hand written WebGL2 night field of fibre stems that sway, ring with light under the pointer and part into a lane ending under the sign up form as you scroll (Signal Orchard); invented customer logos drifting between field lines that part around the pointer (Magnet Marquee); six product cells, each a small live demo; a quote; three glass plans whose digits roll between monthly and yearly (Liquid Pricing) with a comparison table; a changelog; questions; a sign up; a four group footer. Forms answer in place and send nothing.

## Output contract

- One `index.html`: a `<style>`, a head `<script>` (colour maths, first paint variables), the presets JSON, a `<script type="module">` closing the body. No images, frameworks, Three.js, GSAP or bundler; requests only to Google Fonts and jsDelivr.
- Import map `{"imports":{"lenis":"https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.mjs"}}`; after the scene boots (never under capture or reduced motion) `import('lenis')`, `new Lenis({ lerp: 0.1, smoothWheel: true, autoRaf: false })`, driven by `lenis.raf(now)` in the page loop.
- Fonts, non blocking: `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300;500&family=Funnel+Sans:wght@400;500&family=Spline+Sans+Mono&display=swap" media="print" onload="this.media='all'">` plus a `<noscript>` copy and preconnects. {{FONT_DISPLAY}} 300 and 500 for headings, prices and logo words; {{FONT_BODY}} 400 and 500 for text; {{FONT_CODE}} only inside the command bar, the diff, hashes and flag keys. Metric matched fallbacks, verbatim:

```css
@font-face{font-family:'Funnel Display Fallback';src:local('Arial'),local('Liberation Sans');size-adjust:104.7%;ascent-override:95.5%;descent-override:23.9%;line-gap-override:0%}

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