Wensity

AI Orb

Pro

A near-black glass sphere with a violet rim that drifts while a model generates.

3dwebglorbailoader
AI Orb component preview

Overview

AI Orb is a React and Tailwind CSS loading orb for AI image and text generation, in Next.js or any React app, drawn by a WebGL shader with no libraries. Pale violet light sits on the rim of a near black glass sphere and slowly drifts, with no label painted inside. Five palettes, violet, cove, amber, ember, and rose, keep the same dark core, and speed and intensity tune the light. It announces itself as Generating, falls back to a CSS gradient, and holds still for reduced motion. It draws every frame while mounted, so unmount it when generation finishes.

Installation

Run the following command

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

Usage

Import AiOrb from @/components/wensity/ai-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 { AiOrb } from "@/components/wensity/ai-orb";


export default function Example() {
  return (
    <div className="grid min-h-[560px] place-items-center bg-black">
      <AiOrb size={240} speed={1} />
    </div>
  );
}

Props

PropTypeDefaultDescription
sizenumber240Orb diameter in CSS pixels.
speednumber1How lively the inner light is. 1 is the stock cadence. Lower is calmer.
palette"violet" | "cove" | "amber" | "ember" | "rose""violet"Rim gradient. Violet is the reference. The others keep the same dark core and pale limb.
intensitynumber1How strong the rim light is. 1 is the reference.

Related components

  • 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.

  • AI Model Selector component preview

    AI Model Selector

    An AI model selector dropdown that scales out from its trigger and glides the selection pill to whichever model you pick.

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