배경
Speed Lines
중심에서 방사로 뻗는 속도선들이 극좌표 원근 가속(dr ∝ r)으로 화면 가장자리를 향해 지수적으로 질주하는 하이퍼스페이스 터널 배경. 혜성 꼬리 그라디언트 스트릭 + 가산(lighter) 혼합 + 잔상 페이드 오버레이로 광속 워프 질주감을 구현한다. Canvas 2D + rAF 자작, DPR·ResizeObserver 대응, reduced-motion 시 정지 프레임.
- 분류
- 배경
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SpeedLines-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| colorNear | string | #C084FC | 가장자리 쪽(가속 구간) 라인 색. Vivid Kit 기본 보라. |
| colorFar | string | #EC4899 | 중심 근처 라인 시작부 색. Vivid Kit 기본 핑크. |
| background | string | #08060E | 배경 색(근-블랙). |
| lineCount | number | 240 | 동시 표시 속도선 개수. |
| speed | number | 1 | 질주 속도(반경 가속 배율). |
| streak | number | 1 | 스트릭(속도선) 길이 배율. 클수록 질주감 강화. |
| fade | number | 0.35 | 잔상(모션 블러) 강도 0~1. 1이면 잔상 없음, 낮을수록 긴 잔상. |
| className | string | undefined | 캔버스에 전달할 추가 CSS 클래스. |