Background & Atmosphere

Particle Background

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

Preview

ambient effect

Particle Background

canvas depth and motion

Installation

bash

Copied

1pnpm dlx shadcn@latest add https://ryong.dev/r/particles.json

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/particles.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong.dev/r/particles.json

bash

Copied

1bunx shadcn@latest add https://ryong.dev/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

Prop	Type	Default	Description
className	string	-	Additional classes merged onto the component.
quantity	number	100	Number of particles.
staticity	number	50	How strongly particles react to pointer movement.
ease	number	50	Pointer easing amount.
size	number	0.4	Base particle size.
color	string	"#ffffff"	Particle color.
colors	readonly string[]	-	Optional particle color palette.

Reference

Reference Particle Background