# Parallax Storytelling > A story told by scrolling: full-bleed layered scenes drift at different speeds while the page unfolds in numbered chapters. - Nickname: Layered scroll story - Also called: Scrollytelling, Parallax scrolling, Narrative scroll - Category: Interaction‑led - Moods: Dreamy, Nostalgic, Calm, Luxury - Industries: Travel & Hospitality, Media & Entertainment, Creative & Portfolio, Education, Luxury & Premium - Style page: https://uilingo.dev/styles/parallax-storytelling/ Parallax Storytelling turns a page into a journey. A dusk sky stays fixed, mountain ridges in three tones slide at different speeds as you scroll, and the next chapter rises over the last. Content is organised as numbered chapters with a big serif headline, short paragraphs and wide scene panels whose inner layers shift independently. Ridgelines become section dividers, numbers are set like captions, and the palette moves from night blue to sunset amber. Built with CSS scroll-driven animations and a fixed backdrop, it degrades to a still, layered illustration. ## Best for - Destination, tour and hotel storytelling pages - Annual reports, campaigns and long-form features - Product origin stories and brand manifestos - Museum, heritage and nature-park sites ## Avoid for - Task-focused apps and dashboards people use daily - Search-heavy catalogues - Users with vestibular disorders unless reduced motion removes the movement ## Do - Use 3–4 layers moving at clearly different rates (e.g. 0.2×, 0.5×, 1×) - Give every chapter a number, one headline and one idea - Ship a still, layered illustration under prefers-reduced-motion ## Don't - Don’t scroll-jack or snap the user away from where they scrolled - Don’t put body text on a moving layer - Don’t make the hero taller than ~100vh before the story starts ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Parallax Storytelling" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line A story told by scrolling: full-bleed layered scenes drift at different speeds while the page unfolds in numbered chapters. Design keywords: layered scenes, multi-speed scrolling, chapter sections, full-bleed narrative, mountain ridge dividers, fixed sky backdrop, sunset palette, cinematic serif. ## Visual language A page that feels like travelling into a landscape at dusk. A fixed sky — night blue fading through plum to sunset amber, a low sun and a few stars — never moves, while three mountain ridgelines in progressively darker blues slide at different speeds as you scroll, and the nearest ridge is the same colour as the page so the story emerges from it. Content is told in numbered chapters with a large cinematic serif, short cream paragraphs and wide scene panels whose inner layers drift independently. Warm, slow, atmospheric — the scroll bar is the narrator. ## Signature details (must be visible) - Fixed backdrop: linear-gradient(180deg, #0B1322 0%, #1B2A4A 36%, #5A3E5E 62%, #C9735A 82%, #F2A65A 100%) with a 54px sun disc and a halo, plus 1px star dots - Hero = full-bleed immersive scene (92vh, max 900px): far ridge #324A72, mid ridge #213353 and near ridge #0E1726 (equals page bg) as SVG silhouettes; on scroll the far/mid layer moves at ~0.15× and the copy drifts down and fades (animation-timeline: scroll(root), range 0–900px) - Chapters: every section head starts with 'Chapter 01' in italic serif amber (Thai uses its own word for chapter, no italics); sections are opaque night blue so they slide over the sky - Ridgeline dividers: alternate sections carry a 56px jagged mountain edge on top instead of a straight line - Scene panels (feature art, figures, onboarding, featured card) are mini landscapes with 3–4 background layers whose background-position shifts at different rates via animation-timeline: view() - Type: DM Serif Display 400 for headlines (italic for quotes and chapter labels), Mulish body; Thai Trirong + looped Noto Sans Thai; eyebrows 0.72rem, 0.24em tracking, amber ## Design tokens — use these exact values Colours (dark mode): - background #0E1726 - surface #16233A - surface-2 #132036 - text #F6EBDD - text-muted #BDB2A4 - primary #F2A65A (text on it #1A0F05) - secondary #7FD1C7 (text on it #062320) - accent #E86A5C - border rgba(246,235,221,0.14) - success #7FD1A0 · warning #F2C75A · danger #F0806F - chart series #F2A65A, #7FD1C7, #E86A5C, #B9A5F0, #F6EBDD Radius: sm 6px, md 10px, lg 16px, xl 24px, pill 999px Border width: 1px Shadows: sm `0 2px 6px rgba(3,8,18,0.35)`, md `0 16px 40px -16px rgba(3,8,18,0.7)`, lg `0 40px 80px -30px rgba(3,8,18,0.85)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.15 density Motion: 700ms cubic-bezier(.22,.61,.36,1) ## Typography (Latin + Thai) - Headings: DM Serif Display 400 with Thai fallback Trirong 400/500 - Body: Mulish 400/600/700 with Thai fallback Noto Sans Thai Looped 400/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital,wght@0,400;1,400&family=Mulish:wght@400;600;700&family=Trirong:wght@400;500&family=Noto+Sans+Thai+Looped:wght@400;600&display=swap - CSS stacks: heading `"DM Serif Display", "Trirong", system-ui, sans-serif`; body `"Mulish", "Noto Sans Thai Looped", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3rem, 7vw, 6rem), heading weight 400, heading tracking -0.01em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Trirong is a looped, high-contrast Thai serif with the same cinematic, bookish voice as DM Serif Display; looped Noto Sans Thai keeps long narrative paragraphs as easy as Mulish. ## Components - Primary button: sunset amber #F2A65A pill with dark text and an amber glow 0 10px 30px -10px - Secondary button: translucent night pill rgba(14,23,38,.35), 1px cream 40% border, 6px blur — sits over scenery - Cards: solid #16233A, 16px radius, hairline cream border at 14%, deep night shadow; never translucent over moving layers - Icons: thin amber outline circles, no fills - Steps: 64px outlined circle with a serif numeral - Stats: huge amber serif numbers over a hairline rule - CTA: a final sunset scene panel with ridges and a sun behind the call to action - Dashboard: night-blue surfaces, a mountain ridge resting at the bottom of the sidebar, amber active item, amber-intensity heatmap - Mobile featured card: a layered sunset scene with white serif title and text-shadow ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: full-viewport immersive hero with centred copy over the background effect. Navigation: minimal style. Sections in order: hero → features → stats → steps → testimonials → cta. Feature section as alternating. Open with the immersive hero: transparent nav floating over the sky, centred headline and actions, a thin scroll cue line, ridges at the bottom. Then alternate chapters: an alternating feature row per idea with a big scene panel and roman scene numbers, a stats strip, numbered steps, testimonials in italic serif, and a sunset CTA scene. Keep sections full-bleed, wide spacing (density 1.15), and text always on solid backgrounds. Dashboards and forms keep the palette and ridge motif but no scroll motion. ## Content Use realistic product copy (fictional brand) suited to: Destination, tour and hotel storytelling pages. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Use 3–4 layers moving at clearly different rates (e.g. 0.2×, 0.5×, 1×) - Give every chapter a number, one headline and one idea - Ship a still, layered illustration under prefers-reduced-motion ## Don't - Don’t scroll-jack or snap the user away from where they scrolled - Don’t put body text on a moving layer - Don’t make the hero taller than ~100vh before the story starts - Scroll-jacking, snapping or hijacking scroll speed - Body text placed on a moving or translucent layer - Staggered card entrances on a normal grid as the main effect — that is Motion-Driven - Floating UI cards at different elevations instead of scenery planes — that is Dimensional Layering - Photo-heavy layers that make the page slow; draw layers as SVG/CSS silhouettes - Bright daylight palettes with no depth gradient — the layers need tonal steps to read as distance ## Stack notes One self-contained HTML file with a