Ripple
rippleEmits concentric decorative rings from a configurable origin.
Usage
Basic usage
relative + place-items-center Place a layer of Ripple in the container to obtain concentric pulse rings, often used as hero/empty state background.
<div className="relative grid h-56 w-full place-items-center overflow-hidden rounded-xl border border-border bg-surface">
<Ripple />
<span className="z-10 text-sm font-medium">Ripple</span>
</div>Number of turns and starting size
numCircles controls the number of turns, mainCircleSize controls the diameter of the innermost ring - fewer turns are more focused.
<div className="relative grid place-items-center ...">
<Ripple mainCircleSize={140} numCircles={5} />
</div>Change color and opacity
Take currentColor for the border and use text-* to change the color; mainCircleOpacity adjusts the starting opacity of the innermost circle.
<div className="relative grid place-items-center ...">
<Ripple mainCircleSize={150} className="text-primary" mainCircleOpacity={0.35} />
</div>When to Use
Concentric pulses radiating outward from the center (radar scan, signal broadcast, CTA focus ambience). If you want a pulse ring, use this component; if you want a static radial glow, use Spotlight; if you want a regular texture, use DotPattern / GridPattern.
Import
import { Ripple } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| mainCircleSize | number | 210 | Innermost ring diameter px |
| mainCircleOpacity | number | 0.24 | Innermost circle opacity |
| numCircles | number | 8 | Number of rings |
Inherited fromComponentPropsWithoutRef<"div">. The color iscurrentColorand controlled by thetext-*tool class.
Usage Guidelines
- The internal
absolute inset-0is filled with the parent and must be placed in therelativepositioning container. It is usually equipped withgrid place-items-centerto allow the pulse to spread from the center of the content. - Rings use staggered CSS animation and stop under
prefers-reduced-motion.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Meteors
Playground
<div className="relative grid place-items-center">
<Ripple mainCircleSize={180} numCircles={8} />
</div>