배경

Hex Grid

육각형 격자가 파동처럼 밝기·크기·색이 번지는 Canvas 2D 배경. 대각 반대편 두 파원에서 거리·시간 기반 사인 파동을 합성해 헥스 타일마다 밝기·반지름·색 혼합을 변조한다. DPR/ResizeObserver 대응과 접근성(reduced-motion 정지 프레임) 포함.

분류: 배경
난이도: medium
변형: TS-TW

설치

npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/HexGrid-TS-TW

Props

이름	타입	기본값	설명
colorA	string	#C084FC	헥스 채움 색(밝은 파동 색 A).
colorB	string	#EC4899	헥스 채움 색(밝은 파동 색 B). 파동 위상에 따라 A와 혼합.
bgColor	string	#08060E	배경 색상(근-블랙).
hexSize	number	22	헥스 한 변의 길이(px). 클수록 타일이 커짐.
speed	number	2.2	파동 진행 속도(값이 클수록 빠르게 번짐).
wavelength	number	120	파동 파장(px). 밝은 링 사이의 간격.
baseBrightness	number	0.12	기본(비활성) 헥스 밝기(0~1).
gapRatio	number	0.08	헥스 사이 간격 비율(0=맞붙음, 0.15=살짝 벌어짐).
className	string	undefined	컨테이너에 적용할 추가 CSS 클래스.