Shader Ripple

PreviousNext

Example showing a simple shader ripple.

Docs
aliimamexample

Preview

Loading preview…
registry/default/example/backgrounds/shader-ripple/shader-ripple-02.tsx
import { ShaderRipple } from "@/registry/default/components/shader-ripple";

export default function Component() {
  return (
    <main className="flex h-[600px] w-5xl items-center justify-center overflow-hidden rounded-md border">
      <ShaderRipple
        loopDuration={0.9}
        waveIntensity={0.2}
        timeScale={1}
        backgroundColor="#db2777"
        color1="#c2410c"
        color3="#db2777"
        color2="#dc2626"
        rotation={45}
        mod={0.4}
      />
    </main>
  );
}

Installation

npx shadcn@latest add @aliimam/shader-ripple-02

Usage

import { ShaderRipple02 } from "@/components/shader-ripple-02"
<ShaderRipple02 />