WebberUI

Live Playground Home

Switch examples in the code pane on the left and the preview on the right plays the animation live (simulated playground).

ProInteractive homeinteractive-home8 sections
See it liveSee the plans

Install

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

The whole page lands in app/templates/live-playground-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 Bar and Hero

    Opening hero with a sticky nav bar, a parallax gradient-glow backdrop, and two action buttons.

    hero
  2. 2

    Live Playground

    Code on the left, preview on the right: four tweakable examples — spring, stagger, particle field, and fluid gradient — above a row of trusted brand logos.

    product
  3. 3

    Feature Highlights and Metrics

    Six product feature cards over a band of counting performance and scale figures.

    features
  4. 4

    Quickstart in Three Steps

    Steps 01–03 of the command flow: install, import, then open the playground.

    timeline
  5. 5

    User Testimonials

    Three five-star quotes from engineers and designers, each signed with an avatar.

    testimonial
  6. 6

    Pricing Plans

    Hacker, Pro, and Team compared side by side, with a most-popular badge on the featured plan.

    pricing
  7. 7

    Closing Call to Action

    A closing headline over a centred glow, with buttons to open the playground or read the docs.

    cta
  8. 8

    Footer

    Brand blurb, social links, three link columns for product, developers, and company, plus a copyright row.

    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 →