WebberUI

Scroll Scrub Home

Scroll progress scrubs a hero frame sequence (procedurally generated gradient frames) while the text overlay changes section by section.

ProInteractive homeinteractive-home8 sections
See it liveSee the plans

Install

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

The whole page lands in app/templates/scroll-scrub-frames-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

    Scroll Scrub Hero

    A nav bar over a full-bleed procedurally generated frame sequence that scrubs as you scroll while the copy swaps section by section, followed by a customer marquee.

    hero
  2. 2

    Product Features

    Six cards covering the core of cloud rendering: GPU frame-level parallelism, zero-config cloud upload, and frame-by-frame review.

    features
  3. 3

    Workflow Showcase

    Parallax browser window frames showing the render queue, frame-by-frame preview, and timeline thumbnails in real use.

    product
  4. 4

    Key Numbers

    Four operating figures count up on entry: GPU nodes, speed multiplier, frames rendered per day, and uptime.

    stats
  5. 5

    Customer Voices

    Three pieces of feedback from motion design teams, in quote cards with initial avatars and job titles.

    testimonial
  6. 6

    Pricing Plans

    Three compute-based plans for solo creators, studios, and enterprises, with the middle plan flagged as most popular.

    pricing
  7. 7

    Call to Action

    A final conversion block under a bottom glow, leading with cloud rendering that starts without a credit card.

    cta
  8. 8

    Footer

    Brand blurb, social links, four navigation columns — product, resources, company, legal — and copyright.

    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 →