Introducing Nyx UI v1.2.0

Morphing Blob

A dynamic 3D morphing blob with customizable themes, animated particles, and interactive effects powered by Three.js and shaders.

3DEffectsAnimationInteractive
Open in

Nyx UI

Nyx UI

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

PropTypeDefaultDescription
sizenumber400The size of the blob container in pixels
themestring"aurora"The color theme of the blob (primary, aurora, cosmic, liquid, danger)
complexitynumber3The complexity of the morphing effect (1-5)
speednumber3The speed of the morphing animation (1-5)
particleCountnumber150The number of animated particles around the blob
enableEffectsbooleantrueWhether to enable post-processing effects (bloom, etc.)
childrenReact.ReactNodeundefinedContent to display over the blob
classNamestringundefinedAdditional CSS classes for the container