40973894

Siri Wave

Component 143

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 SiriWaveFluidDotsDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[#0a0a0c] p-8">
      <SiriWave
        variant="fluid-dots"
        size={360}
        className="shadow-[0_20px_60px_rgba(0,0,0,0.6)]"
      />
    </div>
  )
}