배경
Slat Flow
그라데이션 블라인드(줄무늬)가 천천히 열고 닫히며 옆으로 흐르는 배경. 흐르는 컬러 그라데이션 위에 반복 슬랫 마스크를 얹고, 슬랫 두께와 위치를 CSS 키프레임으로 진동시켜 블라인드가 열리고 닫히는 효과를 순수 CSS로 구현했습니다.
- 분류
- 배경
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SlatFlow-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| count | number | 12 | 블라인드(줄무늬) 개수. 값이 클수록 줄이 촘촘해진다. |
| speed | number | 8 | 열고 닫히는 애니메이션 1주기 시간(초). 값이 작을수록 빠르다. |
| colorA | string | #C084FC | 그라데이션 시작 색(바이올렛). |
| colorB | string | #EC4899 | 그라데이션 중간 색(마젠타). |
| colorC | string | #5EEAD4 | 그라데이션 끝 색(틸). |
| bgColor | string | #08060E | 배경(근-블랙). |
| className | string | undefined | 루트 요소에 추가할 CSS 클래스. |