Meteors
meteors流星雨 · 随机斜落拖尾(客户端生成) + currentColor
用法
基础用法
把 Meteors 放进一个 relative + overflow-hidden 容器，默认 20 颗流星斜向下落。
Meteors
tsx
<div className="relative h-48 w-80 overflow-hidden rounded-xl border border-border bg-surface">
<Meteors />
<div className="grid h-full place-items-center text-sm text-muted">Meteors</div>
</div>流星数量
用 number 控制流星密度，少量更克制、大量更绚烂。
number=40
tsx
<div className="relative h-48 w-80 overflow-hidden rounded-xl border border-border bg-surface">
<Meteors number={40} />
</div>下落速度与延迟
minDuration / maxDuration 控制单颗流星的时长区间，minDelay / maxDelay 控制错落出场。
慢速错落
tsx
<div className="relative h-48 w-80 overflow-hidden rounded-xl border border-border bg-surface">
<Meteors number={24} minDuration={3} maxDuration={6} minDelay={0} maxDelay={2} />
</div>下落角度
angle 调整流星下落方向（度），215 为默认左下，可改成竖直或反向。
angle=250
tsx
<div className="relative h-48 w-80 overflow-hidden rounded-xl border border-border bg-surface">
<Meteors number={20} angle={250} />
</div>自定义颜色
流星头/尾用 currentColor，通过 className 的 text-* 类即可换色。
text-primary
tsx
<div className="relative h-48 w-80 overflow-hidden rounded-xl border border-border bg-surface">
<Meteors number={24} className="text-primary" />
</div>何时用
需要在 Hero / 卡片 / 空状态等容器内叠一层斜落流星点缀气氛时用。它是轻量的纯 DOM 动画（无 canvas/WebGL），适合做前景小装饰；若要铺满整屏的连续动态背景，选 Aurora / WavyBackground；若要规则的几何底纹（点阵/网格），选 DotPattern / GridPattern。
导入
ts
import { Meteors } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| number | number | 20 | 流星数量 |
| minDelay | number | 0.2 | 单颗动画启动最小延迟（秒） |
| maxDelay | number | 1.2 | 单颗动画启动最大延迟（秒） |
| minDuration | number | 2 | 单颗下落最短时长（秒） |
| maxDuration | number | 10 | 单颗下落最长时长（秒） |
| angle | number | 215 | 下落角度（度） |
| className | string | — | 透传到每颗流星 span 的额外类（流星本身用 currentColor，可借此调色） |
禁忌 / 坑
- 流星位置/延迟在客户端随机生成，组件必须在客户端渲染，且首帧前位置未定（SSR 与首屏会有一帧差异），勿用于对首屏像素稳定性敏感处。
- 流星颜色取
currentColor，靠父级text-*或className着色，不传颜色 prop。 - 父容器需
position: relative+overflow-hidden，否则流星会溢出到容器外。
相关
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
Meteors
<div className="relative overflow-hidden">
<Meteors number={20} />
</div>