WebberUI

Asymmetric Home

An asymmetric grid with overlapping elements — an editorial feel that breaks the column.

ProHome layoutshome-layout8 sections
See it liveSee the plans

Install

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

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

    Navigation and Off-Axis Headline

    A static nav bar above an offset oversized headline, a parallax gradient window and an overlapping manifesto card.

    hero
  2. 2

    Tilted Marquee Band

    A slightly tilted dark band scrolling endlessly sideways, alternating solid and outlined weights of the same service keywords.

    misc
  3. 3

    What We Do

    Five service cards at staggered heights plus a dashed manifesto note, forming a deliberately misaligned grid.

    features
  4. 4

    Selected Work

    Three cases alternating left and right, each pairing a gradient visual with a rotated overlapping text card and an outlined giant numeral.

    gallery
  5. 5

    Off-Axis Method

    A four-step process list on dark ground, each row indented further than the last and sliding right on hover.

    timeline
  6. 6

    Client Quote and Numbers

    A large-type client quote with attribution on the left, four studio figures stepped down the right.

    testimonial
  7. 7

    Contact Call to Action

    A vermilion rounded block with a circle deliberately breaking its edge, carrying an email button and a note on response time.

    cta
  8. 8

    Footer

    A footer of staggered columns: studio blurb, coordinates, sitemap, social links and office hours.

    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 →