배경
Constellation
별들이 화면을 완만히 표류하며 가까운 별끼리 거리 비례 알파의 선으로 이어지는 별자리 배경. 커서가 들어오면 반경 내 별을 끌어당기고 커서 자체도 노드처럼 근처 별과 연결되며, 사인 트윙클로 밝기가 미세하게 변동한다. Canvas 2D 기반으로 공간 분할 그리드로 별-별 연결을 근사하고 DPR·ResizeObserver·cleanup을 철저히 처리한다.
- 분류
- 배경
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Constellation-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| starColor | string | #C084FC | 별(점) 색. 기본 Vivid Kit 보라. |
| lineColor | string | #EC4899 | 연결선 색. 기본 Vivid Kit 핑크. |
| background | string | #08060E | 배경 색(근-블랙). |
| density | number | 1 | 별 밀도 배율. 화면 면적에 비례해 별 개수를 산출(상·하한 적용). |
| linkDistance | number | 130 | 두 별을 잇는 최대 거리(px). 이보다 가까우면 선으로 연결. |
| cursorRadius | number | 160 | 커서 반경(px). 이 안의 별은 커서로 끌려오고 커서와도 연결된다. |
| speed | number | 1 | 별 이동 속도 배율. |
| className | string | undefined | 캔버스에 적용할 추가 클래스명. |