배경
Starfield
앞으로 돌진하는 3D 별 필드(하이퍼스페이스). 각 별에 (x,y,z)를 부여하고 z를 매 프레임 감소시켜 카메라로 돌진시키며, 원근 투영(scale = focal/z)으로 화면 밖으로 가속·확산시킨다. 카메라를 통과하거나 화면을 벗어난 별은 먼 깊이로 리스폰해 무한 필드를 만든다. 이전→현재 투영점 선분으로 속도감 있는 스트릭(트레일)을 렌더한다. Canvas 2D + requestAnimationFrame 직접 제어.
- 분류
- 배경
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Starfield-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| colorNear | string | #C084FC | 카메라에 가까운 별(투영 후반)의 색. |
| colorFar | string | #EC4899 | 먼 별(투영 초반)의 색. |
| background | string | #08060E | 배경 색(근-블랙). |
| starCount | number | 400 | 동시 표시 별 개수. |
| speed | number | 1 | 돌진 속도(프레임당 z 감소량 배율). |
| trail | number | 1 | 별 트레일(잔상) 길이 배율. 0이면 점, 클수록 하이퍼스페이스 스트릭. |
| className | string | undefined | 캔버스에 적용할 추가 CSS 클래스. |