AnimationsProNew
Siri Orb
A shimmering orb like voice assistants have. Breathes at rest, speeds up while thinking, pulses with the voice.
Customize
mainColor
secondColor
highlightColor
Based on Siri Orb (MIT license) · Terms of use
Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| state | 'idle' | 'listening' | 'thinking' | 'streaming' | 'done' | 'error' | "idle" | AI assistant state. Changes the orb's speed, size and glow. |
| size | string | "192px" | Orb size in pixels. |
| animationDuration | number | 20 | Time of one color turn, in seconds. |
| amplitude | number | MotionValue<number> | — | Voice level from 0 to 1. The orb pulses along. |
| colors | { bg?: string; c1?: string; c2?: string; c3?: string; c4?: string } | — | Background and four gradient colors. |
| mainColor | string | "#f8f8f8" | First colour of the orb, the main one. Wins over colors.c1. |
| secondColor | string | "#c4c4c4" | Second colour of the orb, also the glow. Wins over colors.c2. |
| highlightColor | string | "#717171" | Third colour of the orb. Wins over colors.c3. |
| className | string | — | Classes for the wrapper. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge