Wanderful Hero

网站 · Travel · 免费
内容预览

Build a full-viewport cinematic hero section for a travel brand called "Wanderful" using React + TypeScript + Vite + Tailwind CSS. Use GSAP for animation and `lucide-react` for icons. **Fonts (load via Google Fonts in `src/index.css`):** ```css @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&family=Inter:wght@300;400;500;600;700&display=swap'); ``` Also load a custom display font: ```css @font-face { font-family: 'Dirtyline'; src: url('https://fonts.cdnfonts.com/s/15011/Dirtyline36DaysofType.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } ``` Body font: `Barlow`. Hero headings: `Inter`. Body background: `#000`. **Video background (fixed, full screen, z-0):** - Use this exact CloudFront URL as the `` src: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260510_060007_60275ce7-030c-4668-a160-8f364ec537d3.mp4` - Attributes: `autoPlay muted loop playsInline`, `object-cover`, wrapper scaled `scale-[1.08]` with `origin-center`. - On `onLoadedMetadata`, set `playbackRate = 1.25`. - Add GSAP-driven mouse parallax: listen to `mousemove`, compute `targetX/Y = ((clientX - cx)/cx) * 20`, lerp `currentX/Y += (target - current) * 0.06` inside `requestAnimationFrame`, and apply via `gsap.set(videoBg, { x, y })`. **Liquid-glass utility (add to `index.css`):** ```css .liquid-glass { background: rgba(255,255,255,0.01); background-blend-mode: luminosity; backdrop-f

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