About
Siri-style GLSL shaders on a raw WebGL canvas — an iOS voice waveform with chromatic aberration and a fluid-dots metaball orb that merges, scatters and gathers. Dependency-free, two variants via a single `variant` prop.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Siri Wave to your project and fits it to your theme.
Code
How Siri Wave is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { SiriWave } from "@/components/ui/siri-wave"
export default function SiriWaveDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-[#0a0a0c] p-8">
<SiriWave
variant="wave"
size={360}
className="shadow-[0_20px_60px_rgba(0,0,0,0.6)]"
/>
</div>
)
}








