08Marketing website
RouteRush website
Scroll, and a live 3D map flies you from the globe down to claimed city streets, in six languages.
- Role
- Design, copy and build
- Live since
- August 2026
- Languages
- Six, from one English source
- Build step
- None: one hand-written page
In short
routerushapp.com is where new runners meet RouteRush. As you scroll, a live 3D map flies from space down to a city covered in claimed streets while the page explains territory, the AI coach and the weekly leagues. It is one hand-written page with no build step, it speaks the app's six languages, and it answers the questions people ask search engines and AI assistants.
An app launch needs a page that makes the idea click in one scroll, in every language the app speaks.
It also has to load fast on a phone, answer the questions people type into search engines and AI assistants, and never promise something the app does not do. A framework and a build pipeline would have been overhead for one page, so the site is a single self-contained document with every asset accounted for.
What it does
Fly in by scrolling
The hero is a live Mapbox map in the app's own night style. Your scroll position drives the camera from a globe down to the streets of Turin, covered in claimed territory, and the short lines under the headline change along the way.
Never stuck on a loading screen
A short veil flies the route once, hidden, so the map is already loaded when the dive starts. Every wait has a time limit, and reduced motion, data saver or no WebGL get a still poster with the same words.
Six languages, one source
English is the only hand-written version. A Python build generates Turkish, Italian, German, Spanish and French pages, each with its own address and language links, and stops when an English line has changed, so no translation quietly goes stale.
Liquid Glass navigation
The navigation capsule bends the page passing beneath it with a real refraction map in Chromium and falls back to frosted glass elsewhere. Reduced motion, reduced transparency and higher contrast are all respected.
Answers for search and AI assistants
An FAQ whose structured data matches the visible text word for word in all six languages, a description of the app and its maker for search engines, and robots rules that invite indexing and AI answers.
Share links that open the app
Runs and profiles shared from the app get a real preview page with a title, an image and buttons to open RouteRush or get it. A small worker serves it; it holds no credentials and never looks up the run.
Design and build
Fethi designed and built the site with Claude Code: the scroll-flown map, the glass interface, the staged territory on the map, the locale build, the share-link worker, and the copy, checked against what the app actually ships.
Three small systems behind one page. None of them touches the app's own services.
How the scroll flies the map
Scrolling is the only control. Hover or tab through the parts.
What each part does
- Reduced motion, data saver or no WebGL
- Visitors who asked for less motion or less data, or whose browser has no WebGL.
- Map camera on a measured flight path
- The map camera follows a flight path whose pacing was measured, and glides toward the scroll position, so a fast flick eases instead of jumping.
- Copy under the headline
- The short lines under the headline change at fixed points of the flight: record, conquer, hold it.
- Still poster, same words
- A still picture of the final view, with exactly the same words.
- One progress value
- Scroll position turned into one number from 0 to 1 that everything else reads.
- Your scroll position
- The page's ordinary scroll; nothing hijacks it.
- Map tiles already loaded
- Every zoom level the dive passes through is cached before the visitor sees it. If anything stalls, a time limit reveals the page anyway.
- Loading veil
- A brief loading veil that flies the whole path once, out of sight.
Six languages from one source
One command regenerates every translated page. Hover or tab through the parts.
What each part does
- Python locale build
- A Python script that swaps text only where a visitor reads it: never inside scripts or styles, and only in the copy fields of the structured data.
- Translations, keyed by the English text
- One file per language, each line keyed by the English sentence it translates, so a reviewer reads them without touching the page.
- English pages, the only source
- The home page and the FAQ, written and edited in English only.
- Sitemap with every language
- The sitemap, regenerated with every language version of every page.
- Five translated sites
- Turkish, Italian, German, Spanish and French versions of the home page and the FAQ.
- Build stops and names the line
- If an English sentence has changed, its translations are stale. The build refuses to write and names the sentence.
- Own address, language links and preview tags
A shared run, end to end
What happens when a runner shares a run from the app.
1 of 5
A runner shares a run from the app.
Runner → Friend: Shares a run from the app
All 5 steps as text
What each part does
- Runner
- Friend
- Share-link worker
- Static site
Decisions and trade-offs
A live map, not a video
Two rounds of a pre-rendered frame sequence, the second with 320 frames paced by visual change, still felt like a slideshow, so the hero became the real map flown live. The trade-off: the page now loads map tiles at runtime.
One page, no build step
Inline CSS and JavaScript and one vendored map library. Nothing to compile, and nothing loads that the page did not ask for; a strict content policy in the document itself blocks anything else.
A brand font cut to one word
The brand script is 1.44 MB; the page sets only the word RouteRush in it. The cut-down file is 95 KB and renders pixel-identical at 1x, 2x and 3x. Before, the wordmark sat in a fallback font for 38 seconds on a throttled phone.
Images sized for the screens that show them
App screenshots were re-encoded for 3x iPhone displays instead of shipping almost five times the pixels any screen uses: 393 KiB lighter, with no visible change at display size.
Changes proven pixel-neutral
A golden harness renders 31 frozen frames across two viewports and fails on a single differing pixel, so performance work cannot quietly change the design.
Copy checked against the app
The page's claims were audited against the shipped app's code. Where the code said otherwise, the page was corrected rather than the claim kept.
Results
- 6languages from one English source
- 95 KBbrand font, down from 1.44 MBpixel-identical at 1x, 2x and 3x
- −393 KiBof screenshotssized for 3x displays, no visible change
- 31golden frames per checktwo viewports, zero-pixel tolerance
- 150staged claims on the hero mapeach traced along real streets
Stack
- Page
- Hand-written HTML, CSS and JavaScript
- Mapbox GL JS
- SVG refraction filters
- Languages
- Python locale build
- Translation files keyed by the English text
- Discovery
- Structured data
- FAQ page
- Sitemap with language alternates
- Delivery
- Static hosting, deployed on every push
- Share-link worker on two paths