텍스트 애니메이션
Particle Assemble Text
글자를 오프스크린 캔버스에 래스터화해 얻은 불투명 픽셀을 목표점으로 삼고, 파티클이 curl 흐름장의 유선을 타고 소용돌이치며 모였다가 다시 흩어지는 Canvas2D 텍스트 효과. 조립 마지막 15% 구간에서 흐름장 가중치가 0으로 감쇠하며 목표 픽셀로 스냅해 잔여 오차 없이 글자가 완성되고, 각 파티클 색은 목표 픽셀의 x좌표를 3정점 램프에 매핑해 좌→우 그라데이션이 자동으로 맞춰진다. 커서는 반발자가 아니라 풍향계로 동작해 포인터가 움직인 방향으로 주변 파티클이 흩날렸다가 멈추면 되감기며, mode=scroll이면 스크롤 진입 시 조립·이탈 시 분해로 양방향 스크럽된다.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ParticleAssembleText-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | VIVID | 파티클로 조립할 텍스트. 오프스크린 캔버스에 래스터화되어 목표 픽셀이 된다. |
| mode | loop | scroll | assemble | loop | 진행도 소스. loop=조립·유지·분해 반복, scroll=스크롤 양방향 스크럽, assemble=1회 조립 후 유지. |
| particleCount | number | 2600 | 목표 파티클 개수(근사치). 글자 픽셀 샘플링 간격이 이 값에 맞춰 자동 계산된다. |
| fontSize | number | 132 | 기준 폰트 크기(px). 컨테이너보다 크면 가로/세로에 맞춰 자동 축소된다. |
| flowStrength | number | 1 | 소용돌이 흐름장 세기. 클수록 파티클이 크게 휘돌며 목표점으로 빨려 들어간다. |
| windStrength | number | 1 | 커서 바람 세기. 포인터를 움직인 방향으로 주변 파티클이 흩날린다(0이면 비활성). |
| cycleDuration | number | 6 | loop 모드 1주기 길이(초). assemble 모드에서는 이 값의 38%가 조립 시간이 된다. |