TITLE: Voyage 071 — A Scroll-Told Crossing from Harbor to the Stars

PROMPT: Build a single-file, self-contained HTML artwork titled "Voyage 071 — Harbor to the Stars": a scroll-driven voyage where one continuous painted seascape morphs through six stages (Harbor, Open Sea, Storm, Calm, Sky, Stars) while text panels scroll over it. Structure: a fixed full-viewport canvas (position:fixed; inset:0; z-index:0) rendering the scene, a fixed radial vignette overlay, a 2px fixed top progress bar whose fill is scaleX(scrollProgress), a fixed monospace HUD top-left showing "071 — Voyage", the current stage name and a 2-digit percent, a fixed bottom-left "SCROLL" cue with a 46px hairline whose inner dot loops with a transform keyframe, and a fixed right-side vertical rail of six buttons (label + 22px tick) that grows the active tick to scaleX(1.75) in #f4a261. Below, a relative <main> holds six 100dvh <section class="panel"> blocks alternating left/right alignment, each with a translucent card (linear-gradient rgba(11,29,51,.80) → rgba(6,15,27,.58), 1px rgba(233,236,239,.15) border, backdrop-filter blur(7px), 2px #f4a261 left rule, deep drop shadow) containing a monospace eyebrow, an italic Georgia h2 at clamp(28px,4.6vw,54px), a body paragraph in #c9d6e3, and a monospace meta row. Palette: #0b1d33 night sea, #f4a261 dawn, #e76f51 storm, #2a9d8f calm, #e9ecef stars, #8ea6bd dim text. Type: system-ui body, Georgia italic display, ui-monospace labels. Canvas engine: DPR-scaled (canvas.width = cssW * devicePixelRatio, ctx.setTransform), overscanned by a 100px margin so a pointer-driven scene rotation never exposes edges. Six stage parameter sets (sky top/mid/horizon colors, sea colors, wave amplitude, wave speed, star density, sun x/y/radius/alpha/color, haze, rain) are hex-parsed once and linearly interpolated by a continuously smoothed scroll value sceneT = progress * 5, eased at 0.085 per frame. Drawing order: sky linear gradient + horizon haze band + sun radial glow + sun disc, twinkling star field (280 pre-seeded stars, thresholded by star density), sea gradient with sun shimmer bars, four perspective sine-wave layers each filled from its crest down to the canvas bottom with a crest highlight stroke, a bobbing sailboat (quadratic hull, mast, two sails, elliptical reflection) that drifts right as progress advances, and slanted rain streaks plus an occasional lightning flash when storm intensity is high. Motion: scroll drives every morph, the boat bobs and rolls, waves scroll, stars twinkle, storm shakes the scene by ±2.4px and bolts flash; all motion is disabled under prefers-reduced-motion (no rAF loop, redraw on scroll only, no bob, no twinkle, no shake). Interaction: scroll is the engine; hovering or focusing a rail button previews that stage by easing the scene to it; clicking a rail button smooth-scrolls to that chapter; pointer x tilts the whole horizon by up to 0.021 rad with easing. Cards reveal via transform translateY(38px) → 0 with an IntersectionObserver — never via opacity — so a frozen-clock render shows the complete page. All JS in one IIFE in a single inline <script> at the end of body, no external references, the substring "http" absent everywhere.

DESCRIPTION: A cinematic single-scene voyage told by scroll. The canvas holds a dawn harbor that dissolves into open water, a violent storm, a bruised calm, a climb into the sky, and finally a star field with a moon — sky, sea, sun, waves and star density all interpolate continuously between six hand-tuned palettes, while the sailboat drifts steadily toward the horizon. Frosted text cards scroll over the fixed scene like chapter titles, the rail previews stages on hover, and the pointer tilts the horizon as if the viewer were leaning over the rail.

TECHNIQUES:
- Canvas 2D scene with DPR scaling and a 100px overscan margin for safe rotation
- Continuous multi-keyframe parameter interpolation (hex → RGB → lerp) across six stage palettes
- Layered perspective sine waves with per-layer amplitude, wavelength, phase speed and crest highlights
- Radial-gradient sun glow, vertical horizon haze band, and animated sun shimmer bars on the water
- Pre-seeded star field with density thresholding and per-star sine twinkle
- Procedural sailboat drawn with quadratic curves, mast, twin sails and elliptical reflection
- Slanted rain streaks and frame-timed lightning flashes driven by a storm intensity parameter
- Sticky/fixed scene with sticky text panels and IntersectionObserver transform reveals (no opacity entrances)
- CSS custom-property palette, clamp() display type, backdrop-filter frosted cards
- Eased scroll-to-scene smoothing, pointer-driven scene rotation, prefers-reduced-motion fallback path

INTERACTION: Scrolling is the engine — it morphs sky colour, sun position, wave height and speed, rain, and star density continuously across six stages, and fills the top progress bar. Hovering or focusing a stage in the right-hand rail eases the scene to preview that stage and lights the rail tick; clicking a stage smooth-scrolls to its chapter. Moving the pointer left and right tilts the horizon by up to 0.021 rad with easing. Text cards slide up into place (transform only) as their chapters enter the viewport. With prefers-reduced-motion the scene freezes to a single still frame that redraws on scroll, all bob/twinkle/shake stops, and chapter jumps become instant.