VEX

# VEX — Fullscreen Venture Hero with Character-by-Character Headline

## Goal
Build a fullscreen hero section for a venture firm called "VEX" with React + TypeScript + Tailwind CSS on Vite. One viewport, nothing else: a full-bleed looping video, a liquid-glass navbar at the top, and a copy block pinned to the bottom edge whose headline animates in one character at a time. No UI kit; `lucide-react` is available but the hero uses no icons.

## Background video
- URL (exact): `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260403_050628_c4e32401-fab4-4a27-b7a8-6e9291cd5959.mp4`
- Absolutely positioned, covering the whole viewport, `object-cover`, behind everything.
- Attributes: `autoPlay loop muted playsInline`.
- **No dark overlay, no gradient overlay, no semi-transparent layer on top of it.** The footage plays raw, with zero dimming — the only darkened surfaces on the page are the glass panels themselves.

## Typography (applies globally)
- Import **Inter** in `index.html` with a `<link>`:
  ```html
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  ```
- Global CSS: `body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }`
- Extend the Tailwind config with `fontFamily: { sans: ['Inter', 'sans-serif'] }` so every `font-sans` picks Inter up automatically.

## Colours
Black background, white text, `gray-300` for secondary text, `white/20` for borders. No purple, no indigo.

## Liquid glass (global CSS)
```css
.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;
}
```

## Navbar
- Wrapped in the page's horizontal padding: `px-6 md:px-12 lg:px-16`, plus `pt-6`.
- The bar itself: `liquid-glass rounded-xl px-4 py-2 flex items-center justify-between`.
- **Left**: logo text "VEX" — `text-2xl font-semibold tracking-tight`.
- **Centre** (`hidden md:flex`): Story, Investing, Building, Advisory — `text-sm`, `gap-8`, hover transitions to `gray-300`.
- **Right**: "Start a Chat" — `bg-white text-black px-6 py-2 rounded-lg text-sm font-medium`, hover to `gray-100`.

## Hero content (bottom of the viewport)
- Same horizontal padding as the navbar. Flex column filling the remaining height, content pushed to the bottom with `flex-1 flex flex-col justify-end`, bottom padding `pb-12 lg:pb-16`.
- From `lg` up it is a two-column grid: `lg:grid lg:grid-cols-2 lg:items-end`.

### Left column
**Heading** — "Shaping tomorrow\nwith vision and action." with a literal line break between "tomorrow" and "with".
- `text-4xl md:text-5xl lg:text-6xl xl:text-7xl`, `font-normal`, `mb-4`, inline style `letterSpacing: '-0.04em'`.
- Character-by-character entrance: each character starts at `opacity: 0` and `translateX(-18px)` and transitions to `opacity: 1` / `translateX(0)`. Per-character delay is `(lineIndex * lineLength * charDelay) + (charIndex * charDelay)` with `charDelay = 30`ms; the whole run starts after a 200ms initial delay; each character's transition is 500ms.
- Spaces render as `\u00A0`.

**Subheading** — "We back visionaries and craft ventures that define what comes next."
- `text-base md:text-lg text-gray-300 mb-5`. Fade-in at 800ms delay, 1000ms duration.

**Buttons** — a `flex-wrap` row with `gap-4`, fading in at 1200ms delay, 1000ms duration.
- "Start a Chat": `bg-white text-black px-8 py-3 rounded-lg font-medium`.
- "Explore Now": `liquid-glass border border-white/20 text-white px-8 py-3 rounded-lg font-medium`, hover transitions to a white background with black text.

### Right column
- Bottom-right on large screens: `flex items-end justify-start lg:justify-end`.
- A glass card: `liquid-glass border border-white/20 px-6 py-3 rounded-xl`.
- Text "Investing. Building. Advisory." — `text-lg md:text-xl lg:text-2xl font-light`.
- Fade-in at 1400ms delay, 1000ms duration.

## Components
- **`FadeIn`** — a wrapper that starts at `opacity: 0` and transitions to `opacity: 1` after a configurable delay (ms) via `setTimeout` + React state. Duration is configurable too: `transitionDuration` inline, `transition-opacity` from Tailwind.
- **`AnimatedHeading`** — splits the text on `\n` into lines, then each line into characters. Every character is an `inline-block` `<span>` with CSS transitions on `opacity` and `transform` (`translateX`); the animation fires from React state after the initial delay.

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no CSS files beyond the font declarations and the `.liquid-glass` block above.
- Autoplay only works while the element is genuinely `muted` and `playsInline` — keep both. Give the video `aria-hidden`; it is decoration and never the only carrier of meaning.
- Clear the pending `setTimeout` in the effect teardown, in both components — a fast unmount otherwise leaves a timer writing state into a dead component.
- Read `prefers-reduced-motion` inside the effect, not in the `useState` initialiser: `matchMedia` is client-only, and seeding state from it makes the markup disagree with hydration the moment this lands in Next.js.
- Group the character spans by word — each word an `inline-block whitespace-nowrap` wrapper — while the character index keeps running across the whole line so the delays stay on the formula. A flat run of `inline-block` spans hands the browser a break opportunity between every pair of letters, and the left grid column is narrower than the headline at every width below `2xl`, so without the grouping the heading breaks mid-word.
- Respect `prefers-reduced-motion`: drop every character and every `FadeIn` straight to its end state, and pause the video on a still frame. The entrances are all CSS transitions, so `motion-reduce:transition-none` covers them — the state flip still happens, it just stops being animated. The video is not covered: `loop` keeps running regardless, so it needs a ref and an explicit `pause()` behind the same media query.
- Watch the payload: a full-resolution source video will dominate page weight. Downscale to the rendered size, drop the audio track that muted playback never uses, and serve a compressed derivative.
- White type sits directly on the footage with nothing between them. It holds because this clip is a dusk skyline whose lower third is dark water and foliage — exactly where the copy block lives. Re-check contrast against the actual video before swapping the source; if a brighter clip goes in, the honest fix is a scrim, and that changes the design.
- The glass panels only read as glass while `backdrop-filter` is supported. Where it is not, `rgba(0,0,0,0.4)` is still doing the contrast work, so the text stays legible — verify rather than assume.
- One `<h1>` per page, and the split characters must still read as one string to a screen reader: put the whole line on the `<h1>` as an `aria-label` and mark the character spans `aria-hidden`.