WebberUI

3D Product Reveal

Scroll-driven CSS 3D product rotation, exploded view and repositioning, with specs revealed step by step.

ProImmersiveimmersive8 sections
See it liveSee the plans

Install

npx shadcn@latest add "https://webberui.com/r/product-3d-reveal.json?t=<install token>"

The whole page lands in app/templates/product-3d-reveal/. 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

    Dark cinematic opening: brand nav above a spotlit 3D watch that lifts, scales up and fades out as you scroll.

    hero
  2. 2

    Spec Breakdown Stage

    A sticky stage rotates the watch in 3D on scroll while six spec cards surface one by one on leader lines, closing on four key figures.

    features
  3. 3

    Five-Layer Exploded View

    Five structural layers separate in 3D as you scroll, while the left column lights up each one from sapphire crystal to titanium caseback.

    product
  4. 4

    Testimonials from the Wrist

    A diving instructor, a security researcher and a photographer on living with the watch, on horizontally parallaxing cards.

    testimonial
  5. 5

    Three Editions

    Core, Titan and Aurora compared on price, finish and what comes in the box, with the most popular edition flagged.

    pricing
  6. 6

    FAQ

    Accordion answering questions on data privacy, real-world battery life, strap swaps and warranty service.

    faq
  7. 7

    Pre-order Call to Action

    Closing invitation whose glow intensifies as it scrolls in, with pre-order and in-store try-on buttons plus the warranty promise.

    cta
  8. 8

    Footer

    Brand blurb with product, support and company link columns, and a copyright line.

    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 →