Atlas
A single-file, self-contained travel landing page. The hero is a layered dusk scene (sky, a setting sun, and three parallax mountain ridgelines) that responds to both cursor movement and scroll. Below it, a tilted marquee of cream boarding passes scrolls on an infinite loop and pauses the moment you hover a pass.
Parallax dusk hero
Built as a design showcase in the spirit of a premium editorial hero. Everything ships in one HTML document with a single web font and no build step. The parallax runs off a single requestAnimationFrame loop driving depth-tagged layers; the boarding passes are generated from a small routes array with CSS-drawn barcodes and punched-notch perforations. Motion honors prefers-reduced-motion, and the layout stays fluid from desktop down to 390px.
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.
Project stack
HTML5
Markup
CSS3
Styling
JavaScript
Language of the web
