애니메이션
Blur Blob
커서를 지연 추적하며 모핑하는 블러 블롭. Canvas2D 방사 그라데이션 원들에 큰 블러 필터를 걸어 하나의 유기적 덩어리처럼 번지게 하고, rAF 선형보간(lerp)으로 커서를 부드럽게 뒤쫓는다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/BlurBlob-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| blobCount | number | 4 | 블롭을 구성하는 원의 개수(1~10). 많을수록 형태가 복잡해지고 잔상이 길어진다. |
| blur | number | 32 | 캔버스 블러 강도(px, 0~120). 클수록 원 경계가 더 녹아 부드러운 덩어리가 된다. |
| smoothing | number | 0.12 | 커서 추적 부드러움(0.02~0.6). 낮을수록 더 늦고 물렁하게 따라온다. |
| scale | number | 1 | 블롭 전체 크기 배율. 원들의 기본 반지름에 곱해진다. |
| colors | readonly string[] | ["#C084FC", "#EC4899", "#5EEAD4"] | 블롭을 이루는 색상 배열(Vivid Kit 팔레트 기본값). 방사 그라데이션 색으로 순환 사용된다. |
| background | string | #08060E | 컨테이너 배경색(근블랙 기본값). lighter 합성과 대비되어 네온처럼 번진다. |