Altitude
A vertical climb narrative - the page is one long ascent where altitude markers, type and footage respond to scroll depth, ending on a summit reveal. Built from our Ascent client work; the motion makes the visitor feel the gain in elevation.
What is included: the altitude-driven progress system, parallax footage bands, type that thins and cools as you climb, the summit reveal choreography, and a compact version for a single section instead of a full page.
Customize it: works for any progression story - a climb, a product roadmap, a founder journey. Set the start/end labels and the number of stations.
Build a vertical climb page called "Altitude" - the whole page is one gain in elevation, and the visitor feels it. Structure: a 600vh journey. A fixed altitude rail on the right edge: current altitude ticks up with scroll (count from my start value to my summit value, formatted with thin spaces), with a 1px track and a moving marker. Give me start/end labels and 4-6 "stations" as an editable array at the top. Footage bands: between stations, full-bleed media bands parallax at different rates - each band's inner media translates at 0.82x scroll inside an overflow-hidden frame (transform only, no background-attachment). Bands get progressively cooler and thinner air: apply a per-station color grade via a CSS filter custom property that interpolates (warm saturate(1.1) at base, cooler saturate(0.85) hue-rotate(-6deg) near summit). Type responds to altitude: station headings use a variable font axis (or weight steps as fallback) - heavier and warmer at the bottom, lighter and more tracked at the top. Station rows reveal with rise-and-unblur scroll-timeline animations, static fallback included. Summit: the final 100vh pins; the last clip fades to a near-white sky tone, altitude rail completes, and the summit line lands in large serif with a 1.4s staggered reveal, then the CTA. Also include: a compact variant of the same system scoped to a single 300vh section (for dropping into an existing page), reduced-motion behavior (no parallax, instant grades), and video tiles that pause offscreen. Ground #0d0906 at base lightening toward #1a1d22 at summit, text #f0dfc6. One HTML file, embedded CSS, vanilla JS (GSAP optional - prefer without).
Got a result that looks close but not quite? That gap is taste.
The course teaches exactly that - the eye behind these prompts. Here is how we teach it →
How to use it
- Copy the prompt and paste it into Claude, Cursor or any AI coding tool - current models give the best results.
- Replace the marked tokens (colors, copy, media file names) before you run it.
- Run it, open the result in a browser, then iterate in small steps - one change per message.
Customize it
- Palette and type live in the token block at the top of the prompt - change those first, nothing else.
- Keep the motion values as written on the first pass; tune them only after you have seen the default.
- Swap media last, matching the aspect ratios the prompt names.
