Background & Atmosphere

Meteor Background

화면 위로 유성이 떨어지는 듯한 배경 효과입니다.

Preview

ambient effect

Meteor Background

streaks pass across the stage

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/meteors.json

Code

typescript
Copied
1import { Meteors } from "@/components/meteors"23export default function Example() {4  return (5    <div className="relative overflow-hidden rounded-xl border p-6">6      <Meteors number={20} />7      Meteors8    </div>9  )10}

Props

number

Type
number
Default
20
Description
Number of meteors to render.

minDelay

Type
number
Default
0.2
Description
Minimum animation delay.

maxDelay

Type
number
Default
1.2
Description
Maximum animation delay.

minDuration

Type
number
Default
2
Description
Minimum animation duration.

maxDuration

Type
number
Default
10
Description
Maximum animation duration.

angle

Type
number
Default
215
Description
Meteor travel angle.

Reference

Reference Meteor Background