Signature / Moleculestable

Ripple

Concentric expanding rings radiating from center for decorative backgrounds.

@glinui/uiComponent: ripple

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add ripple

Usage$

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

Basic$

Ripple

TSX

1import { Ripple } from "@glinui/ui"
2
3export function RippleDemo() {
4return (
5  <div className="relative flex h-48 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950">
6    <span className="z-10 text-sm font-medium">Ripple</span>
7    <Ripple />
8  </div>
9)
10}

Examples$

Glass Variant$

Glass Ripple

TSX

1import { Ripple } from "@glinui/ui"
2
3export function RippleGlassDemo() {
4return (
5  <div className="relative flex h-48 w-full items-center justify-center overflow-hidden rounded-xl border border-white/20 bg-white/30 backdrop-blur-xl dark:border-white/10 dark:bg-white/5">
6    <span className="z-10 text-sm font-medium">Glass Ripple</span>
7    <Ripple variant="glass" count={4} />
8  </div>
9)
10}

Accent Variant$

Accent

TSX

1import { Ripple } from "@glinui/ui"
2
3export function RippleAccentDemo() {
4return (
5  <div className="relative flex h-48 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950">
6    <span className="z-10 text-sm font-medium">Accent</span>
7    <Ripple variant="accent" count={5} duration={3} />
8  </div>
9)
10}

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$

Prop	Type	Required	Default	Description
`count`	`number`	No	`3`	Auto-generated from TypeScript source.
`delay`	`number`	No	`0.4`	Auto-generated from TypeScript source.
`duration`	`number`	No	`2`	Auto-generated from TypeScript source.
`variant`	`"default" \| "glass" \| "accent"`	No	`"default"`	Variant option from rippleVariants.

Source$

TSX

1import { 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-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

RippleProps

`RippleProps`

Prop	Type	Required	Default	Description
`count`	`number`	No	`3`	-
`delay`	`number`	No	`0.4`	-
`duration`	`number`	No	`2`	-
`variant`	`"default" \| "glass" \| "accent"`	No	`"default"`	Variant option from rippleVariants.