배경
Matrix Rain
세로 열마다 문자들이 흘러내리는 매트릭스 코드 레인. Canvas 2D 그리드 열마다 독립 낙하 head를 관리하고, 매 프레임 배경을 반투명으로 덮어 잔상 트레일을 만든다. head→tail로 색이 보라→핑크로 보간되며 페이드아웃되고, 선두 글자는 흰색으로 강조된다.
- 분류
- 배경
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/MatrixRain-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| headColor | string | #C084FC | 흘러내리는 글자의 선두(head) 색. Vivid Kit 기본 보라. |
| tailColor | string | #EC4899 | 꼬리(tail) 글자 색. 선두→꼬리로 이 색을 향해 페이드. Vivid Kit 기본 핑크. |
| background | string | #08060E | 배경 색(근-블랙). 매 프레임 반투명으로 덮어 잔상 트레일 생성. |
| fontSize | number | 16 | 글리프 폰트 크기(px). 열 너비·행 높이 기준. |
| speed | number | 1 | 낙하 속도 배율(초당 행 이동량). |
| fade | number | 0.12 | 잔상 감쇠(0~1). 클수록 꼬리가 짧고, 작을수록 길게 남음. |
| className | string | undefined | 캔버스 요소에 전달할 추가 CSS 클래스. |