Background & Atmosphere

Meteor Background

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

Preview

ambient effect

Meteor Background

streaks pass across the stage

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/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

PropTypeDefaultDescription
numbernumber20Number of meteors to render.
minDelaynumber0.2Minimum animation delay.
maxDelaynumber1.2Maximum animation delay.
minDurationnumber2Minimum animation duration.
maxDurationnumber10Maximum animation duration.
anglenumber215Meteor travel angle.

Reference

Reference Meteor Background