WebberUI

Liquid Blob Home

Several liquid blobs merge and morph slowly in the background (metaball feel), shifting palette as you scroll.

ProInteractive homeinteractive-home8 sections
See it liveSee the plans

Install

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

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

    Liquid Hero and Navigation

    A nav bar that sticks inside the section, over a metaball canvas hero with a live swatch, an interaction hint and three headline figures.

    hero
  2. 2

    Trusted By

    A slim band naming six brands already shipping with the liquid engine.

    misc
  3. 3

    Four Engine Highlights

    A four-cell grid covering the metaball engine, brand gamut locking, layer blending and multi-format export.

    features
  4. 4

    Editor Walkthrough

    A mock morpho.studio window: the liquid visual on the left, fluid parameter sliders and a code snippet on the right.

    product
  5. 5

    User Testimonials

    Three recommendation cards from designers and engineers, with gradient avatars and job titles.

    testimonial
  6. 6

    Three Subscription Tiers

    Ripple, Tide and Deep plan cards, with the middle tier marked most popular.

    pricing
  7. 7

    Launch Call to Action

    A centred glass card closing the page, with buttons to start free or scroll back up and watch the colours shift.

    cta
  8. 8

    Footer

    A dark footer built from the brand statement, social icons, three link columns and a 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 →