WebberUI

Long Story Home

A single-column long-form narrative with visuals and figures between the paragraphs.

ProHome layoutshome-layout8 sections
See it liveSee the plans

Install

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

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

    Nav and Opening Hero

    Tea-house nav bar over a full-bleed opening title that fades away on parallax, with a start-reading button.

    hero
  2. 2

    Chapter One: The Mist

    Drop-cap prose on the morning mist and terroir of Lishan, with a mountain-haze illustration and four estate figures counting up.

    content
  3. 3

    Chapter Two: Hand-Picked

    The story of picking one bud and two leaves by hand, a deep-green leaf diagram, and a parallax pull-quote from the tea master.

    content
  4. 4

    Chapter Three: The Roast

    A five-stage, eighteen-hour process timeline whose green line extends as you scroll.

    timeline
  5. 5

    Chapter Four: The Teas

    Three caddy cards — light, mellow, and aged — each with a roast-level tag, tasting notes, and a price.

    product
  6. 6

    Reader Notes

    Three short notes from readers who ordered after finishing the story, each with an avatar.

    testimonial
  7. 7

    Closing Subscribe

    A teaser for the limited spring harvest and an email form for the mountain letter.

    cta
  8. 8

    Footer

    Footer with the brand address, chapter navigation, tea-house links, and contact details.

    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 →