스크롤 기반 비디오가 있는 애니메이션 3D 히어로 섹션

SynapseX 브랜드를 위한 React, Vite, Tailwind CSS v4, Framer Motion(`motion/react`)을 사용한 단일 페이지 풀스크린 히어로 섹션을 구축합니다. 데스크톱에서 부드러운 스크롤을 위해 `lenis` 라이브러리를 사용합니다. 이 페이지는 다크하고 시네마틱한 풀스크린 비디오 배경의 랜딩 페이지로, 스크롤 기반 애니메이션과 텍스트 스크램블 효과를 갖습니다. --- **기술 스택:** - React 19, Vite, TypeScript - Tailwind CSS v4 (`@tailwindcss/vite` 플러그인 사용) - `motion` (Framer Motion v12+, `motion/react`에서 가져옴) - 데스크톱 전용 부드러운 스크롤을 위한 `lenis` - 글꼴: Google Fonts의 "Space Mono" 모노스페이스 (모든 글꼴 패밀리에 사용: sans, serif, mono) - Apple 아이콘(`bi bi-apple`)을 위한 Bootstrap Icons CDN --- **글꼴 / CSS 설정 (`index.css`):** - Google Fonts 가져오기: `Space Mono` (400, 700, 이탤릭 변형) - jsdelivr CDN에서 Bootstrap Icons CSS 가져오기 - `tailwindcss` 가져오기 - 모든 Tailwind 글꼴 테마 변수(`--font-sans`, `--font-serif`, `--font-inter`, `--font-mono`)를 `"Space Mono", monospace`로 재정의 - `html, body`: font-family var(--font-sans), 배경 검은색, 텍스트 흰색, margin/padding 없음, overflow-x hidden, overflow-y auto - Lenis 호환 클래스 (`.lenis.lenis-smooth`, `.lenis.lenis-stopped`, `.lenis.lenis-scrolling iframe`) --- **배경 비디오 (중요 - 주의 깊게 읽으세요):** - URL: `https://t.co/cvkGVS5C0E` - `LiquidVideoCanvas` 컴포넌트에서 렌더링됩니다: 고정 풀스크린 `<video>` 요소 (loop, muted, playsInline, preload="auto", object-cover) **중요 - 다크 오버레이 금지:** 비디오 컨테이너에는 다크 오버레이, 반투명 검은색 레이어, `bg-black/50`, opacity가 있는 `::after` 가상 요소, 또는 비디오 위의 그라디언트 오버레이가 없어야 합니다. 비디오는 자연스러운 밝기로 완전히 보여야 합니다. 유일한 컨테이너 배경은 래퍼 div 자체의 `bg-black`입니다 (비디오가 로드되기 전에만 보임). 비디오 위에 어떤 다크닝 필터, 오버레이 div, 또는 틴트도 추가하지 마세요. **중요 - Z-INDEX 레이어링 (정확히 따라야 함):** - 비디오 컨테이너: `fixed inset-0 z-[1]` - 가장 낮은 레이어 - 프로그레시브 블러: `fixed bottom-0 z-30` - 메인 콘텐츠 (텍스트, 제목): `z-10` (비디오 위, 헤더 아래) - 헤더: `z-50` (최상위) - 루트 래퍼는 `relative`이며 `overflow-x-hidden`입니다. 메인 콘텐츠 영역에는 비디오를 가릴 배경색이 없어야 합니다. 비디오는 콘텐츠 레이어를 통해 항상 보여야 합니다. 비디오 컨테이너 위에 있는 어떤 요소에도 `bg-black`을 설정하지 마세요. **비디오 스크롤 스크러빙 (중요 - 프레임 탐색 로직):** - 비디오는 자동 재생되지 않습니다. `currentTime`은 LERP 스무딩(팩터 0.12)을 사용한 requestAnimationFrame을 통해 스크롤 진행률로 구동됩니다. - **`if (!video.seeking)` 가드를 사용한 프레임 정확 탐색:** 브라우저가 이전 프레임 렌더링을 완전히 끝냈을 때만 새 비디오 프레임 탐색을 요청합니다. 이는 프레임 건너뛰기, 지연, 검은 화면 깜빡임을 방지합니다. 패턴: ``` if (!isSeeking && !video.seeking) { isSeeking = true; video.currentTime = clampedTime; } else { nextSeekTime = clampedTime; // 현재 탐색 완료 후 대기열에 추가 } ``` 브라우저에 "이전 프레임 페인팅이 완전히 끝났을 때만 비디오 프레임을 업데이트하세요"라고 지시합니다. 이는 모든 기기에서 부드럽고 매끄러운 재생에 필수적입니다. 이 가드 없이 여러 겹치는 탐색은 비디오에 검은 프레임이나 끊김을 유발할 수 있습니다. - 비디오 요소에서 `seeking` 및 `seeked` 이벤트를 수신합니다. `seeked` 시 대기열에 있는 `nextSeekTime`이 있는지 확인하고 실행합니다. **진입 애니메이션:** - 배율 1.12, 불투명도 0에서 시작합니다. 비디오 `readyState >= 3`에서 1.4초 동안 큐빅 이즈아웃으로 배율 1.0, 불투명도 1로 애니메이션됩니다. 3.5초 안전 타임아웃 대체가 있습니다. **스크롤 기반 시각 효과 (React 상태가 아닌 ref를 통해 DOM에 직접 적용):** - 프로그레시브 블러: 스크롤 기반 0-55px (전반부에서 미묘한 기본 0-5px, 후반부에서 공격적인 5-55px).