배경
Basin Ripple
클릭·스크롤로 떨어진 물방울의 파문이 사각 컨테이너 벽에 반사되어 되돌아오고, 그 파동 기울기가 바닥 패턴의 샘플 좌표를 밀어 아래 그림 자체를 굴절시키는 WebGL 배경. 링을 그리지 않고 R/G/B 변위 차로 파문 가장자리에 마젠타·시안 색수차 프린지를 만든다.
- 분류
- 배경
- 난이도
- hard
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/BasinRipple-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| strength | number | 0.11 | 굴절 세기(파동 기울기가 바닥 패턴의 샘플 좌표를 미는 정도). |
| wavelength | number | 0.13 | 파장(컨테이너 높이 1 기준). 작을수록 파문 간격이 촘촘해진다. |
| speed | number | 1 | 파면 진행 속도 배율. 클수록 파문이 빨리 퍼지고 벽에서 빨리 되돌아온다. |
| reflect | number | 0.62 | 수조 벽의 반사율(0~1). 0이면 벽에서 흡수, 1에 가까울수록 강하게 튕겨 되돌아온다. |
| damping | number | 0.6 | 시간 감쇠 계수. 클수록 파문이 빨리 잦아들고 파원 수명도 짧아진다. |
| fringe | number | 0.6 | 색수차 프린지 세기(파문 가장자리의 마젠타·시안 번짐). |
| tile | number | 6 | 바닥 패턴의 결 밀도. 굴절이 눈에 보이게 하는 색 띠의 촘촘함. |