127 Components
Siri Glow Edge
MotionApple Intelligence-inspired fluid perimeter rainbow chromatic aura with multi-layer conic gradient blur, breathing light cycles, live voice waveform reaction, and adjustable glow thickness.
Apple Intelligence
Contextual language reasoning at edge latency.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/siri-glow-edge.json"
Props
TypeScript props supported by <SiriGlowEdge />.
| Prop | Type | Default | Description |
|---|---|---|---|
| initialState | "idle" | "listening" | "thinking" | "responding" | "idle" | Initial state of the Apple Intelligence assistant aura. |
| intensity | number | 1.0 | Brightness and opacity multiplier for the chromatic aura. |
| glowWidth | number | 14 | Perimeter blur spread radius in pixels. |
| enableBreathing | boolean | true | Whether the aura subtly expands and breathes over time. |
| children | React.ReactNode | — | Content wrapped inside the illuminated glassmorphic card. |
| className | string | — | Tailwind CSS classes for the root container. |
Key Features
- Multi-layer rotating conic rainbow gradient wrapping any container or card.
- Dual-blur architecture combining sharp perimeter border sheen with atmospheric ambient bloom.
- Realistic breathing light cycle with state-dependent pulse speeds (idle, listening, thinking, responding).
- Dynamic live audio waveform bars synchronized with assistant voice modes.
- Adjustable aura intensity and spread radius slider controls.
Keyboard & Accessibility
- Uses accessible ARIA status updates when assistant state transitions between listening and idle.
- Respects reduced motion preferences by dampening rotational speed and breathing pulsation.
- High-contrast card core ensures text remains comfortably legible over luminous borders.