WebberUI

Tilt Scene Home

The hero is a multi-layer 3D card scene: the whole set tilts with the mouse, each card at its own depth.

ProInteractive homeinteractive-home8 sections
See it liveSee the plans

Install

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

The whole page lands in app/templates/tilt-scene-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 3D Tilt Hero

    A first screen with brand nav bar and an interactive 3D tilt scene you can drive with the mouse or arrow keys to fan out its layers.

    hero
  2. 2

    Customer Trust Logo Strip

    Six team brand names already using the product, faded in as social proof.

    misc
  3. 3

    Six Feature Highlights

    Six gradient-icon cards covering depth editing, the parallax engine, performance and accessibility.

    features
  4. 4

    Three-Layer Render Pipeline

    Data, composite and presentation layer cards unfold step by step on scroll, explaining how a screenshot becomes parallax layers.

    timeline
  5. 5

    Results Band

    Gradient figures for four metrics: teams adopting, monthly interactions, Lighthouse score and input latency.

    stats
  6. 6

    Customer Testimonials

    Quotes from a product, a frontend and a growth lead, with gradient avatars and job titles.

    testimonial
  7. 7

    Closing Call to Action

    A conversion block inside a gradient-glow card, with start-free and contact-sales buttons.

    cta
  8. 8

    Footer Navigation

    Brand intro, social links, three columns of site navigation, and a row for copyright, policies and system status.

    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 →