Wensity

Morphing Shape Background

Lava-lamp blobs that drift behind your hero at 120fps with no SVG morphing.

cinematic interactionsmorphingshapebackground
Morphing Shape Background component preview

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add morphing-shape-background

Usage

Import MorphingShapeBackground from @/components/wensity/morphing-shape-background and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { MorphingShapeBackground } from "@/components/wensity/morphing-shape-background";


export function MorphingShapeBackgroundDemo() {
  return (
    <MorphingShapeBackground grain className="min-h-[600px] rounded-3xl">
      <div className="flex h-[600px] items-center justify-center">
        <h1 className="font-heading text-6xl font-extrabold tracking-tight text-white">
          Ship faster.
        </h1>
      </div>
    </MorphingShapeBackground>
  );
}

Props

PropTypeDefaultDescription
blobsMorphingShapeBlob[]-Custom blob set. Falls back to a chili / sky / amber aurora palette.
grainbooleantrueAdd an inline grain overlay on top to kill color banding.
childrenReact.ReactNode-Optional foreground content rendered above the blobs and grain.