배경
Contour Lines
지형 등고선이 노이즈에 따라 느리게 일렁이는 배경. 자작 3D value-noise로 높이장을 만들고(시간 축 z로 지형이 흐름), 저해상도 셀 그리드에서 marching-squares로 각 등고선 레벨의 변 교차점을 선형 보간해 셀마다 선분으로 이어 연속된 등고선을 Canvas 2D로 그립니다.
- 분류
- 배경
- 난이도
- hard
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ContourLines-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| lines | number | 14 | 등고선 개수. 값이 클수록 지형 층이 촘촘하다. |
| colorA | string | #C084FC | 등고선 시작 색(바이올렛). 낮은 고도. |
| colorB | string | #5EEAD4 | 등고선 끝 색(틸). 높은 고도. |
| bgColor | string | #08060E | 배경(근-블랙). |
| noiseScale | number | 0.9 | 노이즈 스케일(지형 굴곡의 크기). 작을수록 넓고 완만하다. |
| speed | number | 1 | 지형이 일렁이는 속도 배율. |
| lineWidth | number | 1.2 | 등고선 두께(px). |
| className | string | undefined | 루트 요소에 추가할 CSS 클래스. |