Background & Atmosphere

Particle Background

깊이감과 움직임, 인터랙션으로 배경에 생동감을 더하는 파티클 효과입니다.

Preview

ambient effect

Particle Background

canvas depth and motion

Installation

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

Code

typescript
Copied
1import { Particles } from "@/components/particles"23export default function Example() {4  return (5    <div className="relative h-64 overflow-hidden rounded-xl border">6      <Particles quantity={80} color="#38bdf8" />7    </div>8  )9}

Props

className

Type
string
Default
-
Description
Additional classes merged onto the component.

quantity

Type
number
Default
100
Description
Number of particles.

staticity

Type
number
Default
50
Description
How strongly particles react to pointer movement.

ease

Type
number
Default
50
Description
Pointer easing amount.

size

Type
number
Default
0.4
Description
Base particle size.

color

Type
string
Default
"#ffffff"
Description
Particle color.

colors

Type
readonly string[]
Default
-
Description
Optional particle color palette.

Reference

Reference Particle Background