40973894

Siri Wave

Shaders 824

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

More in Shaders

View all
  • Glass Fold

    Glass Fold

    212
  • Neural Noise

    Neural Noise

    717
  • Water Caustic

    Water Caustic

    44
  • Shader Background

    Shader Background

    2K
  • Wave

    Wave

    687
  • Stripe like gradient-shader

    Stripe like gradient-shader

    265
  • Black Hole

    Black Hole

    23
  • Shader Lines

    Shader Lines

    2.3K