배경
Particle Mesh
떠다니는 파티클 필드가 커서에 반응해 밀려나는 Canvas 2D 배경. 파티클은 부유 속도로 화면을 유영하다 커서 반경 안에 들어오면 거리 반비례로 밀려나며, 인접 파티클 사이에는 거리 감쇠 연결선을 그린다. DPR 대응·ResizeObserver·reduced-motion 정지 프레임을 지원한다.
- 분류
- 배경
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ParticleMesh-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| color | string | #C084FC | 파티클 색상. |
| lineColor | string | #EC4899 | 인접 파티클 연결선 색상. |
| background | string | #08060E | 배경(근-블랙) 색상. |
| density | number | 1 | 파티클 밀도 계수. 캔버스 면적당 개수를 스케일하며 높을수록 촘촘(개수는 12~220 클램프). |
| size | number | 2 | 파티클 기준 반지름(px). 실제 반지름은 이 값의 0.6~1.4배로 무작위 분포. |
| speed | number | 1 | 기본 부유 속도 계수. |
| repelRadius | number | 110 | 커서 반발이 작용하는 반경(px). |
| repelStrength | number | 1 | 커서 반발 세기. |
| connect | boolean | true | 인접 파티클 연결선 표시 여부. |
| linkDistance | number | 120 | 연결선을 그릴 최대 거리(px). |
| className | string | undefined | 캔버스에 적용할 추가 CSS 클래스. |