Meteors

PreviewCode

Meteors

@/demos/MeteorsDemo.tsx

import { Meteors } from '@/registry/magicui/meteors'

export function MeteorsDemo() {
  return (
    <div class="
      relative flex h-125 w-full flex-col items-center justify-center
      overflow-hidden rounded-lg border
    "
    >
      <Meteors number={30} />
      <span class="
        pointer-events-none bg-linear-to-b from-black to-gray-300/80
        bg-clip-text text-center text-8xl leading-none font-semibold
        whitespace-pre-wrap text-transparent
        dark:from-white dark:to-slate-900/10
      "
      >
        Meteors
      </span>
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/meteors

bun

bunx shadcn@latest add @magicui-solid/meteors

yarn

yarn dlx shadcn@latest add @magicui-solid/meteors

npm

npx shadcn@latest add @magicui-solid/meteors

Import

import { Meteors } from '@/components/magicui/meteors'

Usage

<div class="relative h-125 w-full overflow-hidden">
  <Meteors />
</div>

Props

Prop	Type	Default	Description
number	number	20	Number of meteors
minDelay	number	0.2	Minimum delay in seconds before meteor animation starts
maxDelay	number	1.2	Maximum delay in seconds before meteor animation starts
minDuration	number	2	Minimum duration in seconds for meteor animation
maxDuration	number	10	Maximum duration in seconds for meteor animation
angle	number	215	Angle in degrees for meteor trajectory
class	string	-	Optional additional CSS classes

Original:

magicui.design/docs/components/meteors