Getting Started

Templates

Mockups

Components

Special Animations

Buttons

Text Animations

Backgrounds

SVG Ripple Effect

Animated SVG ripple effect component with customizable transitions and fade overlays.

Open in

import SvgRippleEffect from "@/registry/eldoraui/svg-ripple-effect"

export function SvgRippleEffectDemo() {
  return (
    <div className="bg-background relative mx-auto h-[300px] w-[300px] overflow-hidden rounded-lg border">
      <SvgRippleEffect
        transition={{
          duration: 0.75,
          repeat: Infinity,
          repeatDelay: 1.25,
        }}
        fade={["top", "bottom"]}
        image="https://res.cloudinary.com/eldoraui/image/upload/v1759610754/icon_fcvkvx.png"
      />
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @eldoraui/svg-ripple-effect

Examples

With Hover Animation

Open in

import SvgRippleEffect from "@/registry/eldoraui/svg-ripple-effect"

export function SvgRippleEffectDemo2() {
  return (
    <div className="bg-background relative mx-auto h-[300px] w-[300px] overflow-hidden rounded-lg border">
      <SvgRippleEffect
        transition={{
          duration: 0.75,
          repeat: Infinity,
          repeatDelay: 1.25,
        }}
        fade={["top", "bottom"]}
        image="https://res.cloudinary.com/eldoraui/image/upload/v1759610754/icon_fcvkvx.png"
        whileHover={true}
      />
    </div>
  )
}

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

Separate Away Text Terminal

On This Page

Contribute

Join Us on Discord

Eldora UI

Get latest updates and support
and get help from our community

Join Now

Trusted by 1,000+ developers

SVG Ripple Effect

Animated SVG ripple effect component with customizable transitions and fade overlays.

Open in

import SvgRippleEffect from "@/registry/eldoraui/svg-ripple-effect"

export function SvgRippleEffectDemo() {
  return (
    <div className="bg-background relative mx-auto h-[300px] w-[300px] overflow-hidden rounded-lg border">
      <SvgRippleEffect
        transition={{
          duration: 0.75,
          repeat: Infinity,
          repeatDelay: 1.25,
        }}
        fade={["top", "bottom"]}
        image="https://res.cloudinary.com/eldoraui/image/upload/v1759610754/icon_fcvkvx.png"
      />
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @eldoraui/svg-ripple-effect

Examples

With Hover Animation

Open in

import SvgRippleEffect from "@/registry/eldoraui/svg-ripple-effect"

export function SvgRippleEffectDemo2() {
  return (
    <div className="bg-background relative mx-auto h-[300px] w-[300px] overflow-hidden rounded-lg border">
      <SvgRippleEffect
        transition={{
          duration: 0.75,
          repeat: Infinity,
          repeatDelay: 1.25,
        }}
        fade={["top", "bottom"]}
        image="https://res.cloudinary.com/eldoraui/image/upload/v1759610754/icon_fcvkvx.png"
        whileHover={true}
      />
    </div>
  )
}

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

Separate Away Text Terminal

On This Page

Contribute

Join Us on Discord

Eldora UI

Get latest updates and support
and get help from our community

Join Now

Trusted by 1,000+ developers