이미지에서 콘텐츠로 전환

캐러셀은 8개의 독립 UI 컴포넌트로 구성됩니다. 3D perspective 안에서 10개 비디오 패널이 원형으로 배치되고, 클릭 시 스트라이프 마스크로 콘텐츠 뷰가 전환됩니다.

LogoHeader

네온 펄스 로고 + 서브텍스트

3D Scene

perspective 3D 캐러셀 컨테이너

Preview Panels

10개 비디오 패널 + 반사 레이어

ParticleCanvas

Canvas 구체 파티클 배경

NumberBar

드래그 연동 인디케이터 + 오토플레이

Content Overlay

스트라이프 마스크 전환 상세 뷰

RatingRings

SVG 링 + 프로그레스 바 애니메이션

BackButton

SVG 라인 드로우 뒤로가기 버튼

Feature-Sliced Design 기반으로 캐러셀 관련 모든 코드를 하나의 feature 폴더에 응집합니다. 12개 UI 컴포넌트가 역할별로 분리되어 있고, 하나의 커스텀 훅이 전체 인터랙션을 전담합니다.

데이터는 단방향으로 흐릅니다. JSON에서 시작해 커스텀 훅이 드래그 · 오토플레이 · 전환 로직을 처리하고, UI 컴포넌트는 순수하게 렌더링만 담당합니다.

ANIMATION OUTPUT

3D Carousel

원형 회전

rotateY + translateZ + parallax

Stripe Mask

콘텐츠 전환

SVG clipPath 8칸 stagger

SplitType

텍스트 리빌

lines yPercent stagger 60ms

Rating Rings

데이터 시각화

SVG strokeDashoffset + scaleX

콘텐츠 열기는 약 4.5초 동안 11개의 애니메이션 레이어가 정밀하게 오케스트레이션됩니다. 패널 퇴장 → 스트라이프 마스크 → 텍스트 리빌 → 데이터 시각화 순서로 진행됩니다.

사용자 인터랙션은 Drag/Inertia, Panel Click, Back Click 세 갈래로 분기됩니다. 드래그 임계값(5px)으로 클릭과 드래그를 구분하고, Panel Click은 스트라이프 마스크로 콘텐츠를 전환합니다.

단순히 모션이 예쁜 것이 아니라, 프로덕션에서 유지보수 가능한 구조로 설계했습니다. 3D CSS 캐러셀 · SVG 스트라이프 마스크 · Canvas 파티클 · 포인터 드래그 물리까지 — 실무에서 바로 적용할 수 있는 패턴입니다.

3D Carousel

CSS 3D perspective 캐러셀

perspective(1100px) 안에서 10개 패널이 rotateY + translateZ로 원형 배치 — 드래그로 scene 전체를 회전시키고 각 패널에 parallax 오프셋 적용

panels: rotateY(var(--panel-angle)) translateZ(calc(var(--itc-radius) * -1)) scene: gsap.set(scene, { rotateY: angle })

Stripe Mask

SVG clipPath 전환 효과

8칸 SVG rect를 clipPathUnits='objectBoundingBox'로 정의하고, y속성을 -1 → 0 stagger 애니메이션하여 콘텐츠를 순차 노출

<clipPath clipPathUnits="objectBoundingBox"> <rect y="-1" width="0.127" height="1" /> <!-- ×8 stripes, stagger 60ms -->

SplitType

텍스트 라인 분할 애니메이션

lines 단위로 텍스트를 분할하고 overflow:hidden 래퍼로 감싼 뒤 yPercent로 순차 리빌 — resize 이벤트에서 재분할 처리

new SplitType(el, { types: 'lines' }) wrapLines(lines, 'div', 'oh') gsap.to(lines, { yPercent: 0, stagger: 0.06 })

Particle Canvas

Canvas 3D 구체 파티클

1400개 파티클이 구체 표면에 분포 — latitude ring 집중 배치, 림 라이팅, 펄스 불투명도로 깊이감 연출

x3d = sin(phi) * cos(theta) * r y3d = cos(phi) * r rimFactor = 1 + (1 - |z3d|/r) * 3.0

Drag + Inertia

포인터 드래그 물리 시뮬레이션

pointerEvents 기반 드래그로 velocity 추적 — release 시 관성(velocity×50) 적용, power3.out easing으로 자연스러운 감속

velocity = (clientX - lastX) / dt inertia = clamp(velocity * 50, ±120°) gsap.to(drag, { angle: target, ease: 'power3.out' })

Video Preload

비디오 프리로드 + 로딩 상태

패널 비디오의 loadeddata 이벤트를 Promise로 래핑 — 전체 프리로드 완료 후 loading 오버레이 제거, hover/content 진입 시 play/pause 전환

preloadVideos(panels).then(() => { body.classList.remove('loading') }) // content: data-video-src → .src 지연 할당

데스크탑 퍼스트로 설계하고, CSS 변수로 캐러셀 perspective와 패널 사이즈를 제어합니다. 모바일에서는 perspective를 700px로 축소하고, Canvas 파티클을 20%로 줄여 성능을 확보합니다.