Ripple

An animated ripple effect typically used behind elements to emphasize them.

Ripple

import { Ripple } from '@/registry/magicui/ripple'

export function RippleDemo() {
  return (
    <div class="
      relative flex h-125 w-full flex-col items-center justify-center
      overflow-hidden rounded-lg border bg-background
    "
    >
      <p class="
        z-10 text-center text-5xl font-medium tracking-tighter
        whitespace-pre-wrap text-white
      "
      >
        Ripple
      </p>
      <Ripple />
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @magicui-solid/ripple

bunx shadcn@latest add @magicui-solid/ripple

yarn dlx shadcn@latest add @magicui-solid/ripple

npx shadcn@latest add @magicui-solid/ripple

Usage

import { Ripple } from '@/components/magicui/ripple'

<div className="relative h-[500px] w-full overflow-hidden">
  <Ripple />
</div>

Props

Prop	Type	Default	Description
`mainCircleSize`	`number`	`210`	The size of the main circle in pixels
`mainCircleOpacity`	`number`	`0.24`	The opacity of the main circle
`numCircles`	`number`	`8`	The number of ripple circles to render

Original:

magicui.design/docs/components/ripple