Desire Path

What's inside

Prompts

HTML · 543 lines / React · 562 lines

Media

Background image · WebGL scene · Canvas

Hosting

cdn.orbital.supply, already in the prompt

Fonts

Wix Madefor Display + Wix Madefor Text + DM Mono · Google Fonts

HTML

One file · gsap 3.15.0 + ScrollTrigger (jsDelivr) · lenis 1.3.26 (jsDelivr) · desire-engine-v1 (CDN ES module)

React

react 19.3.0 · vite 8.3.2 · typescript 6.0.3 · tailwindcss 4.3.3 · gsap 3.15.0 (+ ScrollTrigger) · @gsap/react 2.1.2 · lenis 1.3.26 · desire-engine-v1 (CDN ES module)

Motion

grain-reveal, printed-headline, route-draw, pointer-lens

Tested & documented

14 October 2026

• Reproduced in Claude
• Checked at 375, 768, 1440, 1920 px
• Spec linter: 0 errors, no generator links

How to use it

1. Claude

   Paste the HTML prompt into a new chat. You get one index.html to serve over HTTP or publish anywhere.

2. Vite + React

   Open an empty Vite + React project and paste the React prompt. It lists the exact packages; the asset URLs are already inside.

The prompt

Excerpt / 562 lines in the full prompt

# Build: "Desire Path" — a product studio site printed in film grain, from an idea to working software

## 0. Brief

Desire Path is a fictional product studio that takes an idea to working software in six weeks. A desire path is the line people tread across grass when the paved route takes too long; the page is that path. One WebGL engine prints every photograph and painting live as coloured grain. The grain gathers into the opening meadow and prints the headline. It dissolves four paintings of one valley into each other and splits an aerial view into idea (rough grain) and software (clean). Full-bleed scenes alternate with pale editorial sheets that slide over the chapter before them. A surveyor's frame, mono chips and lichen calls to action hold it together, and it ends on a sage footer with wildflowers. Calm, grounded, exact.

The full prompt unlocks at launch.