Meteors
A deterministic meteor shower over a faint star field — identical on server and client, animated purely with the `animate-meteor` keyframes from opus.css.
csszero-jsrscspace2 files · 81 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/meteors.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs meteorsUsage
import { Meteors } from "@/components/opus/backgrounds/meteors";
<Meteors count={18} className="absolute inset-0" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 18 | Number of meteors. |
| color / background | string | — | Meteor and sky colours. |
| angle | number | 215 | Fall direction (deg). |
| duration | number | 7 | Average flight time (s). |
| stars | boolean | true | Static stars behind. |
| className | string | — | Wrapper classes — `absolute inset-0` to fill a relative parent. |
| children | ReactNode | — | Content rendered on top. |
Notes
- No canvas, no WebGL — only CSS gradients/masks and compositor-friendly transform animations.
- Server-component safe unless marked otherwise; animations stop under
prefers-reduced-motion. - Needs the
opus-meteorkeyframes from opus.css.