Ripple

Concentric rings that breathe from the center, behind a logo or a button.

Ripple

Installation#

pnpm dlx shadcn@latest add @balick/ripple

Or pass the full URL: https://ui.balick.me/r/ripple.json

Usage#

import { Ripple } from "@/components/ui/ripple"

export function Cta() {
  return (
    <section className="relative flex h-96 items-center justify-center overflow-hidden">
      <Ripple />
      <a href="#" className="relative">Get started</a>
    </section>
  )
}

Props#

Prop	Type	Default	Description
`rings` Number of rings.	`number`	8	Number of rings.
`size` Diameter of the smallest ring, in pixels.	`number`	180	Diameter of the smallest ring, in pixels.
`step` Space added to the diameter from one ring to the next, in pixels.	`number`	72	Space added to the diameter from one ring to the next, in pixels.
`duration` Duration of one breath, as a CSS time.	`string`	"3.4s"	Duration of one breath, as a CSS time.