# Alpine Stage Route Hero

> A cycling hero with two selectable Alpine mountain sprints, original aerial landscapes and animated road-aligned routes.

Canonical: https://gsapvault.com/sections/route-planner-hero-section
Live demo: https://gsapvault.com/demos/route-planner-hero-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | svg-route-drawing, container-queries, responsive-section |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

A focused opening section for cycling hill climbs, mountain sprints and tour operators, with two original synthetic Alpine aerials and a working stage selector. Lac Vert climbs beside a mountain lake; Col des Pins crosses a river bridge before winding up a wooded ridge. The worked example uses two short mountain sprints: 4.8 km with 680 m of climbing, and 3.2 km with 480 m. Each stage pairs its own traced SVG course with a story, distance, climbing total and elevation profile. A racing-green editorial panel anchors the composition as the landscape changes and the next route draws.

## Features

- Two selectable stages with distinct road-aligned SVG courses
- Two original bundled Alpine aerials with recorded generation provenance
- Coordinated landscape crossfade, route draw and elevation profile
- Native keyboard- and touch-operable stage buttons
- Deep racing-green editorial composition with high-visibility course colour
- Container-aware desktop and mobile layouts
- Root-scoped brand and motion controls
- Independent mount, replay and teardown API
- Readable no-JavaScript, missing-GSAP and reduced-motion states

## Use Cases

- Cycling hill climbs, mountain sprints and stage races
- Cycling and bikepacking tour operators
- Triathlon, trail and endurance events
- Destination campaigns and mountain resorts

## Vibe-Code Ready Setup

This website section includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

Each aerial and its course share an SVG coordinate system, keeping the line aligned to the road at every size. Stage buttons select the matching map, stage facts and elevation profile; a scoped GSAP timeline crossfades the landscape and draws the new course. Repeated input settles to the last selection. Without GSAP or with reduced motion, selection is immediate; without JavaScript, both stages remain readable.

## Documentation

How this website section works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick start

Copy the `<section class="rph-hero" data-rph-hero>…</section>` block, `assets/style.css`, `assets/script.js` and the `assets/img/` folder. Load GSAP 3.12+ before the section script:

_Code snippet omitted: it ships with the download._

The body and main element in `index.html` are preview context. The `.rph-hero` section is the extractable product.

### Make it yours

Edit the race label, headline, stage facts and links directly in the section markup. Each button (`data-rph-stage="01"` or `"02"`) corresponds in DOM order to a map (`data-rph-map`) and article (`data-rph-copy`). Keep all three lists in the same order. Each map contains its own photograph, `data-rph-route-line` course, endpoint circles and `data-rph-elevation` profile. Stage labels, SVG descriptions and facts are ordinary HTML; no text is buried in a timeline.

Brand controls live together on `.rph-hero` at the top of `style.css`: racing-green ground, image fallback, cream ink, muted ink, high-visibility route accent, divider, font roles, content width, corner radius, padding, transition duration and route width. For example, another race identity can set `--rph-ground:#172c44`, `--rph-map:#263d50`, `--rph-ink:#f5f0df`, `--rph-accent:#ff825c` and `--rph-accent-text:#ffb7a2` without changing the timeline.

The download includes both ready-to-use WebP images in `assets/img/`. To replace a landscape, provide your own 4:3 image, change the SVG image's `href`, and trace its road as described below. The source repository retains the generation masters and bake manifest for maintainers; these build inputs are not required or included in the download.

Each photograph sits inside an inline SVG, so its course, endpoints and labels share one coordinate system: `1440 × 1080` for Lac Vert and `1448 × 1086` for Col des Pins. The images have the same 4:3 proportions; `xMaxYMid slice` keeps the finish side visible as the map resizes. Preserve those proportions or update the viewBox and all coordinates together. Trace replacement roads against the actual image. Terrain and stage statistics are fictional illustrations, not navigational data.

### Behaviour and API

Set `data-duration="0.72"` on the root to change the draw speed. The first course and elevation profile draw when the section mounts. Selecting another stage crossfades its landscape, updates its facts and draws its route. Rapid selections cancel the prior transition and settle to the last requested stage. The headline stays in place.

Inserted sections can be mounted explicitly:

_Code snippet omitted: it ships with the download._

`mount()` is idempotent for the same root; multiple roots operate independently with unique control IDs. `destroy()` removes this instance's listeners, kills its timeline, reverts its GSAP contexts and restores the original attributes and inline styles. Both stages become readable again, and mounting the root again restores the selector. Unrelated page animation is untouched.

### Accessibility and integration

Stage controls are native buttons with `aria-pressed`, unique `aria-controls` references and visible focus. Use Tab then Enter/Space, or touch, to select a stage. The details announce changes politely. Stage information is semantic HTML and each action is a normal link. With JavaScript disabled, controls stay hidden and both full maps and stage articles remain visible. Missing GSAP retains working stage selection with immediate changes. Reduced motion also switches immediately and suppresses replay drawing; preference changes are handled while mounted.

This is a primary hero and therefore ships with an `h1`; change it to the appropriate heading level if it appears later in a host document. It deliberately omits a fictional site masthead so it can sit beneath the buyer's own navigation. The section is container-aware down to 320px and does not require full-viewport width, sticky positioning, smooth scrolling, a map API or a backend. Replace the CTA destination with the matching stage guide, timing page or registration route.

### Dependencies and credits

- GSAP 3.12+ (tested with 3.15.0), subject to the [GSAP licence](https://gsap.com/licensing/).
- Archivo and Fraunces are loaded from Google Fonts. Both are licensed under the SIL Open Font License.
- The two fictional Alpine aerials are original synthetic imagery generated for this section with OpenAI's built-in image generation tool. Generation direction: natural documentary drone photography of a fictional French Alpine valley, clear midsummer light, restrained greens, physically plausible roads and no labels, overlays or map UI. Lac Vert uses a lake and high mountain switchbacks; Col des Pins uses a turquoise river, stone bridge, pine woodland and limestone ridge. Full prompts are retained in the source repository’s `assets/img-src/PROMPTS.md`. No Google imagery, third-party map tiles or real course data are included.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This website section is included only in the Vault, for existing and new owners. It is not sold individually. The standard licence covers unlimited personal and commercial projects; bundled assets retain their own licence requirements.

- [Get the Vault](https://gsapvault.com/pricing)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt