Ripple
ripple同心脉冲圆环 · CSS 逐圈延迟 + reduced-motion
用法
基础用法
relative + place-items-center 容器内放一层 Ripple 即得同心脉冲圆环，常作 hero/空状态背景。
Ripple
tsx
<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>圈数与起始尺寸
numCircles 控制圈数，mainCircleSize 控制最内圈直径——少圈更聚焦。
Ripple
tsx
<div className="relative grid place-items-center ...">
<Ripple mainCircleSize={140} numCircles={5} />
</div>改色与不透明度
边框取 currentColor，用 text-* 换色；mainCircleOpacity 调整最内圈起始不透明度。
Ripple
tsx
<div className="relative grid place-items-center ...">
<Ripple mainCircleSize={150} className="text-primary" mainCircleOpacity={0.35} />
</div>何时用
中心向外扩散的同心脉冲（雷达扫描、信号广播、CTA 焦点氛围）。要脉冲圆环用本组件；要静态径向辉光用 Spotlight，要规整纹理用 DotPattern / GridPattern。
导入
ts
import { Ripple } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| mainCircleSize | number | 210 | 最内圈直径 px |
| mainCircleOpacity | number | 0.24 | 最内圈不透明度 |
| numCircles | number | 8 | 圈数 |
继承ComponentPropsWithoutRef<"div">。颜色取currentColor，用text-*工具类控制。
禁忌 / 坑
- 内部
absolute inset-0铺满父级，须放在relative定位容器内，通常配grid place-items-center让脉冲从内容中心扩散。 - 含逐圈延迟的 CSS 动画，已内置
prefers-reduced-motion降级。
相关
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Meteors
Playground
Ripple
<div className="relative grid place-items-center">
<Ripple mainCircleSize={180} numCircles={8} />
</div>