텍스트 애니메이션
Motion Echo Text
포인터 이동량과 스크롤 변화량을 rAF에서만 읽어 속도로 환산하고, 그 속도에 비례해 잔상을 0~8겹 동적으로 생성/회수한다. 잔상 오프셋은 진행 방향 반대쪽으로 층당 단조 증가하며(지터 없음), 층별 blur는 지수 증가값으로 미리 구워두고 매 프레임에는 transform/opacity만 갱신한다. 층 색은 브랜드 램프(마젠타→바이올렛→민트)를 따라 hue가 한 스텝씩 밀려 색수차처럼 보이고, 입력이 멈추면 스프링 감쇠로 잔상이 본체에 흡수돼 0개가 되어 완전히 선명한 타이포만 남는다. 조상 배경 휘도를 측정해 어두우면 screen 블렌드, 밝으면 알파 합성으로 자동 전환한다.
- 분류
- 텍스트 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/MotionEchoText-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | MOTION ECHO | 표시할 텍스트. 본체 1개만 접근성 트리에 노출되고 잔상 층은 모두 aria-hidden 처리된다. |
| maxEchoes | number | 8 | 최대 잔상 수(0~8로 클램프). 실제 개수는 속도에 비례해 0~이 값 사이에서 동적으로 변한다. |
| spread | number | 14 | 잔상 한 층당 기본 오프셋(px). 층 번호에 곱해져 한 방향으로 단조 증가한다. |
| sensitivity | number | 1 | 속도 감도 배율. 클수록 느린 움직임에도 잔상이 길게 늘어난다. |
| echoOpacity | number | 0.85 | 잔상 최대 불투명도(0~1). 뒤쪽 층일수록 여기서 더 감쇠한다. |
| autoDemo | boolean | true | 상호작용이 없을 때 주기적으로 자동 임펄스를 주어 잔상을 시연한다. 포인터/스크롤 입력이 감지되면 즉시 중단된다. |
| colors | string[] | ["#EC4899","#C084FC","#5EEAD4"] | 색 램프(본체색, 중간 잔상색, 끝 잔상색). 잔상 hue가 이 램프 위에서 한 스텝씩 밀린다. |