WebberUI
繁體中文

Immersive Scroll Story

Long-form scrollytelling: one continuous narrative unfolding section by section, scroll-bound animation.

ProImmersiveimmersive6 sections
See it liveSee the plans

Install

npx webberui@latest add "https://webberui.com/r/immersive-scroll-story.en.json?t=<install token>"

The whole page lands in app/templates/immersive-scroll-story/. 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

    A minimal navbar over a drifting spore-particle field, opening on an oversized gradient title that announces one seed's journey.

    hero
  2. 2

    Five Pinned Acts

    A five-act story pinned to the scroll, its central plant SVG growing from seed to bloom while the ambient colour shifts act by act.

    timeline
  3. 3

    Brand Manifesto

    A manifesto line that parallax-shifts and surfaces word by word out of blur, setting out the regenerative-farming philosophy.

    content
  4. 4

    Numbers in the Root System

    A four-panel rolling counter board covering seeds, soil recovery rate and carbon-sink cycles.

    stats
  5. 5

    Seed Programme Sign-Up

    An email sign-up form inside a gradient glass card that swaps to a success message once submitted.

    cta
  6. 6

    Footer

    Dark footer with a brand blurb, social links, three columns of site navigation and a back-to-top button.

    footer

Immersive Scroll Story is a React scrollytelling template: one continuous story in five acts, with the stage pinned in place while scrolling changes the text, the background color and an SVG plant that grows step by step. It is built with Next.js App Router, Tailwind CSS and Motion.

When to use it

  • Brand story or company values page
  • Long-form introduction for a product or initiative
  • Feature stories, annual reports and other narrative content
  • Campaign pages that end with a subscribe or signup

What to change after installing

  1. The five acts are the `ACTS` array in page.tsx: title, English subtitle, body and note. Each act's background and glow colors map in order to `BG_STOPS` and `GLOW_STOPS`, so change all three together when adding or removing acts.
  2. The plant animation is `GrowingPlant`; root, stem, leaves and flower each map to a range of scroll progress, and you can swap in other SVG artwork for your story.
  3. The manifesto and numbers sections are `ManifestoSection` and the `STATS` array; footer links are in `FOOTER_COLS`.
  4. The subscribe form (`CtaSection`) only switches to a sent state in the browser and sends nothing; wire `submit` to your own newsletter service or API.

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 →