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.

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
mouseTrackingbooleanundefinedEnable mouse interaction (currently not implemented)