Overview
Atlas is a self-contained travel landing page built to a single question. How much depth and motion can one HTML file carry with no framework and no build step? The hero is a dusk mountain scene (a warm sky, a sun setting behind the ridgeline, and three layers of peaks) that reacts to the cursor and to scroll. A tilted ribbon of cream boarding passes scrolls beneath it, holding still whenever you hover one.
Every pixel ships inline: one web font, all styles and scripts in the document, nothing to compile. It is a sibling piece to the Foliom book-marquee page, same craft bar with a different signature interaction.
How It Works
Compose the scene
Five depth-tagged layers stack behind the headline: a dusk sky gradient, drifting stars, a setting sun, and three mountain ridgelines drawn as stretched SVG paths with subtle top-light gradients.
Add depth
One requestAnimationFrame loop reads cursor position and scroll offset, then translates each layer by its own depth factor. Distant ridges barely move, foreground hills move most, and the headline counter-shifts for pop.
Run the routes
A tilted marquee of boarding passes (generated from a routes array with CSS barcodes and punched notches) scrolls on an infinite CSS keyframe and pauses via a :has() hover check when a pass is hovered.
Respect the viewer
Type scales fluidly with clamp() down to 390px, and prefers-reduced-motion cuts the marquee, the star twinkle, and the JS parallax for anyone who asks for less motion.
