배경
Grid Warp
원근 격자가 물결처럼 휘어지며 카메라 쪽으로 흐르는 WebGL 배경 셰이더. 하단 소실점 기준 원근 투영(1/(지평선-y))으로 바닥 격자에 깊이감을 주고, 교차 위상 사인파로 라인을 유동적으로 왜곡한다. fract 삼각파 + fwidth 안티에일리어싱으로 균일한 두께의 네온 라인을 뽑고, 깊이에 따라 근경 보라(#C084FC)에서 원경 핑크(#EC4899)로 색이 램프되며 지평선에서 안개처럼 소실된다. 근-블랙(#08060E) 배경 위 글로우 합성으로 사이버 그리드 느낌을 낸다.
- 분류
- 배경
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/GridWarp-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| colorBg | string | #08060E | 격자 라인의 근-블랙 배경색(원근 바닥). |
| colorNear | string | #C084FC | 가까운(하단) 라인 색(Vivid 보라). |
| colorFar | string | #EC4899 | 먼(상단) 라인 색(Vivid 핑크). |
| density | number | 14 | 격자 칸 밀도(값이 클수록 라인 촘촘). |
| warp | number | 0.6 | 물결 왜곡 진폭(라인이 휘는 정도). |
| speed | number | 1.0 | 흐름/물결 속도. |
| thickness | number | 0.35 | 라인 굵기(0~1, 클수록 두꺼움). |
| className | string | undefined | 컨테이너에 전달할 추가 CSS 클래스. |