Dot Grid Background
HTML5 Canvas 기반의 인터랙티브 도트 그리드 배경입니다. 마우스 커서 근처의 점들이 커지고 연결선이 나타나며 네트워크 효과를 만들어냅니다.
Move your mouse
컨트롤 패널
점의 기본 크기
점 사이 간격 (px)
마우스 반응 반경 (px)
점의 최대 확대 배율
활성화된 점 사이 연결선 표시
연결선 투명도
점 색상 프리셋
배경 그라디언트
1
인터렉션 아이디어
언제:마우스가 배경 위를 움직일 때
무엇을:그리드의 각 점들을
어떻게:HTML5 Canvas에 일정 간격의 점 그리드를 그리고, 마우스 위치와 각 점의 거리를 계산하여 반경 내의 점은 크기와 투명도를 증가시키고, 인접한 활성화된 점들 사이에 연결선을 그려 인터랙티브 네트워크 효과를 표현
2
바이브 프롬프트
DotGridBG 컴포넌트를 만들어주세요. HTML5 Canvas를 사용하여 일정 간격의 도트 그리드를 그리고, 마우스 커서 근처의 점들이 크기와 투명도가 증가하며, 활성화된 점들 사이에 연결선이 나타나는 인터랙티브 배경을 구현해주세요. dotSize, dotColor, dotSpacing, interactionRadius, maxDotScale, showLines, lineColor, lineOpacity props로 커스터마이즈할 수 있고, children을 받아 콘텐츠를 캔버스 위에 렌더링할 수 있게 해주세요. requestAnimationFrame을 사용하여 부드러운 애니메이션을 구현하고, ResizeObserver로 반응형 크기 조절을 지원해주세요.