Atmospheric Blobs
Large, slow-moving gradient masses that provide dynamic depth to hero sections without overwhelming the foreground content.
Overview
While the Fluid Background is great for full-canvas simulations, sometimes you just need distinct, organic gradient masses drifting behind your content. The BlobBackground component is a staple of modern SaaS design.
It uses Framer Motion keyframes to slowly orbit and morph large, heavily blurred divs. It automatically sets pointer-events: none and mix-blend-screen to ensure it sits elegantly behind your UI.
Usage
import { BlobBackground } from "@/components/creative/blob-background"
export default function Hero() {
return (
<section className="relative min-h-screen flex items-center justify-center bg-black overflow-hidden">
<BlobBackground
colors={["#ffaa40", "#9c40ff", "#00c6ff"]}
blur={80}
/>
<div className="relative z-10 text-center">
<h1 className="text-6xl font-bold text-white">Next Generation Tools</h1>
</div>
</section>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { BlobBackground } from "@/components/creative/blob-background";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { BlobBackground } from "@/components/creative/blob-background";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<BlobBackground
colors="example"
blur{10}
animationSpeed{10}
/>
</div>
);
}