Glin UI
Signature / Molecule

Ripple

Concentric expanding rings radiating from center for decorative backgrounds.

Edit on GitHub
Ripple

Installation$

Install from
pnpm dlx @glinui/cli@latest add ripple

Prefer the package?

Usage$

Place Ripple inside a relative container. The rings expand outward from the center.

Examples$

Glass Variant$

Glass Ripple
import { Ripple } from "@glinui/ui"



export function RippleGlassDemo() {
return (
  <div className="relative flex h-48 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--glass-border)] bg-[var(--glass-readable)] backdrop-blur-xl">
    <span className="z-10 text-sm font-medium">Glass Ripple</span>
    <Ripple variant="glass" count={4} />
  </div>
)
}

Accent Variant$

Accent
import { Ripple } from "@glinui/ui"



export function RippleAccentDemo() {
return (
  <div className="relative flex h-48 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--surface-1)]">
    <span className="z-10 text-sm font-medium">Accent</span>
    <Ripple variant="accent" count={5} duration={3} />
  </div>
)
}

Accessibility$

  • Ripple is purely decorative with pointer-events-none.
  • No interactive or focusable elements.

Reduced Motion$

Ring animations use motion-safe:animate-[...] / motion-reduce:hidden. Under prefers-reduced-motion, rings are hidden entirely.

API Reference$

PropTypeRequiredDefaultDescription
countnumberNo3Auto-generated from TypeScript source.
delaynumberNo0.4Auto-generated from TypeScript source.
durationnumberNo2Auto-generated from TypeScript source.
variant"default" | "glass" | "accent"No"default"Variant option from rippleVariants.

Source$

import { Ripple } from "@glinui/ui"
packages/ui/src/components/ripple.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/ripple.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

RippleProps

RippleProps

PropTypeRequiredDefaultDescription
countnumberNo3-
delaynumberNo0.4-
durationnumberNo2-
variant"default" | "glass" | "accent"No"default"Variant option from rippleVariants.