Impressive Hero

Create a full-screen hero section in React + TypeScript + Tailwind CSS (Vite) with a fullscreen background video, a floating "liquid glass" navigation bar, an animated character-by-character heading, and a bottom liquid-glass tagline pill.

Stack / Setup:

React 18 + TypeScript + Vite Tailwind CSS (default config, no theme extensions) No extra libraries (no framer-motion, no icon libs needed for this section) Font: 'Helvetica Neue', Helvetica, Arial, sans-serif, weight 400, antialiased Global CSS (src/index.css):

@tailwind base; @tailwind components; @tailwind utilities;

body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.liquid-glass { background: rgba(0, 0, 0, 0.4); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .liquid-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } Components:

AnimatedHeading — splits text into characters, each <span> is inline-block with transition-all duration-500. Starts at opacity: 0, translateX(-18px) and animates to opacity: 1, translateX(0) with a per-character transitionDelay of lineIndex * line.length * charDelay + charIndex * charDelay ms. Supports multi-line via \n split, each line wrapped in <div className="flex flex-wrap justify-center">. Starts after delay ms via setTimeout. Preserves spaces using \u00A0.

FadeIn — wraps children in a div with transition-opacity, toggles opacity 0 -> 1 after delay ms, transitionDuration configurable (default 800ms).

Hero layout (App.tsx):

Root: min-h-screen bg-black text-white relative

Background <video autoPlay loop muted playsInline> absolutely positioned, inset-0 w-full h-full object-cover, with source: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260423_084718_72a17915-4964-4059-afcd-22d59399b72e.mp4 (type video/mp4)

Content wrapper: relative z-10 min-h-screen

Navbar (absolutely positioned top, padding px-6 md:px-12 lg:px-16 pt-6): a .liquid-glass rounded-xl bar, flex items-center justify-between px-4 py-2:

Left: <div className="text-2xl font-semibold tracking-tight">VEX</div> Center (hidden on mobile, md:flex gap-8 text-sm): links "Story", "Investing", "Building", "Advisory" with hover:text-gray-300 transition-colors Right: white pill button "Start a Chat" — bg-white text-black px-6 py-2 rounded-lg text-sm font-medium hover:bg-gray-100 Center block (min-h-screen px-6 md:px-12 lg:px-16 flex flex-col items-center justify-center text-center, inner w-full max-w-4xl flex flex-col items-center):

AnimatedHeading with text "Shaping tomorrow\nwith vision and action.", classes text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-normal mb-4, inline style letterSpacing: '-0.04em', delay={200}, charDelay={30} FadeIn delay={800} duration={1000}: <p className="text-base md:text-lg text-gray-300 mb-5">We back visionaries and craft ventures that define what comes next.</p> FadeIn delay={1200} duration={1000}: two buttons in flex flex-wrap gap-4 justify-center: Primary: "Start a Chat" — bg-white text-black px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition-colors Secondary: "Explore Now" — liquid-glass border border-white/20 text-white px-8 py-3 rounded-lg font-medium hover:bg-white hover:text-black transition-colors Bottom tagline (absolutely positioned, bottom-0 left-0 right-0 px-6 md:px-12 lg:px-16 pb-12 lg:pb-16 flex justify-center): FadeIn delay={1400} duration={1000} wrapping a .liquid-glass border border-white/20 px-6 py-3 rounded-xl containing <p className="text-lg md:text-xl lg:text-2xl font-light">Investing. Building. Advisory.</p>

Animation timeline:

200ms: heading characters start animating left-to-right, 30ms per character, 500ms each 800ms: subheading fades in over 1000ms 1200ms: CTA buttons fade in over 1000ms 1400ms: bottom tagline fades in over 1000ms Responsive breakpoints: mobile-first, nav links hidden below md, heading scales from text-4xl up to xl:text-7xl.