カーソルでスクラブするビデオ背景付きインタラクティブランディングページ

Build a fullscreen hero section in React + TypeScript + Vite + Tailwind CSS v4 + `motion` (framer-motion successor). Use the `Inter Tight` Google Font (weight 500 only). The page background is white. --- ## VIDEO BACKGROUND (cursor-scrubbed) Two videos fill the viewport as a fixed background (`position: fixed; inset: 0; object-fit: cover`). They are NOT auto-played on desktop -- they are scrubbed by cursor X position. **Video URLs:** - Video 1 (shown when cursor moves RIGHT of center): `d8j0ntlcm91z4. cloudfront. net/user_39ca84eAE` - Video 2 (shown when cursor moves LEFT of center): `d8j0ntlcm91z4 .cloudfront.net/user_39ca84eAE` Both `<video>` elements: `muted`, `playsInline`, `preload="auto"`. Wrapped in a container div with `overflow: hidden`. Fade in with `opacity 0.3s ease` transition once both videos fire `loadeddata`. **Desktop scrubbing logic (requestAnimationFrame loop):** - Track mouse X position. - Calculate center of viewport. Define a dead zone of `max(30px, 5% of viewport width)` on either side of center. - If cursor is within the dead zone, keep active video at `currentTime = 0`. - If cursor exits dead zone to the left, show Video 2 and scrub it: `progress = (centerX - deadZone - cursorX) / (centerX - deadZone)`, then `video.currentTime = progress * video.duration`. - If cursor exits dead zone to the right, show Video 1 and scrub it: `progress = (cursorX - centerX - deadZone) / (viewportWidth - centerX - deadZone)`, then `video.currentTime = progress * video.duration`. - CRITICAL: Only update `currentTime` when `!video.seeking` -- this prevents jittery playback by waiting for the browser to finish rendering the previous seek before requesting a new one. - Only one video is visible at a time (`display: block` / `display: none`). Track which side is "active" via a ref; only switch sides when cursor crosses past the dead zone. **Mobile/tablet behavior (< 1024px):** - Auto-play videos alternating. Start with Video 1 playing. When it ends, hide it, show Video 2, play from start. When Video 2 ends, switch back. Continuous loop. --- ## CUSTOM CURSOR (desktop only, hidden on touch) - Hide the native cursor (`cursor: none` on the wrapper). - Render a 48x48px SVG circle cursor that follows the mouse via direct DOM style updates (`left`/`top` on `mousemove`). Uses `position: fixed; pointer-events: none; z-index: 50; transform: translate(-50%, -50%); mix-blend-mode: exclusion`. - The SVG contains a white circle (stroke 2.5px, radius 22.75) with a custom Japanese/stylized glyph path inside, filled white. --- ## LAYOUT ELEMENTS (all `position: fixed; pointer-events: none; z-index: 20; mix-blend-mode: exclusion`) All text is white (). Font: `Inter Tight`, weight 500 throughout. ### 1. Logo (top-left) - Fixed `top: 32px; left: 32px` (desktop), `top: 16px; left: 16px` (mobile). - SVG wordmark "prmpt" with a circled R icon. ViewBox `0 0 355 110`, scales responsively: `w-[355px]` desktop, `w-[266px]` tablet, `w-[124px]` mobile. - Entrance animation: `motion.div` fade up, `opacity: 0 -> 1, y: 12 -> 0`, duration 0.6s, easing `[0.25, 0.1, 0.25, 1]`, delay 0s. ### 2. Navigation (top-right) - Fixed `top: 32px; right: 32px` (desktop), `top: 16px; right: 16px` (mobile). - Desktop: row with "ABOUT" text (15px uppercase), hamburger icon (30x30 SVG, two horizontal lines), and "[ CART ]" text (15px). Gap between burger and cart: 50px. - Mobile: hamburger (24x24) + "[ CART ]" (13px), gap 20px. "ABOUT" hidden. - Entrance animation: same as logo but delay 0.15s. ### 3. Caption text (left side, below logo) - Fixed `left: 32px; top: 244px` (desktop), `left: 16px; top: 118px` (mobile), `top: 180px` (tablet). - Max width: 692px (desktop), `calc(50vw - 48px)` (tablet), `calc(100vw - 32px)` (mobile). - Font: 12px, line-height 140%, letter-spacing -0.04em.