Signature / Moleculestable

Meteor Shower

Falling diagonal streaks with staggered delays for hero backgrounds.

@glinui/uiComponent: meteor-shower

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add meteor-shower

Usage$

Place inside a relative container. Meteors fall diagonally with staggered delays and randomized positions.

Basic$

Meteor Shower

TSX

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

Examples$

Dense$

Dense

TSX

1import { MeteorShower } from "@glinui/ui"
2
3export function MeteorShowerDenseDemo() {
4return (
5  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
6    <span className="z-10 text-sm font-medium text-white">Dense</span>
7    <MeteorShower count={24} minDuration={1} maxDuration={3} />
8  </div>
9)
10}

Accessibility$

Decorative (aria-hidden) — invisible to screen readers.
No interactive elements.

Reduced Motion$

Component returns null when prefers-reduced-motion is active.

API Reference$

Prop	Type	Required	Default	Description
`angle`	`number`	No	`215`	Auto-generated from TypeScript source.
`count`	`number`	No	`12`	Auto-generated from TypeScript source.
`maxDelay`	`number`	No	`4`	Auto-generated from TypeScript source.
`maxDuration`	`number`	No	`5`	Auto-generated from TypeScript source.
`minDelay`	`number`	No	`0`	Auto-generated from TypeScript source.
`minDuration`	`number`	No	`2`	Auto-generated from TypeScript source.

Source$

TSX

1import { MeteorShower } from "@glinui/ui"

packages/ui/src/components/meteor-shower.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/meteor-shower.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

MeteorShowerProps

`MeteorShowerProps`

Prop	Type	Required	Default	Description
`angle`	`number`	No	`215`	-
`count`	`number`	No	`12`	-
`maxDelay`	`number`	No	`4`	-
`maxDuration`	`number`	No	`5`	-
`minDelay`	`number`	No	`0`	-
`minDuration`	`number`	No	`2`	-