Terrane
Conversion landing for a land-intelligence API
Unlock at launch
Join the waitlist for access to this piece. Already a member? Sign in
You're signed in as a member: copy the full prompts, or switch the film to the live preview.
What's inside
- Prompts
- HTML · 436 lines / React · 439 lines
- Media
- Background film · Background image
- Hosting
- cdn.orbital.supply, already in the prompt
- Fonts
- Newsreader + Geologica + JetBrains Mono · Google Fonts
- HTML
- One file · gsap 3.15.0 (ScrollTrigger · SplitText · MotionPathPlugin)
- React
- React 19.3.0 · gsap 3.15.0 · @gsap/react 2.1.2 · Tailwind 4.3.3 · Vite 8.3.2 · TypeScript 7.0.2
- Motion
- scroll-pin, exploded-view, svg-draw, mask-reveal
Tested & documented
04 October 2026
- Reproduced in Claude
- Rebuilt blind from the prompt: HTML and React
- Checked at 375, 390, 768, 1024, 1280, 1440, 1920 px
- Spec linter: 0 errors, no generator links
How to use it
Claude
Paste the HTML prompt into a new chat. You get one index.html to serve over HTTP or publish anywhere.
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 / 439 lines in the full prompt
# Build: "Terrane" — a conversion landing for a fictional land-intelligence API
## 0. Brief
Terrane is a fictional land-intelligence API. The long conversion landing descends from a blue-hour valley with a floating slab of meadow to a dawn valley. It is calm and cartographic, with survey-tape pink #ff4f8b used only for data and terrain cross-sections joining the sections. The "wow": the hero acre returns as a pinned isometric SVG stack that separates into four layers, until a pink request line returns "200 OK in 142 ms".The full prompt unlocks at launch.