Graphics

Dust Particle Sphere 3D

A neomorphic glassmorphic display card rendering an interactive, voice-reactive Three.js 3D scattered point cloud sphere.

Loading 3D globe...

Installation

Option A: Via Sora UI CLI (Recommended)

If your project uses `shadcn/ui`, you can install this component and its dependencies automatically:

npx soraui-cli add dust-sphere

Option B: Manual Copy-Paste

1. Copy the code from the Code > Component tab above.

2. Paste it in your project at components/dust-sphere.tsx.

3. Install the dependencies:

npm install framer-motion lucide-react clsx tailwind-merge three

API Reference

Detailed properties configuration for the Dust Particle Sphere. Adjust sizes, colors, deformation noise waves, and microphone volume parameters.

Prop	Type	Default	Description
`title`	`string`	`"Dust Particle Sphere 3D"`	Card header title.
`description`	`string`	`"Three.js Scattered Point Cloud Assistant Display"`	Card header description/subtitle.
`color`	`string`	`"#ffffff"`	Hex color code of the particles (e.g. '#00e5ff').
`noiseIntensity`	`number`	`0.0`	Procedural wave morphing deformation strength (0.0 to 1.5).
`morphSpeed`	`number`	`0.4`	Morph speed rate multiplier.
`voiceReact`	`boolean`	`false`	Enables microphone access and voice reactivity.
`componentColor`	`string`	`"rgba(10, 20, 32, 0.55)"`	Background color of the outer glass card (rgba or hex).

Examples

Basic Cyan Display

Default static sphere with custom cyan color particles.

App.tsx

import { DustSphere } from "@/components/ui/dust-sphere";

export default function Demo() {
  return (
    <DustSphere 
      title="Point Cloud Visualizer" 
      color="#00e5ff" 
    />
  );
}

High Morph & Voice Reactivity

Fast-moving wave-morphed red sphere that expands/deforms dynamically to microphone voice input.

App.tsx

import { DustSphere } from "@/components/ui/dust-sphere";

export default function App() {
  return (
    <DustSphere
      title="Morphing Particle Cloud"
      color="#ff3b30" // Red particles
      noiseIntensity={1.2} // High distortion
      morphSpeed={0.8} // Fast morph waves
      voiceReact={true} // Dynamic microphone reacts
    />
  );
}