Scroll Trigger Text.
스크롤에 따라 텍스트의 각 글자가 순차적으로 색상과 크기가 변화하는 애니메이션 효과를 적용합니다.
스크롤에 따라 텍스트 색상이 변합니다. 스크롤에 따라 텍스트 색상이 변합니다.
컨트롤 패널
표시할 텍스트
텍스트의 초기 색상
스크롤 시 변할 색상
색상 변화 애니메이션 지속시간 (초)
텍스트 크기
텍스트의 초기 크기 비율
1
인터렉션 아이디어
언제:사용자가 텍스트 영역을 스크롤할 때
무엇을:텍스트의 각 글자를
어떻게:순차적으로 색상 변화와 크기 변화 애니메이션으로 표현하여 스크롤 진행도에 따른 시각적 피드백 제공
2
바이브 프롬프트
ScrollTriggerText 컴포넌트를 만들어주세요. 이 컴포넌트는 스크롤에 따라 텍스트의 각 글자가 순차적으로 색상과 크기가 변화하는 애니메이션을 보여줍니다. text prop으로 표시할 텍스트를, fromColor prop으로 초기 색상을, toColor prop으로 변화할 색상을, duration prop으로 애니메이션 지속시간을, fontSize prop으로 텍스트 크기를, initialScale prop으로 초기 크기 비율을 설정할 수 있게 해주세요. framer-motion의 useScroll과 useMotionValueEvent를 활용하여 스크롤 진행도를 감지하고, 각 글자별로 개별적인 애니메이션을 적용해주세요. 스크롤 진행도에 따라 opacity, scale, color가 순차적으로 변화하도록 구현해주세요.