Ripple

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

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/ripple

npx layro-cli add @magicuidesign/ripple

npx layro-cli add @magicuidesign/ripple

bunx layro-cli add @magicuidesign/ripple

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import React, { type ComponentPropsWithoutRef, type CSSProperties } from "react"

import { cn } from "@/lib/utils"

interface RippleProps extends ComponentPropsWithoutRef<"div"> {
  mainCircleSize?: number
  mainCircleOpacity?: number
  numCircles?: number
}

export const Ripple = React.memo(function Ripple({
  mainCircleSize = 210,
  mainCircleOpacity = 0.24,
  numCircles = 8,