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 (idle, listening, thinking, streaming, done, error)
• Reacts to a live amplitude signal: loud audio tightens the gradient, which reads as the orb focusing
• Size-aware blur, contrast, dot size and mask radius, so it holds up from 16px to hero scale
• Fully customisable palette

The state contract

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

Created by

Edu Calvo

Improved by