# Remake prompt — Routelane animated landing page

Build a single-page, dark-first marketing website for **Routelane**, an open-source AI router, using only **index.html + styles.css + app.js** (no framework, no build step, no images). Match every value below exactly. The original source files (~148 KB total) are included in the bundle under `source/` — use them as the reference; this prompt describes them file by file.

## What it is
A single-page, dark-first marketing site for "Routelane", an open-source AI router (one OpenAI-compatible endpoint in front of many AI providers). Plain HTML + CSS + vanilla JS, no build step. Heavy on scroll and loop animations: a loader mark, a canvas "lanes" background with moving packets, a scroll-driven catalog that gathers provider chips into a counter, self-typing terminals, a token-compression demo, and many small looping card visualisations. Light/dark theme toggle.


## Stack
- HTML5, CSS (custom properties, `@property`, `position: sticky`, `backdrop-filter`), vanilla ES2020 JS — no framework, no dependencies.
- Fonts: Google Fonts **Geist** (300–700) and **Geist Mono** (400, 500).
- Icons: inline Lucide-style SVG paths in `app.js` (`<i data-icon="name" data-size="16">` placeholders are hydrated at runtime).
- Run: `python3 -m http.server 5178` in the project folder → http://localhost:5178. Any static host works.

## Files
| file | bytes | role |
|---|---|---|
| index.html | 45,371 | all section markup, head/SEO, static content |
| styles.css | 60,664 | tokens (dark + light), layout, every keyframe animation, responsive rules |
| app.js | 42,227 | icons, data arrays, dynamic sections, observers, typing, gather, compression demo, tabs, canvas background, live GitHub stats |

## Design tokens
| token | dark | light |
|---|---|---|
| --canvas | #0d0f14 | #f5f6fa |
| --canvas-alt | #171a22 | #eaecf3 |
| --surface | #13161d | #ffffff |
| --surface-raised | #1f2330 | #e8ebf4 |
| --ink | #eef1f8 | #12141c |
| --body | #e4e8f1 | #262a36 |
| --muted | #9aa1b2 | #5d6375 |
| --faint | #7f8699 | #737a8d |
| --line-subtle | rgb(238 241 248 / .09) | rgb(18 20 28 / .08) |
| --line | rgb(238 241 248 / .17) | rgb(18 20 28 / .15) |
| --line-strong | rgb(238 241 248 / .38) | rgb(18 20 28 / .34) |
| --accent | #8ea2ff | #4f63e6 |
| --accent-ink | #0d0f1f | #ffffff |
| --accent-strong | #b0bdff | #3b4dc7 |
| --accent-soft | rgb(142 162 255 / .14) | rgb(79 99 230 / .1) |
| --success | #7fd1b9 | #1f8a6b |
| --danger | #f29a9a | #c2413f |
| --ribbon (lane colour, rgb triplet) | 52 60 92 | 196 204 236 |
| --glass | rgb(13 15 20 / .72) | rgb(245 246 250 / .8) |

Other tokens: container 75rem; radii sm .25rem, surface .75rem, control .5rem, pill 9999px; header height 3.75rem; easings `--ease: cubic-bezier(.22,1,.36,1)`, `--ease-draw: cubic-bezier(.42,.02,.24,1)`, `--ease-reveal: cubic-bezier(.16,1,.3,1)`. Terminals use a fixed dark background #090b10 (light theme #141824).

Type: body 1rem/1.55 Geist; h1 `clamp(2.6rem, 7.5vw, 5.5rem)`, weight 500, letter-spacing -.05em, line-height 1; section h2 `clamp(2.1rem, 4.8vw, 3.5rem)`, weight 500, letter-spacing -.035em; eyebrow .72rem uppercase, letter-spacing .08em, accent colour; big numbers `clamp(4rem, 12vw, 8rem)`.

## Sections (in order)
1. **Loader** — 84×84px logo mark: three lanes draw in (stroke-dashoffset 1→0, 1.6s loop, staggered 0/.12/.24s) and an accent node pops (scale 0→1.5→1). Hides after max(900ms, fonts ready) capped at 1.6s; fades .45s, then removed.
2. **Header** — sticky, glass blur 14px, brand mark (28px rounded tile) + "Routelane / open source AI router", nav (Providers, Features, More ▾ dropdown), Star button with live star count, theme toggle (moon/sun), EN language pill, "Routelane Cloud" primary pill. 2px accent scroll-progress bar. Hamburger + full-screen mobile panel below 900px; CTA and brand subtitle hidden below 560px.
3. **Hero** — announce pill "New: Routelane Cloud is now in public beta · Learn more". H1 "**One** router for every model" — "One" in accent→success gradient text with a gradient underline that draws in (scaleX 0→1, .6s, delay 1s). Line blurs in (blur 12px→0, translateY 40%→0, rotate 2°→0, .9s). Lead: "Send every request to a single OpenAI-compatible endpoint and reach 352 providers — with fallback that kicks in automatically." Buttons: Routelane Cloud → / Self-host Routelane. Trust row: OpenAI-compatible · Free and open source · MIT licensed. Hero animations are paused until the loader finishes (`body.is-ready`).
4. **Deployment options** — "Host it on your own box. / Or hand the hosting to us." Two cards: Self-hosted (terminal types `npx routelane`, then "✓ Gateway running → localhost:8787" and badges, loops every ~3.2s) and Cloud (SVG flow diagram: tools → gateway hub → Managed inference / Your providers, dashed accent packets 2.4s loop).
5. **Catalog (scroll-driven)** — 260vh tall section with sticky stage. 40 provider chips start scattered on an ellipse and pull to the centre as you scroll (eased, staggered 0–.12), fading out; then a glass box appears and counts 0→352 "+". Below: endpoint card `http://localhost:8787/v1` with copy button and two opposite-direction marquees (38s), plus five auth rows with count-ups (OAuth 25, API key 233, Web cookie 35, Local 14, No authentication 13).
6. **Core controls** — 6 cards, each with a looping mini-visual (fallback rows, shrinking bar 18,400→2,024 ~89%, filling free-tier bars, hub with satellites, dialects hub `/v1`, arming pills).
7. **Quick start** — stats strip (352 / 19 / :8787/v1); three steps that type sequentially: `npm install -g routelane`, `routelane`, `curl localhost:8787/v1/models`; step number turns accent when active; copy buttons.
8. **Gateway controls** — bento of 8 (first two span 2 cols): Smart Combos score list, Memory, 3-layer resilience nested boxes, Free quota dedupe grid, Compression squeeze bars, MCP server 40-cell light grid, A2A protocol, Semantic cache HIT.
9. **Client compatibility** — 18 clients in a 3-col grid (coloured initial tiles), code card with cURL / JavaScript / Python tabs, copy.
10. **Copilot Bridge** — 3 cards + 3 outline link buttons.
11. **Why Routelane** — 10-row failure-mode table; the "with" column wipes in (clip-path) on reveal.
12. **Compare** — tabs Trade-offs / Routing / Protocols / Resilience & security / Operations; columns Routelane vs generic "Subscription router", "SDK gateway", "CLI proxy"; legend Built in / Needs setup / Separate integration / Not documented.
13. **Deployment** — 9 cards (npm, Docker, Desktop, ARM, Android · Termux, PWA, OpenCode plugin, VS Code, From source).
14. **Routing** — route tabs auto, auto/coding, auto/fast, auto/cheap, auto/offline, auto/smart; updates goal, fallback ladder and request code; 6 strategy cards.
15. **Free-tier accounting** — big count-up 1.51B and 12 provider rows with bars growing to their share.
16. **Compression** — 69 tokens of a sentence drop one by one (70ms each) while engine chips light up; counter falls to 19; text swaps to "sum all list items where value > 0"; Replay button. Before/After cards. Profiles Lite 15 / Standard 30 / Aggressive 60 / Ultra 89 / RTK 70 / Stacked 95 drive a conic gauge (`@property --p`) and the header `x-routelane-compression: <profile>`.
17. **Failure isolation** — three concentric rings (provider ⊃ connection ⊃ model) linked to three cards; auto-cycles every 2.4s, hover to pin.
18. **Network controls**, **Dashboard** mock (tabs Providers / Combos / Analytics / Health / Costs, sparkline draws in 1.6s), **Agent protocols** (MCP, A2A, Cloud agents), **Additional services** (4 cards).
19. **Repository activity** — stars, forks, watchers, open issues, language, last push fetched live from `https://api.github.com/repos/${REPO}`; shows "—" and a hint if it fails. Channels: Discord, Telegram, GitHub Discussions, Newsletter.
20. **Final CTA** "Choose how you run Routelane." + footer (Product / Developers / Community columns, © 2026 Routelane. MIT licensed.).

Global: back-to-top button after 1.5 viewports; toast "Copied to clipboard"; cursor spotlight on `.card--spot` (420px radial, accent 9%); `.reveal` elements fade/rise 22px over .9s with 70ms stagger via `--i`.

## Background canvas
Fixed full-screen canvas. Two (one below 700px) Catmull-Rom curves zig-zag down ~2.4 viewport heights (x swings between 4% and 22% of width on the left; mirrored on the right). Each is drawn as **three parallel 1.5px lanes** offset by 10–18px along the normal, colour `rgba(--ribbon, .9 × fade)`. Accent dots (2.6px core + 7px halo at 18%) travel along random lanes at 40px/s × 0.8–1.4. Parallax: path offset = scrollY × .35. Fade = clamp(1 − scrollY / (1.4 × viewport), .22, 1).

## Responsive
- ≤1000px: 3/4-col grids → 2 cols; bento → 2 cols.
- ≤960/900px: two-column layouts stack; desktop nav hidden, hamburger shown.
- ≤820px: section heads stack, section padding 4.5rem.
- ≤640px: grids → 1 col, container gutter 1rem.
- ≤560px: header CTA and brand subtitle hidden.
- Grid children get `min-width: 0` so `<pre>` blocks scroll instead of widening the page.

## Accessibility & SEO
Skip link, `aria-live` toast and route status, tab roles with `aria-selected`, sr-only text for the compression demo, `prefers-reduced-motion` disables animations and shows the catalog statically. Title "Routelane — Open Source AI Router"; meta description "One OpenAI-compatible endpoint in front of hundreds of AI providers, with automatic fallback." No OG tags yet.

## Known gaps before publishing
- `REPO` in app.js is the placeholder `your-org/routelane` (GitHub API returns 404 until set).
- Product numbers (352 providers, 19 strategies, 110 MCP tools, 1.51B free tokens, 15–95% compression, free-tier quotas) are placeholders that must match the real product.
- Discord/Telegram/guide/marketplace links point to `#`.
- Name "Routelane" has not been trademark-checked.

## How to build it
- `index.html`: head (Google Fonts Geist + Geist Mono, styles.css, a tiny inline script that applies a saved `or-theme` from localStorage), loader SVG, header, mobile panel, `<canvas id="ribbon">`, then sections 3–20 in order, back-to-top button, toast, `<script src="app.js">`.
- `styles.css`: `:root` dark tokens and `:root[data-theme="light"]` overrides exactly as in the table; every keyframe listed; the responsive breakpoints listed; a `prefers-reduced-motion` block.
- `app.js` (one IIFE): `REPO` constant; icon map + hydrator; data arrays (providers, clients, why rows, compare matrix, deploy cards, routes, strategies, free tiers, engines, profiles); loader; theme toggle; nav/menu; copy + toast; IntersectionObserver reveals and count-ups; terminal typer; scroll-driven catalog gather; code tabs; compare tabs; routing picker; compression demo + profiles; isolation rings; dashboard tabs; live GitHub stats; canvas lanes; one requestAnimationFrame loop for canvas, gather, progress bar and back-to-top.

## Match checks
1. Page background is #0d0f14 in dark mode and #f5f6fa in light mode; accent is #8ea2ff (dark) / #4f63e6 (light).
2. All text is Geist; code and terminals are Geist Mono.
3. H1 reads "One router for every model", `clamp(2.6rem, 7.5vw, 5.5rem)`, weight 500, letter-spacing -.05em; "One" is gradient text with an underline that draws in after a 1s delay.
4. Loader shows three lanes drawing into one accent node on a 1.6s loop and disappears within 1.6s of fonts loading.
5. Background shows three thin parallel lanes per curve with accent dots travelling along them; it drifts at 0.35× scroll speed.
6. Scrolling the catalog pulls 40 provider chips into the centre, then a glass box counts up to "352+".
7. Quick-start terminals type `npm install -g routelane`, `routelane`, `curl localhost:8787/v1/models` one after another.
8. Compression demo drops the 69-token sentence to 19 tokens ending with "sum all list items where value > 0"; the Standard profile shows ~30% and header `x-routelane-compression: standard`.
9. At 375px wide there is no horizontal scroll; the header shows only logo + "Routelane", theme toggle and hamburger.
10. The repository section reads stars/forks/watchers/issues from `https://api.github.com/repos/<REPO>` and shows "—" when it fails.