Orb

A 2D animated orb with audio reactivity, custom colors, and agent state visualization built with WebGL shaders.

Installation

pnpm dlx shadcn@latest add https://ui.synergyshock.com/r/synergy/orb.json

Usage

import { Orb } from "@/components/ui/synergy/orb"

export default function App() {
  return (
    <div style={{ width: 300, height: 300 }}>
      <Orb />
    </div>
  )
}

Examples

Custom Colors

Specify gradient colors via the colors prop.

<Orb colors={["#FF6B6B"]} />
<Orb colors={["#FF6B6B", "#4ECDC4"]} />
<Orb colors={["#FF6B6B", "#4ECDC4", "#FFFFFF"]} />

Agent State

Manage visual states to reflect the agent’s current activity.

<Orb agentState="idle" />
<Orb agentState="thinking" />
<Orb agentState="listening" />
<Orb agentState="talking" />

Manual Volume Control

Directly control input and output volume values.

<Orb inputVolume={0.5} outputVolume={0.8} />

Custom Seed

Use a fixed seed for consistent animation patterns across renders.

<Orb seed={42} />

Audio Reactivity

Use callback functions to provide real-time volume data.

<Orb
  getInputVolume={() => microphoneLevel}
  getOutputVolume={() => speakerLevel}
/>

API Reference

Props

Prop	Type	Default	Description
`colors`	`[string] \| [string, string] \| [string, string, string]`	`["#CADCFC", "#A0B9D1", "#FFFFFF"]`	Color ramp. 1 color: `[c, c, white]`. 2 colors: `[c1, c1, c2]`. 3 colors: as-is.
`seed`	`number`	Random	Seed for consistent animation patterns.
`agentState`	`AgentState`	`"idle"`	Visual state of the agent.
`inputVolume`	`number`	—	Input volume (0–1). Providing any volume prop switches to manual mode.
`outputVolume`	`number`	—	Output volume (0–1). Providing any volume prop switches to manual mode.
`getInputVolume`	`() => number`	—	Callback to get current input volume. Switches to manual mode.
`getOutputVolume`	`() => number`	—	Callback to get current output volume. Switches to manual mode.
`className`	`string`	`"relative h-full w-full"`	Custom CSS class for the container.

AgentState

type AgentState = null | "thinking" | "listening" | "talking"

State	Description
`null`	Idle state with subtle ambient animation.
`"thinking"`	Gentle wandering motion indicating processing.
`"listening"`	Responsive animation simulating active listening.
`"talking"`	Dynamic animation simulating speech output.

Notes

The component uses raw WebGL shaders — no Three.js dependency required.

The canvas automatically handles device pixel ratio for sharp rendering on high-DPI displays.

The component properly cleans up WebGL resources on unmount.