Premium & Brand

Meteors

Server Component

A field of shooting-star trails drifting across a surface.

Import

tsx

import { Meteors } from "@cronus-ui/ui";

bash

npx cronus-ui add meteors

Examples

Shooting stars

Shooting stars fall diagonally from the top and burst as they leave the bottom. Positions are derived from the meteor index, so server and client paint the same field.

Launch window

tsx

<Meteors className="grid min-h-56 place-items-center rounded-2xl border border-border bg-surface-raised">
  <p className="font-display text-2xl text-fg">Launch window</p>
</Meteors>

API Reference

Generated from the component's exported types.

MeteorsProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	—
`count`	`number`	`20`	Number of shooting stars. Clamped to `1–60`.