Siri Orb

AI chats 160

About

Siri-style animated audio visualizer orb with conic gradients, smooth rotation, and customizable colors. Pure CSS animation, respects prefers-reduced-motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Siri Orb to your project and fits it to your theme.

Code

How Siri Orb is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}