Meteors
meteorsAnimates diagonal meteor streaks behind content.
Usage
Basic usage
Put Meteors into a relative + overflow-hidden container. By default, 20 meteors will fall diagonally.
<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 of meteors
Use number to control meteor density, a small amount is more restrained, a large amount is more gorgeous.
<div className="relative h-48 w-80 overflow-hidden rounded-xl border border-border bg-surface">
<Meteors number={40} />
</div>Fall speed and delay
minDuration / maxDuration controls the duration of a single meteor, and minDelay / maxDelay controls the staggered appearance.
<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>Fall angle
angle Adjust the meteor falling direction (degrees), 215 is the default lower left, and can be changed to vertical or reverse.
<div className="relative h-48 w-80 overflow-hidden rounded-xl border border-border bg-surface">
<Meteors number={20} angle={250} />
</div>Custom color
The meteor head/tail uses currentColor, and the color can be changed through the text-* class of className.
<div className="relative h-48 w-80 overflow-hidden rounded-xl border border-border bg-surface">
<Meteors number={24} className="text-primary" />
</div>When to Use
Use it when you need to stack a layer of falling meteors in the Hero/card/empty state container to embellish the atmosphere. It is a lightweight pure DOM animation (no canvas/WebGL), suitable for small foreground decorations; if you want a continuous dynamic background that covers the entire screen, select Aurora / WavyBackground; if you want a regular geometric shading (lattice/grid), select DotPattern / GridPattern.
Import
import { Meteors } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| number | number | 20 | Number of meteors |
| minDelay | number | 0.2 | Minimum delay for single animation start (seconds) |
| maxDelay | number | 1.2 | Maximum delay before one animation starts (seconds) |
| minDuration | number | 2 | Minimum fall duration (seconds) |
| maxDuration | number | 10 | Maximum fall duration (seconds) |
| angle | number | 215 | Falling angle (degrees) |
| className | string | — | Extra class passed through to each meteor span (the meteor itself uses currentColor, which can be used to adjust the color) |
Usage Guidelines
- The meteor position/delay is randomly generated on the client side, the component must be rendered on the client side, and the position is not determined before the first frame (the SSR will be one frame different from the first screen). Do not use it in places sensitive to the pixel stability of the first screen.
- The color of the meteor is
currentColor, which is colored by the parenttext-*orclassNamewithout passing the color prop. - The parent container needs
position: relative+overflow-hidden, otherwise the meteor will overflow outside the container.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative overflow-hidden">
<Meteors number={20} />
</div>