Meteors
A background meteor / meteor shower effect, with glowing trails and twinkling stars drawn on canvas 2D.
A night-sky meteor shower simulated on canvas 2D: every meteor carries a gradient trail and a glowing head, with an optional layer of faintly twinkling stars behind it — a good fit as a hero or card backdrop.
npx shadcn@latest add https://webberui.com/r/meteors.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<Meteors />
Installation
npx shadcn@latest add https://webberui.com/r/meteors.jsonOr, once registries are configured in components.json, install it as @webberui/meteors.
Usage
Pass your foreground content as children and the meteors will sit beneath it:
import { Meteors } from "@/components/ui/meteors";
<Meteors className="h-[320px] w-full rounded-xl">
<div className="relative z-10 flex h-full items-center justify-center">
<h3 className="text-2xl font-semibold text-slate-100">Meteor Shower</h3>
</div>
</Meteors>The container height is up to your className (for example h-[320px]); the component itself uses no viewport height units.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
quantity | number | 20 | Number of meteors on screen at once |
color | string | currentColor | Meteor color; follows the theme's text color when unspecified |
angle | number | 115 | Flight direction in degrees — 0 is rightward, 90 is straight down |
speed | number | 8 | Head speed (px of displacement per frame) |
trailLength | number | 120 | Base trail length (px) |
glow | boolean | true | Whether the meteor head carries a glow |
stars | boolean | true | Whether a layer of twinkling stars is drawn behind |
children | ReactNode | — | Foreground content layered above the meteors |
Accessibility
- When the user has "reduce motion" enabled at the system level, only a single static frame of stars and meteors is drawn and the animation loop never starts
- The canvas is a purely decorative layer with
aria-hiddenandpointer-events-none, so it interferes with neither the foreground content nor assistive technology
Spotlight Background
A sweeping spotlight background with three built-in looks — sweeping light cones, a rotating radar, and a static stage beam — that can track the cursor.
Globe
A self-rotating, interactive WebGL-style globe (GitHub-style), simulated with a canvas 2D point cloud, arcs, and an atmospheric glow.