Halloween only 🎃 Get Wensity Pro for 31% less with
Wensity

Morphing Shape Background

Lava lamp background for React heroes: soft gradient shapes that drift and melt.

cinematic interactionsmorphingshapebackground
Morphing Shape Background component preview

Overview

Morphing Shape Background is a React and Tailwind CSS lava lamp background for hero sections, in Next.js or any React app, with no dependencies. Soft gradient shapes drift and melt behind your content under heavy blur, so it reads as a slow, blurred gradient background rather than distinct shapes. Each shape is a div whose border radius and rotation run on keyframes, with no SVG path morphing, and a grain overlay removes color banding. Pass your own shape set or keep the chili, sky, and amber palette, and render hero content above it as children. Reduced motion stops the drift.

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 shape set. Falls back to a chili / sky / amber palette.
grainbooleantrueAdd an inline grain overlay on top to kill color banding.
childrenReact.ReactNode-Optional foreground content rendered above the shapes and grain.

Related components

  • Blob Animation component preview

    Blob Animation

    Blob animation in CSS: a morphing gradient blob, soft glow, outline, or image mask.

  • Dynamic Island Toast component preview

    Dynamic Island Toast

    A pixel-faithful Apple Dynamic Island that morphs, splits, and breathes while it hosts live activities inside your app.

  • Infinite Marquee component preview

    Infinite Marquee

    A seamless, GPU-only logo strip that never stutters or snaps at the loop point.

  • Apple-Style Sticky Scroll component preview

    Apple-Style Sticky Scroll

    A pinned cinematic section that morphs in lock-step with scroll, staying perfectly in sync whichever way you travel.

Featured in React animated backgrounds.