WebberUI

Scroll Theatre Home

A pinned canvas theatre changes scenes as you scroll while chapter copy fades in (Codex-style scroll narrative).

ProInteractive homeinteractive-home8 sections
See it liveSee the plans

Install

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

The whole page lands in app/templates/codex-scroll-theater/. 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 Bar and Hero

    An opening hero combining the branded nav bar, a gradient headline, two action buttons and a typing terminal animation.

    hero
  2. 2

    Four-Act Scroll Theatre

    A canvas particle stage tied to scroll progress plays out four acts in turn: launch, comprehension, parallelism and delivery.

    timeline
  3. 3

    Six Agent Superpowers

    A three-column card grid covering sandboxed execution, semantic retrieval, test-driven runs and three further core abilities.

    features
  4. 4

    Platform Key Figures

    Four headline metrics rendered with a count-up that fires as the section enters the viewport.

    stats
  5. 5

    Engineering Team Testimonials

    Three accounts from engineering leads and CTOs, with gradient avatars and job titles.

    testimonial
  6. 6

    Three-Tier Pricing

    Starter, Pro and Enterprise plan cards, with the middle tier flagged as most popular.

    pricing
  7. 7

    Closing Call to Action

    A deep indigo gradient card with a glow, pointing to a free start or a booked enterprise demo.

    cta
  8. 8

    Footer Navigation

    Brand blurb, social links and product, resources and company link columns, above the copyright and terms.

    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 →