Siri Orb

Animated Siri-style orb built from layered conic gradients. Reads the shared AI state contract and reacts to real microphone loudness.

Installation

npx smoothui-cli add siri-orb

Features

Six layered conic gradients animated through a registered --angle property. Reads the shared AIState contract and reacts to a live amplitude signal.

Scroll the sections below — the panel shows one state at a time with simulated amplitude.

States

Idle

Slow rotation, slightly desaturated — the resting assistant.

Listening

Grows and fully reactive to amplitude — the orb focuses when audio is present.

Thinking

Rotation speeds up 2.2× with no size change, so the layout stays calm while work happens.

Streaming

Gentle pulse in sync with output — a softer, breathing motion.

Done

One settle overshoot when a task completes.

Error

Desaturates and shakes once, under 200ms.

Real audio reactivity

amplitude accepts a plain number or the MotionValue returned by useAudioAmplitude. Prefer the MotionValue: it updates outside React, so a 60fps audio signal never triggers a re-render.

"use client";

import { useAudioAmplitude } from "@/components/smoothui/ai-core";
import SiriOrb from "@/components/smoothui/siri-orb";

export const VoiceButton = () => {
  const { amplitude, status, start, stop } = useAudioAmplitude();
  const isActive = status === "active";

  return (
    <button onClick={() => (isActive ? stop() : start())} type="button">
      <SiriOrb
        amplitude={amplitude}
        size="96px"
        state={isActive ? "listening" : "idle"}
      />
    </button>
  );
};

When a permission prompt would be hostile — docs, marketing pages, previews — use useSimulatedAmplitude(state) instead. It produces a speech-like envelope whose energy follows the current state, so the reactive behaviour is visible without asking for anything.

Accessibility

Reduced Motion

Uses useReducedMotion alongside a CSS @media (prefers-reduced-motion: reduce) rule. When enabled, rotation pauses, amplitude reactivity is disabled and state changes apply instantly. This is a purely decorative component with no interactive or semantic content.

Props