Live preview — fully interactive
The prompt
Build a pinned multi-layer parallax hero: a dusk sky, glowing moon and three mountain ridgelines that rise at different speeds while you scroll, with the headline scaling up and fading away. ## Structure - A 100vh .hero with overflow hidden containing, back to front: a .sky grad
Full prompt (2581 chars) unlocks after purchase
The code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #08080d; color: #f2f2f7; font-family: 'Inter', system-ui, sans-serif; }
.hero { position: relative; height: 100vh; overflow: hidden; }
.sky { position: absolute; inset: 0; baComplete self-contained HTML unlocks after purchase
About this effect
A Firewatch-style hero with zero image assets: a gradient dusk sky, a glowing moon, CSS-dot stars and three inline-SVG mountain ridgelines. GSAP ScrollTrigger pins the scene for 120% of viewport height and scrubs every layer at a different velocity — near ridges rise fast, far ones barely move — while the headline lifts, scales to 1.14 and dissolves. The silhouettes are solid divs topped with SVG ridges, so the parallax never exposes a gap.