Nike Hover

在云境TS 中打开并复制 →

内容预览

Create a single full-viewport (`h-[100dvh]`) Nike-branded section in React + Tailwind CSS + GSAP. It must be **fully mobile responsive**. The app requires `react-player` and `gsap` installed via npm. --- ### 1. Dependencies to Install Install `react-player` and `gsap`. ### 2. Globals & Configuration (`src/index.css`) Replace `index.css` with this exact Tailwind v4 and Google Fonts configuration: ```css @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700&display=swap'); @import "tailwindcss"; @theme { --font-sans: "Manrope", sans-serif; --font-serif: "Instrument Serif", serif; } ``` ### 3. SpotlightReveal Component (`src/components/SpotlightReveal.tsx`) An interactive cursor-following SVG spotlight mask. The user's mouse reveals a hidden video layer underneath a static image overlay. On mobile/touch devices, falls back to touch tracking. ```tsx import { useEffect, useRef } from 'react'; interface SpotlightRevealProps { imageSrc: string; videoSrc: string; isPlaying?: boolean; baseRadius?: number; } export default function SpotlightReveal({ imageSrc, videoSrc, isPlaying = true, baseRadius = 420, }: SpotlightRevealProps) { const NUM_TRAILS = 6; const videoRef = useRef(null); const pointsRef = useRef( Array.from({ length: NUM_TRAILS }, () => ({ x: -1000, y: -1000 })) ); useEffect(() => { if (videoRef.current) { if (isPlaying) { videoRef.current.play().catch(() => {}); } else { videoRef.current.pause(); } } }, [isPlayi

……（完整源码请在站内查看）