텍스트 애니메이션
Focus Frame
문장의 단어들이 순차적으로 블러에서 포커스로 전환되고, 초점 단어에 코너 프레임이 부드럽게 이동하는 텍스트 애니메이션.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/FocusFrame-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| sentence | string | Focus the Vivid words | 초점을 순환할 문장. 공백으로 단어를 분리한다. |
| focusMs | number | 1200 | 각 단어가 초점을 유지하는 시간(ms). setInterval 순환 주기. |
| transitionMs | number | 500 | 블러↔포커스 전환 및 프레임 이동 지속 시간(ms). |
| blurAmount | number | 5 | 비활성(블러) 단어에 적용할 블러 강도(px). |
| frameColor | string | #C084FC | 코너 포커스 프레임 색상(기본 Vivid Kit 바이올렛). |
| focusColor | string | #5EEAD4 | 초점 단어의 글자 색상(기본 Vivid Kit 틸). |