텍스트 애니메이션
Extrude Text
같은 글자를 최대 20겹까지 쌓아 무광 압출체(3D 두께)를 만듭니다. 커서를 광원이 아니라 카메라로 취급해 두께가 커서 반대편 소실점으로 실시간 회전하고, 커서가 정중앙에 가까울수록 압출이 얕아집니다. 겹마다 3색 램프를 앞→뒤로 보간하면서 감마 곡선으로 명도를 떨어뜨려 AO 같은 깊이감을 만듭니다. explode 모드에서는 preserve-3d 무대에서 겹이 Z축으로 분리돼 떠 있다가 스크롤 진행률에 따라 한 덩어리로 압착됩니다. 압출 깊이는 컨테이너 폭의 12%로 자동 제한되고, 감속 접근성 모드에서는 정지 압출 프레임을 그대로 그립니다.
- 분류
- 텍스트 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ExtrudeText-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | 입체감 | 압출할 문구. 원본 1겹만 스크린리더에 노출되고 복제 겹은 aria-hidden 처리됩니다. |
| mode | follow | explode | follow | follow=커서 반대편으로 두께가 뻗는 단일 덩어리, explode=겹이 Z축으로 분리됐다가 스크롤 진행률로 압착. |
| layers | number | 16 | 복제 겹 수(3~20으로 클램프). 많을수록 매끈하지만 페인트 비용이 늘어납니다. |
| depth | number | 22 | 최대 압출 깊이(px). 컨테이너 폭의 12%를 넘지 않도록 자동 제한됩니다. |
| gamma | number | 1.8 | 뒤 겹으로 갈수록 명도가 떨어지는 감마 지수. 클수록 급격히 어두워져 깊이감이 강해집니다. |
| spread | number | 18 | explode 모드에서 겹 사이 Z축 분리 간격(px). 스크롤 진행률 1에서 0으로 압착됩니다. |
| frontColor | string | #5EEAD4 | 맨 앞 겹(실제 읽히는 글자) 색상. |