애니메이션
Boid Swarm
분리·정렬·응집 3규칙으로 무리를 이루는 개체들이 커서 주위를 링 반경으로 선회하다가, 커서를 임계 속도 이상으로 빠르게 움직이면 위협으로 재해석해 방사형으로 흩어진 뒤 다시 응집하는 이중 상태 스웜입니다. 최대속도·선회반경·크기가 다른 3종(민트·보라·핑크)이 색 층으로 나뉘어 흐르고, 커서가 없거나 멈추면 마지막 커서 위치를 초점으로 종별 리사주 궤도를 그리며 배회합니다. 이웃 탐색은 셀 크기가 인지 반경과 같은 공간 해시 그리드로 처리하고, 각 개체는 속도 벡터 방향으로 늘어난 삼각 스트릭으로 그려집니다. Canvas 2D + requestAnimationFrame 기반이며 상호작용은 컨테이너 내부로 한정됩니다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/BoidSwarm-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| count | number | 170 | 무리 개체 수입니다. 24~320 범위로 자동 제한되어 성능 예산을 지킵니다. |
| perception | number | 34 | 이웃을 인지하는 반경(px)이며 공간 해시 셀 크기와 같습니다. 클수록 무리가 크게 뭉칩니다(12~96). |
| speed | number | 1 | 전체 이동 속도 배수입니다. 1이 기본이며 값이 클수록 무리가 빠르게 흐릅니다. |
| startleThreshold | number | 1000 | 놀람(흩어짐) 상태로 전환되는 포인터 속도 임계값(px/s)입니다. 낮출수록 쉽게 흩어집니다. |
| streak | number | 2.6 | 속도 방향으로 늘어나는 삼각 스트릭의 길이 배수입니다. 0이면 짧은 삼각형이 됩니다. |
| glow | boolean | true | 가산 합성으로 확대 삼각형을 덧그려 발광 효과를 낼지 여부입니다. |
| background | string | "#08060E" | 캔버스 배경 색(hex)입니다. 매 프레임 반투명하게 덧칠되어 짧은 잔상을 만듭니다. |