Components
/Siri Orb
Siri Orb
Siri-style animated audio visualizer orb with conic gradients, smooth rotation, and customizable colors. Pure CSS animation, respects prefers-reduced-motion.
Loading preview...
import { Component } from "@/components/ui/siri-orb";
export default function DemoOne() {
return (
<div className="flex min-h-[400px] items-center justify-center gap-8 bg-white p-8">
<div className="text-center">
<Component />
<p className="mt-2 text-gray-600 text-sm">Default</p>
</div>
<div className="text-center">
<Component size="96px" />
<p className="mt-2 text-gray-600 text-sm">Small</p>
</div>
<div className="text-center">
<Component
animationDuration={15}
colors={{
bg: "oklch(98% 0.01 264.695)",
c1: "oklch(70% 0.2 120)",
c2: "oklch(75% 0.18 60)",
c3: "oklch(80% 0.15 300)",
}}
size="128px"
/>
<p className="mt-2 text-gray-600 text-sm">Custom</p>
</div>
</div>
);
}