배경
Rain
빗줄기가 사선으로 떨어지는 Canvas 2D 배경. 다수의 빗줄기를 각각 (x, y, depth)로 관리하며 depth로 속도·길이·굵기·색을 원근 스케일한다. sin/cos 각도 벡터로 사선 낙하시키고, 화면을 벗어나면 상단 밖으로 리스폰해 무한 강우를 만든다. 속도·길이는 depth와 개별 랜덤의 이중 분산으로 자연스러운 다층 비를 표현하며, 반투명 배경 클리어로 모션 블러 꼬리(trail)를 만든다. Vivid Kit 보라(#C084FC)~핑크(#EC4899) 근/원 색 보간, 근-블랙(#08060E) 배경. DPR·ResizeObserver·cleanup 철저, reduced-motion 시 정지 프레임, SSR 안전.
- 분류
- 배경
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Rain-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| colorNear | string | #C084FC | 근-빗줄기 색(빠르고 굵은 앞쪽 비). Vivid Kit 기본 보라. |
| colorFar | string | #EC4899 | 원-빗줄기 색(느리고 가는 뒤쪽 비). Vivid Kit 기본 핑크. |
| background | string | #08060E | 배경 색(근-블랙). |
| dropCount | number | 320 | 동시 표시 빗줄기 개수. |
| speed | number | 1 | 낙하 속도 전체 배율. |
| angle | number | 18 | 사선 각도(도, 수직=0. 양수면 오른쪽으로 기울어짐). |
| trail | number | 0.55 | 잔상(모션 블러) 강도. 0=선명, 1에 가까울수록 긴 꼬리. |
| className | string | undefined | 캔버스에 전달할 추가 CSS 클래스. |