// Hero — scrollytelling SVG alpine scene with parallax layers + pinned headline function HeroMountainScene({ progress }) { // progress 0..1 across the hero stage const p = Math.max(0, Math.min(1, progress)); // translate layers different amounts for parallax const tSky = `translateY(${-p * 40}px)`; const tFar = `translateY(${-p * 80}px)`; const tMid = `translateY(${-p * 170}px)`; const tNear = `translateY(${-p * 300}px) translateX(${p * -30}px)`; const tFore = `translateY(${-p * 420}px) translateX(${p * 40}px)`; const tTrail = `translateY(${-p * 300}px) translateX(${p * -30}px)`; // Full-bleed: span 120vw, centered, so parallax translates don't expose gaps. const bleed = { bottom: 0, height: '100%', left: '-10vw', right: '-10vw', width: '120vw' }; return (
{/* Sky gradient + sun */}
{/* Tiny stars, faintly */} {Array.from({ length: 40 }).map((_, i) => { const x = (i * 97) % 1600; const y = (i * 53) % 380; const r = (i % 3) * 0.4 + 0.4; return ; })} {/* Birds */} {/* Far ridge */} {/* Middle ridge */} {/* snow caps */} {/* Near ridge — the hero peak */} {/* hero peak snow */} {/* sunrise blush on peak */} {/* A thin wandering trail on the peak */} {/* Foreground rocks/foreground fringe */} {/* pine trees */} {Array.from({ length: 22 }).map((_, i) => { const x = 40 + i * 73 + (i % 3) * 9; const baseY = 820 - Math.sin(i * 1.1) * 28; const h = 16 + (i % 4) * 4; return ( ); })} {/* Vignette wash at bottom — grows with scroll so the scene dissolves into parchment */}
); } function Hero({ progress }) { const p = progress; // Hold the hero text steady through most of the scroll, then ease it out // close to the stage end so the transition into section 1 doesn't feel empty. const headlineOpacity = 1 - Math.max(0, (p - 0.70) / 0.28); const subOpacity = 1 - Math.max(0, (p - 0.62) / 0.30); const headlineY = -p * 30; // second headline fades in as first fades out const secondOp = Math.max(0, Math.min(1, (p - 0.45) / 0.25)); const secondY = (1 - secondOp) * 30; return (
{/* Atmospheric light wash — a soft parchment-tinted glow that sits behind the text like morning mist */}
{/* Primary headline */}
Alpine base · 47.5°N

Websites That Help You Climb Higher.

A small studio making websites for local, established businesses. One page or many. Hand-built. Quietly maintained. Never a template.

Begin a project See what we make
{/* Bottom indicator */}
01 · The climb begins
Scroll
); } window.Hero = Hero;