Interactive Landing Page with Cursor-Scrubbed Video Background

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 ` ` 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.

Interactive Landing Page with Cursor-Scrubbed Video Background

Prompt ContentSave

Sign in to see the full prompt

Usage

References

Talk