WebberUI

Canvas Hero Page

Full-viewport canvas hero: fluid, particles and distortion reacting to cursor and scroll.

ProImmersiveimmersive8 sections
See it liveSee the plans

Install

npx shadcn@latest add "https://webberui.com/r/webgl-canvas-hero-page.json?t=<install token>"

The whole page lands in app/templates/webgl-canvas-hero-page/. 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

    Particle Hero and Nav Bar

    A pill nav bar over an interactive canvas particle field — neon visuals that repel from the cursor and fade out on scroll.

    hero
  2. 2

    Partner Brand Strip

    Six brands already using it, set as fading wordmarks for lightweight social proof.

    misc
  3. 3

    Core Capability Cards

    Six neon-glow cards arrive in sequence, covering the engine's compute, fluid, compositing and output capabilities.

    features
  4. 4

    Three-Step Process

    A pinned scroll narrative: three steps light up with progress on the left while a mock window on the right switches node visuals in step.

    timeline
  5. 5

    Key Metrics Band

    Four result figures count up on entry, gathered inside a single gradient-outlined card.

    stats
  6. 6

    Selected Work Gallery

    Three portrait gradient work cards with a grid overlay and hover glow, showing live case studies.

    gallery
  7. 7

    Final Call to Action

    A centred neon-glow card with two routes: start weaving for free, or book a product tour.

    cta
  8. 8

    Footer Navigation

    Brand blurb, three link columns and a copyright row, closing out the page's dark cinematic tone.

    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 →