Text Clip.
스크롤에 따라 텍스트가 클립되는 효과를 적용합니다. 스크롤 진행도에 따라 텍스트가 위에서 아래로 색상이 채워지는 시각적 효과를 구현하며, 메인 텍스트와 서브 텍스트 간의 전환 애니메이션을 제공합니다.
HelloHello
javascriptjavascript
typescripttypescript
컨트롤 패널
텍스트 항목들 (main|sub 형식으로 줄바꿈으로 구분)
클립 배경 색상
텍스트 크기
글꼴 두께
애니메이션 시작 위치
애니메이션 끝 위치
애니메이션 옵션
1
인터렉션 아이디어
언제:사용자가 텍스트 영역을 스크롤할 때
무엇을:텍스트를
어떻게:스크롤 진행도에 따라 클립 마스크를 적용하여 위에서 아래로 색상이 채워지는 효과로 표현하고, 메인과 서브 텍스트 간의 부드러운 전환 애니메이션 구현
2
바이브 프롬프트
TextClipEffectItem 컴포넌트를 만들어주세요. 이 컴포넌트는 스크롤에 따라 텍스트가 클립되는 효과를 보여줍니다. main과 sub prop으로 메인 텍스트와 서브 텍스트를, className prop으로 스타일링을, clipColor prop으로 클립 색상을 설정할 수 있게 해주세요. showMarkers prop으로 마커 표시 여부를, startPosition과 endPosition prop으로 애니메이션 시작/끝 위치를, scrubEffect prop으로 스크럽 효과를 설정할 수 있게 해주세요. framer-motion의 useScroll과 useTransform을 활용하여 스크롤 진행도를 감지하고, clipPath를 사용하여 텍스트 클립 효과를 구현해주세요. 메인 텍스트와 서브 텍스트 간의 opacity 전환 애니메이션도 추가해주세요.