애니메이션
Velocity Tiles
커서를 빠르게 움직이면 브랜드 그라데이션 잔상 타일이 뒤따라 스폰되어 회전·축소되며 페이드 아웃되는 인터랙션. pointermove로 이동 속도를 감지해 임계값을 넘을 때만 타일을 생성한다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/VelocityTiles-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| tileSize | number | 64 | 잔상 타일의 기준 크기(px). |
| spawnThreshold | number | 8 | 스폰을 트리거하는 최소 커서 속도(px/frame 근사). 클수록 더 빠르게 움직여야 타일이 나온다. |
| fadeSpeed | number | 0.025 | 타일이 사라지는 속도(0~1, 클수록 빨리 사라짐). |
| maxTiles | number | 18 | 동시에 존재 가능한 최대 타일 수(성능 상한). |
| radius | number | 16 | 타일 모서리 둥글기(px). |
| glow | boolean | true | 타일에 글로우(발광) 효과 적용 여부. |
| className | string | undefined | 컨테이너에 추가할 className. |