CSS 이중 트랙 무한 로고 마퀴 데모

구조

바깥은 overflow-hidden으로 잘라 내고, 안쪽 트랙은 동일한 슬라이드 두 덩어리를 가로로 나란히 둡니다. 애니메이션으로 트랙 전체를 translateX(-50%)까지 이동하면 첫 덩어리가 화면에서 빠져 나간 자리에 두 번째 덩어리가 이어져 보여 무한 루프처럼 보입니다.

CSS

logo-marquee.css에 키프레임과 .demo-logo-marquee-track을 정의했습니다. 역방향 줄은 animation-direction: reverse 변형 클래스로 처리합니다. 랜딩 스파크플러스의 sparkplus-marquee와 동작은 같고, 클래스 이름만 데모 전용으로 분리했습니다.

React

MarqueeStrip은 자식 노드를 두 개의 flex shrink-0 래퍼에 각각 넣고, 두 번째 줄은 aria-hidden으로 스크린 리더 중복을 줄였습니다. 속도는 animationDuration 인라인 스타일로 조절합니다.

데이터

로고 문구 목록은 app/demos/landing-sparkplus/lib/demoMarqueeLogos.ts의 두 배열을 그대로 import 해 사용합니다. 쇼케이스 설명용으로는 위 JSON에 해당 파일을 추가하거나, 데모 폴더 안으로 데이터를 옮기면 의존 경로를 정리할 수 있습니다.

마스킹

가로 끝은 ::before/::after 그라데이션으로 페이드합니다. 좁은 뷰포트(lg: 이하)에서는 가상 요소를 끄도록 했습니다.