애니메이션
Meteors
유성이 사선으로 밝은 머리와 그라데이션 꼬리를 끌며 화면을 가로지르는 오버레이 애니메이션. 각 유성은 랜덤한 시작 위치·지연·속도를 가져 자연스러운 유성우를 연출한다. 순수 CSS 키프레임과 transform으로 구현했으며, prefers-reduced-motion 대응과 SSR 안전 처리를 포함한다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Meteors-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| count | number | 14 | 생성할 유성 개수 |
| angle | number | 225 | 유성 진행 각도(deg). 화면 사선 방향을 결정 |
| minDuration | number | 2.4 | 애니메이션 최소 지속 시간(초) |
| maxDuration | number | 5.2 | 애니메이션 최대 지속 시간(초) |
| headSize | number | 3 | 유성 머리(점)의 지름(px) |
| color | string | #C084FC | 꼬리 색상 (Vivid Kit 브랜드 컬러 기본값) |
| glowColor | string | #EC4899 | 유성 머리 발광 색상 |
| className | string | "" | 추가 클래스 |