배경
Slab Waves
화면을 로그 분포로 불균등하게 나눈 수평 슬랩(띠)들이 각자 다른 위상과 속도로 흐르는 파도 배경입니다. 슬랩마다 사인 2개를 합성한 상단 경계를 8px 스텝 폴리라인으로 그려 채우고, 경계마다 어두운 엣지와 그 아래 얇은 광택을 얹어 종이를 겹쳐 붙인 단면을 만듭니다. 커서를 좌우로 움직이면 슬랩 간 어긋남이 최대 shear rad 까지 벌어져 파도가 찢어지고, 커서가 나가면 부드럽게 정렬로 복귀합니다. 색은 슬랩 순서가 아니라 그 순간의 파고에 매핑되어 파고가 큰 띠에서만 시안이 튀며, sliceMode='melt' 로 두면 경계가 1~4px 톱니로 녹아내립니다. 폭이 좁으면 슬랩 수가 8까지 자동으로 줄고, 뷰포트 밖에서는 렌더를 멈추며, prefers-reduced-motion 에서는 정적 1프레임만 그립니다.
- 분류
- 배경
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SlabWaves-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| slabs | number | 14 | 최대 수평 슬랩(띠) 수. 컨테이너 폭이 좁으면 8개까지 자동으로 줄어든다. |
| amplitude | number | 0.6 | 파고 크기(각 슬랩 높이 대비 비율). 슬랩이 두꺼울수록 실제 파도도 커진다. |
| speed | number | 1 | 파도가 흐르는 속도 배율. 아래쪽 슬랩일수록 느리게 흐른다. |
| shear | number | 0.9 | 커서 좌우 이동이 만드는 슬랩 간 어긋남(rad) 최대치. 0이면 커서에 반응하지 않는다. |
| sliceMode | hard | melt | hard | 슬랩 경계 처리. hard=칼로 자른 종이 단면, melt=1~4px 톱니로 녹아내린 단면. |
| colorLow | string | #7C3AED | 파고가 낮은 슬랩의 색(바이올렛). |
| colorMid | string | #EC4899 | 중간 파고 색(핑크). |
| colorHigh | string | #22D3EE | 파고가 최고조인 슬랩에만 튀는 색(시안). |
| bgColor | string | #08060E | 배경(근-블랙). 맨 위 슬랩 위쪽으로 드러난다. |