마퀴 텍스트
텍스트가 무한히 스크롤되는 마퀴 효과를 적용하며, 페이지 스크롤에 따라 속도가 동적으로 변화합니다.
컨트롤 패널
마키에 표시될 텍스트 (줄바꿈으로 구분)
기본 스크롤 속도
텍스트 크기 (CSS 단위)
텍스트 색상
배경 색상
스크롤 방향
1
인터렉션 아이디어
언제:컴포넌트가 마운트되거나 스크롤 이벤트가 발생할 때
무엇을:텍스트 배열을
어떻게:무한 스크롤 애니메이션으로 표현하고, 페이지 스크롤 속도에 따라 마퀴 속도를 동적으로 조절
2
바이브 프롬프트
ScrollMarqueeText 컴포넌트를 만들어주세요. 이 컴포넌트는 텍스트가 무한히 스크롤되는 마퀴 효과를 보여줍니다. texts prop으로 마퀴할 텍스트 배열을, baseSpeed prop으로 기본 스크롤 속도를, fontSize prop으로 텍스트 크기를, color prop으로 텍스트 색상을, backgroundColor prop으로 배경 색상을, direction prop으로 스크롤 방향을 설정할 수 있게 해주세요. 텍스트 배열을 2배로 복제하여 무한 스크롤을 구현하고, 페이지 스크롤 이벤트를 감지하여 마퀴 속도를 동적으로 조절해주세요. framer-motion의 useAnimationControls와 requestAnimationFrame을 활용하여 부드러운 애니메이션을 구현해주세요.