Loading…
Live page · scroll inside
FreeDeveloper tools / SaaS · dark · landing page · three.js · gsap · lenis · html
Orbital
A developer-tools landing page in deep navy: a fake deploy log plays as the loader, a three.js dotted globe spins beside the headline while arcs draw themselves between fourteen cities and ping latency labels where they land, a terminal types three commands as it scrolls in, feature cards carry a pointer spotlight, latency bars race, and pricing ends on a gradient headline.
What's inside
- 01Deploy-log loaderLines fade up in sequence, then the cover fades.
- 02Blurred navLinks brighten on hover.
- 03Headline + globeLines rise from masks; the globe fades in, spins, leans with the pointer and draws arcs that ping labels until the pause button freezes the spin and the launches; counters count.
- 04Customer rowNone.
- 05Typing terminalCommands type with a cursor, output appears line by line, the step list follows.
- 06Spotlight cardsCards rise in; a radial spotlight follows the pointer inside each.
- 07Latency benchmarkBars grow from the left in sequence.
- 08Three plansPlans rise in.
- 09Ship to the whole planetLines rise from masks.
- 10Footer stripNone.
Utility pages in the same file: 404 · Style guide · Password · Changelog
How to use it
From prompt to a live page.
- 01Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
- 02Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
- 03Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
- 04Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
- 05Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.
