배경
Warp Tunnel
터널 속으로 빨려드는 워프 배경. WebGL 극좌표 UV(angle/radius)로 원근을 만들고, 깊이 좌표에 시간을 더해 텍스처 밴드가 소실점에서 바깥으로 흘러나오게 하여 전진감을 낸다. 방사 줄무늬 × 깊이 링을 합성하고 나선 비틀림을 더한 자작 셰이더.
- 분류
- 배경
- 난이도
- hard
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/WarpTunnel-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| colorA | string | #08060E | 터널 벽 기본 색(밴드 저점). |
| colorB | string | #C084FC | 터널 벽 하이라이트 색(밴드 고점). |
| background | string | #08060E | 중심(소실점) 근-블랙 배경. |
| speed | number | 1.0 | 워프 전진 속도(텍스처가 터널 안으로 흐르는 속도). |
| bands | number | 12 | 원주 방향 밴드 개수(값이 클수록 방사 줄무늬가 촘촘). |
| depth | number | 1.4 | 깊이 방향 링 밀도(값이 클수록 안으로 들어가는 링이 촘촘). |
| twist | number | 0.15 | 터널 비틀림 정도(원주 방향으로 감기는 나선 회전). |
| className | string | undefined | 컨테이너에 적용할 추가 CSS 클래스. |