ChatGPT Orb

Pro

Low-power WebGL fractal noise that blooms white ink inside a soft circular mask.

3dwebglorbaivoice

Overview

ChatGPT Orb is a React and Tailwind CSS animated orb for AI assistants and voice screens, in Next.js or any React app, drawn by a single WebGL shader with no libraries. Fractal noise drifts ink across a soft circular mask, blooming from white into the accent color you pass. Pixel density is capped at 2x, drawing stops in background tabs, and reduced motion renders one still frame. A CSS gradient sits under the canvas, so the orb never shows blank while WebGL starts or if it fails. The color prop only takes hex values, not CSS variables or rgb().

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add chatgpt-orb

Usage

Import ChatgptOrb from @/components/wensity/chatgpt-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

1import { ChatgptOrb } from "@/components/wensity/chatgpt-orb";
2
3export default function Example() {
4  return <ChatgptOrb size={240} color="#1d6fe8" />;
5}

Props

Prop	Type	Default	Description
`size`	number	240	Orb diameter in CSS pixels.
`color`	string	"#1d6fe8"	Accent tint as #rgb or #rrggbb. Blooms from white into this color.
`speed`	number	1	Drift rate multiplier. Lower is calmer, higher is livelier.

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