║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: SVG Ripple Effect date: 2025-01-27 description: Animated SVG ripple effect component with customizable transitions and fade overlays. author: Karthikeyavarma published: true

<ComponentPreview name="svg-ripple-effect-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @eldoraui/svg-ripple-effect

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

components/eldoraui/svg-ripple-effect.tsx

<ComponentSource name="svg-ripple-effect" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Examples

With Hover Animation

<ComponentPreview name="svg-ripple-effect-demo-2" />

Usage

import { SvgRippleEffect } from "@/components/eldoraui/svg-ripple-effect"

<SvgRippleEffect
  transition={{
    duration: 0.75,
    repeat: Infinity,
    repeatDelay: 1.25,
  }}
  fade={["top", "bottom"]}
/>

Props

| Prop | Type | Default | Description | | ------------ | ----------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------- | | transition | object | { duration: 0.75, repeat: Infinity, repeatDelay: 1.25 } | Animation transition configuration with duration, repeat count, and delay | | fade | ('top' \| 'bottom')[] | [] | Array of fade directions to apply gradient overlays |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║