Alpine Stage Route Hero

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.
• 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.