The user wants me to clone a website at autorouter.com with a scroll-based zoom animation. They describe: "scroll animation with neat smooth animation like after zooming in just outside keep the same but after zooming in while zooming give that animation". I can't actually visit autorouter.com, but I know from context this is likely a logistics/routing SaaS website. The described effect sounds like a classic "zoom into the hero on scroll" — the hero content scales up as you scroll, then pins and the content continues to the next section, or the hero zooms in and then the rest of the page scrolls normally ("after zooming in just outside keep the same" — I interpret as: as you scroll, the hero zooms in smoothly, then once fully zoomed, the rest of the page scrolls normally). So my plan: build an original logistics/routing SaaS landing page (since I shouldn't copy actual copyrighted content from autorouter.com — I'll create original copy and branding inspired by the concept of "auto routing" for logistics/freight). I'll implement: 1. A hero section that scales/zooms in smoothly as you scroll (using scroll-linked transform scale with lerp smoothing for that buttery feel). 2. After the zoom completes, the page scrolls normally. 3. A full landing page: hero, features, how it works, stats, testimonial-ish, footer — all with original content. 4. The scroll animation: hero pinned, scale from 1 → ~2.5 with opacity fade, then releases. Actually re-reading: "after zooming in just outside keep the same but after zooming in while zooming give that animation" — I think they mean: initially the page is normal ("just outside keep the same"), and while zooming in (during the scroll into the page), give the zoom animation. So: on load / on scroll start, the hero zooms in. Like the hero starts scaled slightly down or the camera zooms into the hero content as you scroll, then once zoomed, normal scrolling continues. A popular pattern (like on many award sites): the hero is pinned; as you scroll, the hero content (a card/mockup/scene) scales from 0.9 → 1 or from 1 → large while fading, revealing the next section. I'll do: hero visual zooms INTO a map scene as you scroll — like a camera zooming into a route map, with the route line drawing itself, pins appearing — that's a great "signature moment" for a routing company. Then after the zoom completes, normal scroll. Let me design: **Concept**: "Autorouter" — AI-powered route optimization for freight/logistics. **Signature moment**: The hero contains an interactive SVG map with a route. On scroll, the viewport "camera" zooms deep into the map (scale transform on the SVG with smooth lerp), the route path draws itself, trucks move along the route, and when zoom completes, the headline locks in and the page continues scrolling normally. Also maybe scroll progress drives a zoom from far-out view into a city-level view. Implementation approach: - A sticky/pinned hero of e.g. 300vh scroll length. Inside, a stage that scales based on scroll progress with requestAnimationFrame + lerp for smoothness. - The map: hand-drawn SVG — abstract city blocks, roads, a route polyline with animated dash offset tied to scroll, depot pin, stop pins, a truck dot moving along the path using getPointAtLength. - Depth layers: background grid moves at different rate (parallax within zoom) for depth. - After the pinned zoom section, normal sections: features (asymmetric layout, not equal 3-col cards — I'll do an editorial alternating layout or a staggered grid), a "how it works" section, live stats ticker, pricing maybe, footer. **Design language**: - Avoid default blue/purple. Let me pick a distinctive palette: warm paper/off-white background with ink black and a signal orange/amber accent? Or a dark "control room" look with lime green? For logistics routing, a "control tower" aesthetic: deep ink (#0D0F0E or similar), paper cream, and a vivid safety-orange (#FF4D00 or amber #FFB000) accent. Let me go: background cream #F4F1EA (paper), ink #141310, accent orange #FF4D00. That feels like freight/shipping (hazard orange), editorial, distinctive. Route lines in orange on map. - Typography: distinctive fonts. Use "Space Grotesk" for display? It's fairly common now. Maybe "Archivo" / "Archivo Expanded" for big headlines — Archivo has expanded widths and feels industrial/logistics. Pair with "Spline Sans Mono" or "IBM Plex Mono" for data/labels. Let's use Google Fonts: "Archivo" (with wdth axis if variable) for headings, "IBM Plex Mono" for labels/numbers. Actually a variable font with width axis via Google Fonts: Archivo supports `wdth` 62-125 and `wght`. I can request Archivo with wdth axis: `Archivo:ital,wdth,wght@0,62..125,100..900`. Expanded black headlines look great for logistics. - Icons: use a small inline SVG icon set (I'll hand-make simple stroke icons) rather than emoji. Or use Lucide via CDN. Inline SVG icons are safer in iframe; but CDN is allowed. I'll hand-roll a few inline SVGs (arrows, checkmarks, node icons) — more authored. **Structure**: 1. **Preloader?** Maybe a quick load-in animation. Keep it short — a counter or a wipe. Maybe skip heavy preloader; do a staggered entrance. 2. **Fixed header**: logo "AUTOROUTER" wordmark, nav links, "Book a demo" button (opens a modal, not alert). Header adapts color over dark/light sections? Keep simple: mix-blend-mode difference could be tricky with orange; I'll do header with backdrop blur on scroll, or keep it minimal fixed with blend. Let me do a slim top bar with border, fixed, background transparent → cream on scroll. Actually hero is a map scene — could be dark ink map on cream, so header in ink works. Let me decide the hero look: cream background, the map drawn in thin ink lines (roads as strokes), route in orange, animated truck. Big headline overlaid: "ROUTES THAT THINK AHEAD." or similar. As you scroll: camera zooms into the map (scale up ~3x toward a focal point), headline scales/fades out, map details reveal, route draws, truck travels, then a second headline appears ("From depot to doorstep, optimized in milliseconds")? Hmm — keep it: zoom reveals a closer view with data callouts (eta labels) and then section ends, unpins, and normal content scrolls. Alternatively simpler & robust: Hero stage pinned for 250vh. Progress p: 0→1. - p 0–0.45: camera zoom scale 1 → 2.6 centered on route midpoint; headline splits/fades. - p 0.3–0.8: route path draws (stroke-dashoffset), pins pop in, truck moves along path, ETA chips fade in. - p 0.8–1: a panel slides in / "Zoom complete" — maybe a small stats strip appears at bottom of the pinned viewport, then release. Use lerp smoothing: current += (target - current) * 0.08 in rAF. 3. **Marquee strip**: a horizontal ticker "ROUTE OPTIMIZATION · LIVE ETA · PROOF OF DELIVERY · ..." scrolling — classic but effective; ties to logistics (conveyor). Use mono font. That's fine, it's a marquee not a gradient banner. 4. **Features section**: editorial layout — large numbered rows (01 Route Engine, 02 Live ETA, 03 Fleet telematics, 04 Driver app) as full-width rows with hover interactions: hovering a row expands it / reveals a small inline visual (mini map sparkline). Avoid equal cards. Rows with big index numbers, title in expanded font, description, and an arrow. Hover: background ink flip (row inverts to ink with cream text), arrow slides. Nice. 5. **"How it works" / live demo**: an interactive playground — user can drag the depot and stops on a small map and the route recomputes (nearest-neighbor TSP) with total distance updating live, drawn as SVG. That's a strong interactive moment and on-brand for "autorouter". This is a real signature: a mini TSP solver you can play with. Do it: a panel with draggable pins on a small map; recomputed route polyline animates; shows distance, estimated time, stops count. Buttons: "Add stop", "Optimize", "Reset". Nearest-neighbor + 2-opt quick. Distance in km scaled. This is very memorable and proves function. 6. **Stats band**: big numbers with count-up on scroll into view (e.g., "18% fewer km", "2.4M routes/day", "99.98% uptime"). Layout: asymmetric, not uniform cards — maybe a single row baseline-aligned with dividers, differing sizes. Or an ink section (dark) with cream text — gives rhythm contrast. Let's make stats an ink (dark) full-bleed band. 7. **Quote/manifesto section**: big statement typography with a highlighted word in orange, maybe a subtle scroll-based text reveal (words fade in as you scroll — word-by-word opacity tied to scroll). That's a nice scroll-linked detail. "Every kilometer has a price. We make sure you never pay full rate." Words illuminate progressively. 8. **CTA / footer**: big "Put your fleet on autopilot." with a button opening a demo-request modal (real modal with form, validation, toast on submit — wired behavior). Footer with links, mono small print. Also a toast system for interactions (e.g., form submit, "Optimize" click). **Technical checklist**: - Single HTML file, fonts via Google Fonts CDN (allowed). - No emoji. Inline SVG icons. - Smooth scroll: implement a lightweight lerp-based smooth scroll (fake scroll with transform on a wrapper)? That can conflict with sticky. Alternative: keep native scroll but drive animations with lerped progress — gives the smooth "neat" feel without hijacking. I'll do native scroll + rAF lerp of animation values. Good for iframe compatibility (scrollbar hidden? I'll keep native; maybe style scrollbar subtly). For buttery feel on the pinned hero, lerped progress is enough. Actually to get that premium "Lenis-like" feel, I could include Lenis from CDN. It's a common library. Hmm, allowed (external CDN ok). Lenis + my scroll math works with position: sticky. Let me include Lenis via CDN: https://unpkg.com/lenis@1.1.14/dist/lenis.min.js — adds nice inertia. And fallback if it fails to load (guard `if (window.Lenis)`). - Pinned hero: `position: sticky; top: 0; height: 100vh` inside a `height: 300vh` wrapper. Compute progress = clamp(scrollTop / (wrapperH - vh)). Lerp it. - Map SVG: I'll author a decent abstract city: grid of streets (some diagonals), blocks as subtle fills, a river maybe, the route as a bold orange path with round caps, depot square pin at start, circular stops, truck = small rounded rect rotating along path (use getPointAtLength for position & angle). Zoom transform applied to an inner or CSS transform on the svg container with transform-origin set to focal point (in %). Easier: apply CSS transform: scale() with transform-origin at the route focus, on the whole map wrapper; plus counter-translate so focal point stays centered. Compute: to zoom on point (fx, fy) in element coords keeping it fixed at viewport center C: translate = C - f*scale... Standard: `transform: translate(tx, ty) scale(s)` where tx = cx - fx*s (with origin at 0 0). I'll set transform-origin: 0 0 and compute tx, ty in px from element-relative focal coords. Focal point chosen as a location on the map, e.g., a downtown cluster — but the focal in element coords must map through initial layout; since map svg has fixed viewBox scaled to cover, I can compute using getBoundingClientRect ratio. Simpler: pick focal in fractions of the map element (fx=0.62, fy=0.45) and compute px = rect.width*fx etc. Then tx = (vw/2) - fxPx*s + something... Let me define: we want point P (px coords in map element) to appear at viewport center C. With transform origin 0 0, scale s, translate t: screenPos = t + p*s. Want t = C - p*s. Add also slight drift: maybe also pan slightly toward route end as p increases (camera follows truck!) — that's cinematic: zoom in AND pan along the route as the truck drives. Signature moment! So focal point moves along the route with progress: f = path.getPointAtLength(progress * len) → camera follows truck. Beautiful. So camera: s from 1 → ~3.2; target screen position of focal = center-ish but maybe slightly offset upward so a data panel can sit at bottom. Also I want the truck around 60% progress of its route during the zoom. Details during zoom: - ETA chips (small labels near stops: "ETA 14:32", "DELIVERY") fade in when s > threshold, and scale down (counter-scale: 1/s) so they stay readable — parent scaled, children counter-scaled via same transform inverse. I can put labels inside the scaled group and apply transform: scale(1/s) on each chip around its own center using CSS with transform-box: fill-box; transform-origin: center. SVG supports transform-box in modern browsers. Good. - Route draw: path stroke-dasharray = len; dashoffset = len*(1-routeProgress). routeProgress ramps 0→1 during p 0.15–0.75. - Truck position = routeProgress (slightly ahead of camera? keep equal). - Other ambient traffic: 2–3 fainter vehicles on other roads moving continuously (independent of scroll) — alive feel. - Blocks highlight as camera nears? Maybe route corridor gets subtle emphasis: a wide low-opacity orange stroke underlay that fades in with zoom. - Headline behavior: at p=0, big headline centered/left. As p grows 0→0.35, headline fades & scales slightly up (parallax) and moves up. A second smaller "caption" appears mid-zoom? Maybe at end of zoom (p 0.75–1) a compact HUD panel slides up at bottom: "ROUTE #A-2847 · 6 STOPS · 41.2 KM · SAVED 18%" with mono text, live-ish. Then release to next section. - Also depth: a background grid layer moves at 0.5x of zoom (parallax) — implement separate layer with its own scale = 1 + (s-1)*0.6, and foreground label layer with full counter-scale. Layered depth sells "camera" feel. Reduced motion: respect prefers-reduced-motion — skip smoothing/zoom, show final state. I'll add a basic check. Mobile: make it responsive; pinned zoom still works; typography clamps. TSP playground works with touch (pointer events). Header collapses to a menu button that opens a full-screen menu (wired). Keep it functional. **Content (original copy)**, brand: keep the name "Autorouter" since user asked to clone that site — I'll write my own copy in the spirit (can't reproduce their actual text anyway since I don't have it; original copy is the right move). Sections: - Nav: Product, Engine, Pricing, Company + CTA "Book a demo". - Hero headline: "EVERY ROUTE, DECIDED IN MILLISECONDS." or "FREIGHT THAT FINDS ITS OWN WAY." Let me craft: eyebrow "AUTOROUTER — ROUTE INTELLIGENCE PLATFORM"; H1: "ROUTES THAT REWRITE THEMSELVES." Sub: "Autorouter plans, re-plans and live-optimizes your entire fleet every few seconds — so traffic, cancellations and rush orders never cost you a kilometre." - Zoom HUD: "LIVE PLAN — RECOMPUTED 3,412× TODAY". - Marquee: "DYNAMIC ROUTING / LIVE ETA / AUTO-DISPATCH / PROOF OF DELIVERY / DRIVER SCORECARDS / FUEL ANALYTICS /" repeat. - Features (numbered rows): 01 Route Engine — "Constraint solver..."; 02 Live ETA; 03 Auto-dispatch; 04 Driver companion. Each with hover invert + arrow, click could scroll to playground? Make rows clickable: 01 opens playground scroll. Wire click → scroll to relevant section. - Playground: "Try the engine" — drag pins, live TSP. Controls: Add stop / Reset / metric readouts (stops, distance, drive time, Δ vs naive order). Show "vs. first-clicked order" improvement %. - Stats band (dark): 2.4M routes/day · 18% avg km saved · 120ms replan · 99.98% uptime. Count-up on view. - Manifesto scroll-illuminated text. - CTA + footer + modal form + toast. **Fonts**: Archivo variable (wdth+wght) + IBM Plex Mono. Headlines: font-variation-settings wdth 125, weight 800, uppercase, tight tracking. Big display sizes with clamp. **Colors**: - --paper: #F2EFE6 (warm cream) - --ink: #16150F (near-black warm) - --accent: #FF4D00 (signal orange) — hmm maybe #FF4A11. Use for route, highlights, buttons. - --muted: rgba ink 55% - dark band: ink bg, paper text. - borders: 1px ink at 15%. Avoid gradients entirely. Flat, editorial, industrial. Maybe subtle paper noise? Could add a fine dot grid on paper via radial-gradient dots — that's a pattern texture, not a decorative gradient banner; dot grid via `background-image: radial-gradient(circle, rgba(0,0,0,.08) 1px, transparent 1px)` is fine and reads as drafting-paper texture. I think that's tasteful, but radial-gradient dots... it's a texture technique, acceptable. I'll use it sparingly on the map background to look like a planning grid. **Header**: fixed, mix of paper bg with bottom border; logo as wordmark: "AUTOROUTER↗"? Custom SVG mark: a small node/route glyph — three dots connected by a path. Right side: time (live clock, mono) — nice authored detail: "LOCAL 14:32:05" ticking. Plus CTA button (ink bg, cream text, hover→orange). Mobile: burger → overlay menu. **Toast**: bottom-left mono chip sliding in. **Modal**: booking demo — fields: name, email, fleet size (select), message; validate email; on submit → success state inside modal + toast. Close on ESC / overlay click. **TSP playground details**: - SVG canvas ~ full width panel, aspect 16/9, cream, dot grid, some decorative roads (static faint lines) for texture. - Pins: depot (square, ink) + stops (circles, orange). Draggable via pointer events (pointerdown on pin, move updates pos, constrain in bounds). - Route: polyline through all points. Compute order: greedy nearest neighbor from depot, then 2-opt pass (limited iterations for snappiness; n small so full 2-opt fine). - Readouts: distance (sum haversine-ish scaled km: treat canvas as ~ 60km wide), time = dist / 42 km/h + 4 min/stop, saved % vs naive (original insertion order) — show "vs. naive −23%". - Animate path on recompute: transition points? Simplest: rebuild path with dash animation replay (set dasharray, animate offset via CSS transition or WAAPI). I'll animate stroke-dashoffset from len→0 over 400ms on each recompute. - Buttons: "ADD STOP" (adds random-ish point near center avoiding overlap; max 9 stops), "RESET" (restore initial), "OPTIMIZE" runs a quick shuffle→solve animation (briefly scramble order display then settle) — maybe just recompute with a flash. Keep: Add, Reset, and a toggle "Show naive route" comparing dashed grey naive line vs orange optimized — educational & alive. I'll implement toggle "COMPARE". - Also live label at depot "DEPOT", stops numbered 01,02... - Handle pointerdown/move/up with setPointerCapture. **Word-illuminate manifesto**: split text into spans; on scroll, based on section progress, set opacity per word (0.15 → 1). Simple per-frame calc. **Count-up stats**: IntersectionObserver triggers rAF count. **Reveal-on-scroll**: sections/rows fade-slide in with IO. **Cursor**: maybe custom cursor? Could be too much; skip or add subtle: a small orange dot cursor on map areas. Skip to keep focus; maybe add hover states everywhere for feedback. Let me also make the "features rows" have an inline mini-visual that appears on hover (like a small sparkline/route doodle) — or simpler: arrow + index and hover invert. I'll add per-row a right-aligned mono tag ("SOLVER", "TELEMETRY", ...) and arrow icon; hover inverts row. **Structure of pinned hero in DOM**: ```

eyebrow/h1/sub/scroll cue

live plan panel

corner ticks, coords readout

``` Map SVG design (viewBox 0 0 1600 1000, preserveAspectRatio="xMidYMid slice" to cover): - Background paper (same as page, seamless with page bg → map is on-page texture). - Street grid: verticals/horizontals at varied spacing + 2 diagonal avenues; stroke ink 12% width 1.5–2. A couple of "highways" wider stroke 3 at 18%. - A river: broad curved path filled with slightly darker tone? Use a band of ink 6%. Or skip river; add a rail line (dashed). - Blocks: a few rects with ink 3% fill to suggest districts. - Park: one rect with ink 4% + label "PARC" mono tiny? Maybe skip labels except route data. - Route: the star — a path weaving through streets (hand-authored path with smooth curves and right-angle-ish segments — Manhattan-style with rounded corners reads "street routing"). Depot at start (left-ish), 5 stops, end at right. Compose coordinates along grid lines for authenticity. - Focal for camera: follows truck along path. - Chips: HTML absolutely-positioned over map? Counter-scaling HTML in a transformed parent: if parent scaled by CSS transform, child transform scale(1/s) works with transform-origin center — yes for HTML too. But positioning chips at map coords: place them inside the transformed element (the svg wrapper is transformed; chips as HTML absolutely positioned using % of wrapper based on viewBox coords → since slice-cover, mapping isn't linear with wrapper box if aspect differs. Hmm. Easier: put chips INSIDE the SVG as with ? ForeignObject inside scaled svg + counter-scale works. Or draw chips as SVG rect+text (mono font applies to svg text). Counter-scale a with transform-box: fill-box; transform-origin: center; transform: scale(var(--inv)). CSS var --inv updated by JS. That works in Chrome/FF. Safari supports transform-box too now. OK: chips as SVG groups with class chip; JS sets style.transform = `scale(${1/s})` per chip with transform-box:fill-box. Actually the truck + its label: truck is a group translated to point, rotation; label counter-scaled similarly. Camera math: container .map-wrap covers stage (inset:0). Focal point F in svg viewBox coords → need px in wrapper. With preserveAspectRatio slice, scale k = max(w/1600, h/1000); rendered size = 1600k × 1000k centered; px = offX + x*k. I'll compute k and offsets in JS on resize from wrapper rect and viewBox. Then screenTarget: we want point f (px) at viewport position (cx, cy) = (50%, 46%). transform: translate(tx,ty) scale(s) with origin 0 0: tx = cx - f.x*s, ty = cy - f.y*s. Apply to .map-wrap. Truck path: same route path element; p_route = clamp((p-0.1)/0.7); dist = p_route * len; pt = getPointAtLength; angle via getPointAtLength(pt+1)-pt. Camera focal = path point at min(p_route,0.62)*len? If camera follows truck fully, screen edges rush by; better: camera follows a "lookahead" point at 55% of truck progress so truck stays ahead/visible: focal = getPointAtLength(min(1,p_route*1.0)*len*0.9?) Hmm simpler: focal uses same progress but focal screen target slightly left-of-center so truck appears right-of-center. Fine: cy 50%, cx 44%; truck appears slightly right. As truck progresses to route end, end point should be the final framing. Let me author route so end is nice. Zoom scale: s = 1 + (2.6-1)*ease(p01) where p01 = smooth progress for zoom phase p∈[0.05,0.6] mapped. Also subtle rotation? Tiny rotate (like -2°→0) could add cinematic feel but may look gimmicky; skip rotation, maybe slight drift. Headline exit: opacity = 1 - clamp(p/0.3); translateY = -p*40vh? Move up + fade; also scale 1→1.08. HUD panel: appears p∈[0.7,0.92]: translateY from 110%→0 (bottom sheet), opacity. Contains mono rows updating: "ROUTE A-2847 · STOPS 06 · 41.2 KM · REPLAN #3,412" with a blinking dot "LIVE". Also progress bar showing route completion. At p→1 stays; after unpinning, next section covers it. Scroll cue at start: "SCROLL TO ENGAGE" with animated line; fades immediately. Ambient traffic: two small grey dashes moving along two other paths (looping, constant speed in rAF, offset by time). They're inside scaled group so they zoom too — good. Route corridor underlay: stroke width 26 accent 8% — always visible, emphasizes. Also I want the depot/stop pins to "pop" (scale from 0) as route passes them: each stop has param t_i (length fraction along path where it sits). scale = clamp((routeP - t_i)/0.06) with overshoot? Just smoothstep. Counter-scale pins too so they stay constant size on screen: pin visual scale = (1/s) * pop. Good detail. Let me now author the route path in a 1600×1000 grid with streets every 100px-ish. Route Manhattan style: start depot (200, 780) → up to (200, 520) → right (520,520) → up (520,300)? Let me just write a path with rounded corners using quadratic arcs at corners. I'll hand-write: M 180 800 L 180 560 Q 180 540 200 540 L 460 540 Q 480 540 480 520 L 480 360 Q 480 340 500 340 L 760 340 Q 780 340 780 320 L 780 260? hmm too zigzag. Let me design a nice weaving route: Depot D at (170, 810). Stops: S1 (170, 545): go north. S2 (455, 545): east. S3 (455, 330): north. S4 (745, 330): east. S5 (745, 520): south? then S6 (1035,520) east, end E (1035, 300)? Let's end at a hub. Actually 6 stops total incl depot? HUD says 6 stops: depot + 5 drops. Fine. Path: M 170 810 L 170 545 (stop1) L 455 545 (stop2) L 455 330 (stop3) L 745 330 (stop4) L 745 620? — that adds drama south: L 745 620 then L 1035 620 (stop5) then L 1035 395 end? End at (1035, 395) "HUB". Rounded corners radius 22 via Q. With slice-cover on 16:9-ish stage, viewBox 1600×1000: stage is 100vw×100vh so aspect varies; slice crops. Camera zooms to ~3x; at 3x, area shown is ~533×333 units — route spans y 330–810 fine, x 170–1035. Truck end at x=1035 near right — at end, camera focal also near end; ensure final framing keeps route on screen: at s=2.6, half-width visible = 800/2.6 ≈ 307 units; focal at end (1035,395) shows x∈[728,1342] ✓, y∈[62,728] with cy 46%: center y=460 → visible y∈[268,652] — end at 395 ✓. Streets: verticals every ~96px offset, horizontals every ~96; plus route exactly on some street lines: I'll draw grid with lines at x=170? To look intentional, draw grid at spacing 92.5 starting 85? Simpler: draw streets at the route's x/y values plus intermediates: xs: 85,170,262.5... Let me define xs = [78,170,262,354,455,547,650,745,837,940,1035,1130,1225,1320,1415,1510] irregular-ish, ys = [90,190,290,330? no...]. I'll generate grid lines in JS instead! Generate: for x from 60 to 1560 step ~95 (with slight jitter, skipping none), vertical lines; same for y. And route coordinates chosen from these? If I generate grid in JS with fixed seed, I can include the route's exact coordinates as grid lines: grid xs include 170,455,745,1035; ys include 330,545,810,620,395. I'll hardcode arrays. That guarantees route sits on streets. xs: 78,170,262,354,455,547,650,745,837,940,1035,1128,1222,1316,1410,1504 ys: 88,190,290,330? wait 330 too close to 290. Adjust ys: 88,190,330,430,520,620,715,810,905. Route ys: 810,545→ not in list. Let me redo route to use ys: 810,520,330,620,395... 545 not there. Fine — change stops: D(170,810) S1(170,520) S2(455,520) S3(455,330) S4(745,330) S5(745,620)?? 620 in list ✓ then S6? I said 5 drops: S5 (745,620), then S? end (1035,620)→ no end should be hub (1035, 430)? Let me finalize: Route: M 170 810 L 170 520 (S1) L 455 520 (S2) L 455 330 (S3) L 745 330 (S4) L 745 620 (S5) L 1035 620 (S6=drop? ) then L 1035 430 (END HUB). That's depot + 5 drops (520,520,330,330? no—S2 at 455,520; S4 at 745,330; S5 745,620; S6 1035,620) = 5 drops + hub end. HUD "STOPS 06" counting 6 pins? depot+5 = 6 markers; say "6 STOPS". OK. Rounded corners: Q with r=26 at each turn. Path d: M170 810 L170 546 Q170 520 196 520 L429 520 Q455 520 455 494 L455 356 Q455 330 481 330 L719 330 Q745 330 745 356 L745 594 Q745 620 771 620 L1009 620 Q1035 620 1035 594 L1035 430 Also secondary faint route for "other vehicle": a path from bottom-right to top-left on other streets, a dashed grey line with a moving dot. Traffic dots: two ambient cars on loops: paths: car1 on y=430 horizontal from x=60 to 1560 (loop): animate x. car2 on x=1222 vertical. Simple JS position by time, wrap. Pins: depot = 18px square ink with white inner; drops = orange circles r=9 with white ring? On cream, orange filled circle with paper stroke; hub end = ring square. Labels "D", "01".. tiny mono above each, counter-scaled. Chips (ETA labels) appear near S2 and S5 when zoomed: small rect paper + border + mono text "ETA 14:32" / "ETA 15:07", plus a leader line to pin. Fade in s>1.6. Route draw: dashoffset technique; but path includes rounded corners fine. Underlay corridor: same path stroke-width 30 accent alpha .07, also draw with dashoffset synced. Zoom easing: overall p from scroll; define phases: - head fade: 0→0.32 - zoom: p 0.04→0.62, easeInOutCubic, s: 1→2.6 - route: p 0.12→0.78 linear-ish easeInOutSine - hud: 0.78→0.95 - Also entire stage gets slight brightness/contrast? skip. Lerp: displayed = lerp(displayed, target, 0.09) per frame; on load, displayed init 0. Lenis: I'll include it; but risk CDN offline? unpkg generally fine; also add graceful fallback (native scroll still works if Lenis missing). Use `

AUTOROUTER.

AUTOROUTER

--:--:--

AUTOROUTER — FLEET OS · --:--:--

SERVICE AREA — ROTTERDAM RING / SECTOR A-4CAM 52.3740°N 4.9100°E

AUTONOMOUS ROUTE PLANNING — FLEET OS

ROUTES THAT
REWRITE
THEMSELVES.

Autorouter re-plans your whole fleet every 120 milliseconds — for traffic, weather, cancellations and last-minute orders. Your drivers just drive.

NO CONTROL TOWER · NO WHITEBOARD · 120 MS RE-PLAN

SCROLL

DYNAMIC ROUTING LIVE ETA AUTO-DISPATCH PROOF OF DELIVERY FUEL ANALYTICS DRIVER SCORECARDS MULTI-DEPOT NIGHT NETWORKS

01 — WHAT IT DOES

BUILT FOR THE UGLY MATH OF CITIES.

Routing looks like a map. It's actually a stack of hard constraints fighting each other, every second of the day. Autorouter resolves that fight for you, continuously.

/ 01
ROUTE ENGINE
A constraint solver that eats city chaos for breakfast. Time windows, weight limits, driver hours, dock slots — solved in under 120 ms.
CORE SOLVER
/ 02
LIVE ETA
Every stop's arrival time recalculated as the road changes. Your customers see the truth, not a guess made at 6 a.m.
TELEMETRY
/ 03
AUTO-DISPATCH
A new order comes in and the plan reshuffles itself — no controller, no phone calls, no whiteboard. Accept the exception, not the whole day.
OPERATIONS
/ 04
DRIVER COMPANION
One screen, zero ambiguity: the next door, the best parking, the fastest dock — with live re-routing when the world disagrees.
MOBILE

02 — TRY THE ENGINE

DRAG THE PINS.
WATCH IT THINK.

This is the real solver, shrunk to a sandbox. Every drag triggers a full re-plan: nearest-neighbour seed, then 2-opt refinement — exactly what runs on the live network, just smaller.

STOPS—

DISTANCE—

DRIVE TIME—

VS. NAIVE—

DEPOT (FIXED)DROP (DRAGGABLE)NAIVE ORDER 2-OPT ON EUCLIDEAN DISTANCE · CLOSED TOUR

03 — THE NETWORK, RIGHT NOW

0ROUTES RE-PLANNED EVERY DAY, ACROSS ALL TENANTS

0AVERAGE KILOMETRES SAVED VS. STATIC PLANNING

0FULL-FLEET RE-PLAN TIME, WORST CASE

0SOLVER UPTIME OVER THE LAST 12 MONTHS

04 — WHY IT MATTERS

Every kilometre has a price — fuel, wages, hours, carbon. Most fleets pay full rate because their plan was true yesterday. Autorouter keeps the plan true right now.

05 — READY WHEN YOU ARE

PUT YOUR FLEET ON AUTOPILOT.

``` **How the scroll-zoom works** - **The rig** — the hero sits inside a `340vh` track with a `position: sticky` stage. Scroll progress (0→1) is eased per-frame with a lerp (`hp += (target−hp)×0.12`), which is what gives that buttery, weighted feel instead of a raw 1:1 jump. - **The camera** — the whole map is one SVG under a single transform. The focal point blends from screen-center (so the transform is exactly identity at rest) to the truck's position along the route, so the camera literally *acquires the truck*, zooms to 2.62× while panning with it, then freezes at a composed final frame. The math is isolated at the top of the script — change `ZOOM_MAX`, `ZOOM_START/ZOOM_END` and `ROUTE_START/ROUTE_END` to retune the entire choreography. - **Depth trick** — UI elements (pins, ETA chips, the truck label) are counter-scaled by `1/scale` each frame, so they stay crisp and constant-size while the "world" (streets, dot-grid paper, street names, traffic) scales up around them. That duality is what sells the zoom. - **Story beats** — corridor visible at rest → route draws in as you scroll → pins pop as the truck reaches them → ETA chips materialize mid-zoom → the telemetry panel docks in at the end → normal scrolling resumes. - **Lenis** is loaded for inertial smoothing, but everything degrades gracefully to native scroll if the CDN is blocked, and `prefers-reduced-motion` skips the preloader and interpolation entirely. The other signature piece is the **route sandbox**: drag any orange pin and a real solver (nearest-neighbour seed + full 2-opt) re-solves a closed tour on every pointer move, renumbers the stops by visiting order, and reports distance/drive-time/savings vs. the naive order — the "COMPARE" toggle overlays the naive route as a dashed line so the optimization is visible, not just claimed.

ROUTES THATREWRITETHEMSELVES.

BUILT FOR THE UGLY MATH OF CITIES.

ROUTE ENGINE

LIVE ETA

AUTO-DISPATCH

DRIVER COMPANION

DRAG THE PINS.WATCH IT THINK.

PUT YOUR FLEET ON AUTOPILOT.

ROUTES THAT
REWRITE
THEMSELVES.

DRAG THE PINS.
WATCH IT THINK.

compare cloning