WebberUI

Full-Bleed Visual Home

Full-bleed gradient and graphic visuals carry the page, text sits on top, and sections switch edge to edge.

ProHome layoutshome-layout7 sections
See it liveSee the plans

Install

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

The whole page lands in app/templates/fullbleed-visual-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 & Full-Bleed Hero

    A dark aurora-gradient first screen with a section-scoped sticky nav bar, a cursor-following glow and a client marquee along the bottom.

    hero
  2. 2

    Four Disciplines

    Four glass cards over an indigo gradient poster and geometric line art: brand identity, interactive sites, motion and campaign visuals.

    features
  3. 3

    Selected Work

    Four selected projects laid out on a dark full-bleed ground, each a gradient cover card with an arrow on hover.

    gallery
  4. 4

    By the Numbers

    A rose-orange gradient panel with diagonal texture; four key figures count up as they enter the viewport.

    stats
  5. 5

    Client Voices

    A midnight-blue full-bleed panel with a glow, holding three glass quote cards from the brands behind the work.

    testimonial
  6. 6

    Work With Us

    A violet-pink gradient panel with a breathing glow and a centred headline inviting enquiries about new projects.

    cta
  7. 7

    Footer

    A pure-black footer pulling together the brand blurb, navigation, contact details, social icons and the 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 →