배경
Halftone
하프톤 도트 패턴이 물결과 명암 흐름에 따라 크기가 변하는 WebGL 배경 셰이더. 화면을 정사각 셀 격자로 나누고, 두 개의 흐르는 사인 물결과 자작 value-noise/fBm으로 합성한 밝기장을 셀 중심마다 샘플해 도트 반지름을 변조한다. 밝은 영역은 큰 도트, 어두운 영역은 작은 도트가 되고 색은 밝기에 따라 A↔B로 혼합된다. 도트 경계는 fwidth 기반 안티에일리어싱으로 매끈하게 처리.
- 분류
- 배경
- 난이도
- hard
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Halftone-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| colorA | string | #C084FC | 도트 저명암(어두운 영역) 색. |
| colorB | string | #EC4899 | 도트 고명암(밝은 영역) 색. 밝기에 따라 A와 혼합. |
| background | string | #08060E | 근-블랙 배경(도트 뒤 베이스). |
| density | number | 34 | 도트 격자 밀도(값이 클수록 도트가 촘촘·작아짐). |
| speed | number | 0.6 | 물결·명암 흐름 속도. |
| dotScale | number | 0.92 | 도트 최대 반지름 비율(0~1, 셀 대비). |
| waveStrength | number | 0.45 | 물결 진폭(밝기 변조 세기, 0~1). 물결 대 노이즈 가중. |
| className | string | undefined | 래퍼 div에 적용할 추가 클래스명. |