Wensity

Siri Orb

Pro

A glassy WebGL sphere with a prism ribbon sweeping a full spectrum through it.

3dwebglorbaivoice
Siri Orb component preview

Overview

Siri Orb is a React and Tailwind CSS glass sphere for voice and AI assistants, in Next.js or any React app, rendered in WebGL with no libraries. Three strands of light fold through the middle, each carrying a spectrum along its length, and they cross into white where they meet. Speed, intensity, hue, and strand length are props. Dark mode shows smoked glass lit from inside, light mode shows clear glass, and reduced motion holds a still frame. Auto theme watches the dark class on the html element, so pass theme when your app uses a media query instead.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add siri-orb

Usage

Import SiriOrb from @/components/wensity/siri-orb and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { SiriOrb } from "@/components/wensity/siri-orb";


export default function Example() {
  return (
    <div className="grid min-h-[420px] place-items-center bg-[#fafafa] dark:bg-[#050506]">
      <SiriOrb size={260} speed={1} intensity={1} />
    </div>
  );
}

Props

PropTypeDefaultDescription
sizenumber260Orb diameter in CSS pixels.
speednumber1Ribbon drift rate multiplier. Lower is calmer, higher is livelier.
intensitynumber1Ribbon brightness multiplier. Raise it to blow the crossover out to white.
huenumber0Rotates the prism spectrum in degrees. 0 keeps the Siri red-to-blue split.
lengthnumber0.9How far the strands reach across the glass, as a fraction of the visible hemisphere. 1 runs tip to tip; above 1 the ends carry on around the back.
theme"auto" | "light" | "dark""auto"Which glass to render. Auto follows the dark class on <html> — smoked glass in dark mode, clear glass in light.

Related components

  • iPhone Siri component preview

    iPhone Siri

    Tap the Dynamic Island and it swells into a live WebGL Siri orb of folded light.

  • AI Prompt Input component preview

    AI Prompt Input

    An expanding prompt area with a glowing drop zone that breathes open to meet you as you type a thought or drag a file.

  • Animated Loading Skeleton component preview

    Animated Loading Skeleton

    An organic loading state instead of a spinner, with a slow aurora that breathes in the space where your content will land.

  • Voice Reactive Orb component preview

    Voice Reactive Orb

    A breathing voice orb that swells with speech and settles between turns, never jittery and always organic to look at.

Featured in React 3D components and React AI chat UI components.