Parallax Storytelling

Also called: Scrollytelling, Parallax scrolling, Narrative scroll

A story told by scrolling: full-bleed layered scenes drift at different speeds while the page unfolds in numbered chapters.

“Layered scroll story”Interaction‑ledEra: 2011 → today (scroll-driven CSS revival)DreamyNostalgicCalmLuxury

Open full screen ↗

parallax-storytelling / landingEN

parallax-storytelling / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm6pxRadius md10pxRadius lg16pxRadius xl24pxDensity×1.15Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

layered scenesmulti-speed scrollingchapter sectionsfull-bleed narrativemountain ridge dividersfixed sky backdropsunset palettecinematic serif

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

Not to be confused with

Motion-Driven →Motion-Driven staggers cards into a normal grid; Parallax Storytelling moves full-bleed scenery layers at different speeds behind chapters.Storytelling-Driven →Storytelling-Driven is a landing structure (chapters, founder story) that can be static; Parallax Storytelling is defined by depth layers that move with scroll.Dimensional Layering →Dimensional Layering stacks UI cards at elevations; Parallax layers are full-width scenery planes moving at different rates.

On mobile

Keep one layered scene per screen (onboarding, featured card) and shift its layers with a gentle 10–20px tilt or scroll offset; drop scroll-linked parallax on long lists and low-end phones, and keep text on solid panels.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinDM Serif Display · 400

The quick brown fox

Heading · ThaiTrirong · 400/500

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinMulish · 400/600/700

Clear words make shared decisions.

Body · ThaiNoto Sans Thai Looped · 400/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Design tokens

Radius	`sm 6px · md 10px · lg 16px · xl 24px · pill 999px`
Border	`1px`
Shadow	`0 16px 40px -16px rgba(3,8,18,0.7)`
Display	`clamp(3rem, 7vw, 6rem)`
Motion	`700ms cubic-bezier(.22,.61,.36,1)`
Density	`×1.15`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Parallax Storytelling (parallax-storytelling) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a dark mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 16px;
  --background: #0E1726;
  --foreground: #F6EBDD;
  --card: #16233A;
  --card-foreground: #F6EBDD;
  --popover: #16233A;
  --popover-foreground: #F6EBDD;
  --primary: #F2A65A;
  --primary-foreground: #1A0F05;
  --secondary: #7FD1C7;
  --secondary-foreground: #062320;
  --muted: #132036;
  --muted-foreground: #BDB2A4;
  --accent: #132036;
  --accent-foreground: #F6EBDD;
  --destructive: #F0806F;
  --border: rgba(246,235,221,0.14);
  --input: rgba(246,235,221,0.14);
  --ring: #F2A65A;
  --chart-1: #F2A65A;
  --chart-2: #7FD1C7;
  --chart-3: #E86A5C;
  --chart-4: #B9A5F0;
  --chart-5: #F6EBDD;
  --sidebar: #16233A;
  --sidebar-foreground: #F6EBDD;
  --sidebar-primary: #F2A65A;
  --sidebar-primary-foreground: #1A0F05;
  --sidebar-accent: #132036;
  --sidebar-accent-foreground: #F6EBDD;
  --sidebar-border: rgba(246,235,221,0.14);
  --sidebar-ring: #F2A65A;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Parallax Storytelling (parallax-storytelling) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a dark mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #0E1726;
  --color-surface: #16233A;
  --color-surface-2: #132036;
  --color-text: #F6EBDD;
  --color-text-muted: #BDB2A4;
  --color-primary: #F2A65A;
  --color-on-primary: #1A0F05;
  --color-secondary: #7FD1C7;
  --color-on-secondary: #062320;
  --color-accent: #E86A5C;
  --color-border: rgba(246,235,221,0.14);
  --color-success: #7FD1A0;
  --color-warning: #F2C75A;
  --color-danger: #F0806F;
  --color-chart-1: #F2A65A;
  --color-chart-2: #7FD1C7;
  --color-chart-3: #E86A5C;
  --color-chart-4: #B9A5F0;
  --color-chart-5: #F6EBDD;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 6px rgba(3,8,18,0.35);
  --shadow-md: 0 16px 40px -16px rgba(3,8,18,0.7);
  --shadow-lg: 0 40px 80px -30px rgba(3,8,18,0.85);
  --font-heading: "DM Serif Display", "Trirong", system-ui, sans-serif;
  --font-body: "Mulish", "Noto Sans Thai Looped", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai Looped", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Parallax Storytelling (parallax-storytelling). Default mode: dark. Fonts: 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",
  "color": {
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.0902,
            0.149
          ],
          "hex": "#0e1726"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.1373,
            0.2275
          ],
          "hex": "#16233a"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0745,
            0.1255,
            0.2118
          ],
          "hex": "#132036"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9216,
            0.8667
          ],
          "hex": "#f6ebdd"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7412,
            0.698,
            0.6431
          ],
          "hex": "#bdb2a4"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.651,
            0.3529
          ],
          "hex": "#f2a65a"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.0588,
            0.0196
          ],
          "hex": "#1a0f05"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.498,
            0.8196,
            0.7804
          ],
          "hex": "#7fd1c7"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0235,
            0.1373,
            0.1255
          ],
          "hex": "#062320"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.4157,
            0.3608
          ],
          "hex": "#e86a5c"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9216,
            0.8667
          ],
          "hex": "#f6ebdd",
          "alpha": 0.14
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.498,
            0.8196,
            0.6275
          ],
          "hex": "#7fd1a0"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7804,
            0.3529
          ],
          "hex": "#f2c75a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.502,
            0.4353
          ],
          "hex": "#f0806f"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.651,
            0.3529
          ],
          "hex": "#f2a65a"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.498,
            0.8196,
            0.7804
          ],
          "hex": "#7fd1c7"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.4157,
            0.3608
          ],
          "hex": "#e86a5c"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7255,
            0.6471,
            0.9412
          ],
          "hex": "#b9a5f0"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9216,
            0.8667
          ],
          "hex": "#f6ebdd"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0118,
              0.0314,
              0.0706
            ],
            "hex": "#030812",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 6,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0118,
              0.0314,
              0.0706
            ],
            "hex": "#030812",
            "alpha": 0.7
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 16,
            "unit": "px"
          },
          "blur": {
            "value": 40,
            "unit": "px"
          },
          "spread": {
            "value": -16,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0118,
              0.0314,
              0.0706
            ],
            "hex": "#030812",
            "alpha": 0.85
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 40,
            "unit": "px"
          },
          "blur": {
            "value": 80,
            "unit": "px"
          },
          "spread": {
            "value": -30,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "DM Serif Display",
        "Trirong",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Mulish",
        "Noto Sans Thai Looped",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Noto Sans Thai Looped",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 400
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 700,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.22,
      0.61,
      0.36,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.15
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!