40973894

Siri Wave

Shaders 840

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

    263
  • Shader Animation

    Shader Animation

    3.7K
  • DitheredShaderBackground

    DitheredShaderBackground

    44
  • Wave

    Wave

    692
  • Gigabit

    Gigabit

    55
  • Shader Dithering

    Shader Dithering

    35
  • LightSpeed

    LightSpeed

    214
  • Liquid Glass Logo Reveal

    Liquid Glass Logo Reveal

    454