Avery Orb Component

Interactive demo of all orb states and sizes

Orb State

Attentive: Orb is bright with gentle pulse. Rings rotate slowly, particles drift. Used when awaiting user input.

Orb Size

All States (Small)

dormant

awakening

attentive

processing

presenting

Usage

import { AveryOrb } from '@/components/AveryOrb';

// Basic usage
<AveryOrb state="attentive" size="large" />

// With callback
<AveryOrb
  state="awakening"
  size="medium"
  onAwakeningComplete={() => {
    // Triggered when awakening animation completes
    setCurrentState('attentive');
  }}
/>

// Available states:
// 'dormant' | 'awakening' | 'attentive' | 'processing' | 'presenting'

// Available sizes:
// 'small' (80px) | 'medium' (200px) | 'large' (320px)