WebberUI

Parallax Narrative

Layered-depth story: foreground, midground and background move at different speeds for a dimensional scroll.

ProImmersiveimmersive5 sections
See it liveSee the plans

Install

npx shadcn@latest add "https://webberui.com/r/parallax-narrative.json?t=<install token>"

The whole page lands in app/templates/parallax-narrative/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Prologue Hero

    Full-bleed opening of starfield and distant ridgelines; the headline parallaxes upward on scroll, with in-section chapter progress nav.

    hero
  2. 2

    Four-Season Parallax Chapters

    Spring, summer, autumn and winter play as four sticky-pinned chapters, with ridgeline layers drifting at different speeds and season-specific ambient particles.

    gallery
  3. 3

    Field Notes

    Four mountaineering note cards tagged with time and altitude, fading and floating in one after another.

    timeline
  4. 4

    Closing Call to Action

    Four-colour aurora backdrop behind a closing verse, with booking and gear-list download buttons.

    cta
  5. 5

    Footer

    Three link columns — brand intro, routes and expeditions — above a copyright and code-of-conduct bar.

    footer

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →