Morphing Blob is a Three.js sphere deformed in real time by a custom GLSL shader, so its surface boils and stretches organically instead of following a fixed keyframe path. It reacts to pointer movement, ships with several color themes, and can carry a particle field around it. Built with React and Tailwind CSS. A good centerpiece for hero sections and abstract brand moments where a photo would feel too literal.
Installation
Usage
import { MorphingBlob } from "@/components/ui/morphing-blob";Basic Usage
export default function MyComponent() {
return (
<div className="flex items-center justify-center min-h-screen bg-gray-900">
<MorphingBlob size={400} theme="aurora" complexity={3} speed={2} />
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | string | 400 | The size of the blob container (number for pixels, or any CSS string) |
theme | "primary" | "aurora" | "cosmic" | "liquid" | "danger" | "aurora" | The color theme of the blob |
complexity | number | 3 | The complexity of the morphing effect (1-5) |
speed | number | 3 | The speed of the morphing animation (1-5) |
particleCount | number | 150 | The number of animated particles around the blob |
enableEffects | boolean | true | Whether to enable post-processing effects (bloom, etc.) |
children | React.ReactNode | undefined | Content to display over the blob |
className | string | undefined | Additional CSS classes for the container |
style | React.CSSProperties | undefined | Additional inline styles for the container |