Add intro animation

[manifoldfrs]

Description

Adds a 7.6s intro animation that plays on the first visit to the marketing website within a session.

09EE09B7-31F0-47D4-A9F8-52708808BE18.mov

Features

• Intro Animation: Full-screen video animation (IntroAnimation.tsx) with fade-out transition
• Session Persistence: Only shows once per browser session using sessionStorage
• Skip Options: Users can skip via "Skip" button or pressing Escape key
• Accessibility: Respects prefers-reduced-motion - animation is skipped entirely for users who prefer reduced motion
• Performance Optimizations:
  • Server-side <link rel="preload"> for immediate video download before React hydration
  • Client-side VideoPreloader component that warms the media pipeline
  • Respects saveData mode and slow network connections (2g/slow-2g)
  • 10s fallback timeout prevents users from getting stuck
• Error Handling: Graceful fallback if video fails to load

Files Added

File	Purpose
app/components/IntroAnimation.tsx	Main intro animation component with video player
app/components/VideoPreloader.tsx	Client-side video preloading for media pipeline warming
app/contexts/IntroContext.tsx	React context for intro state management
app/hooks/useReducedMotion.ts	Hook to detect reduced motion preference
app/lib/introMedia.ts	Centralized constants for video URL and storage key
public/intro/x402-intro.mp4	Intro video asset (911KB)

Files Modified

File	Changes
app/layout.tsx	Added <link rel="preload">, integrated IntroProvider, VideoPreloader, and IntroAnimation

Tests

• pnpm lint:check - ESLint passes
• pnpm format:check - Prettier passes
• npx tsc --noEmit - TypeScript compilation passes
• pnpm build - Production build succeeds
• Manual testing:
  • Intro plays on first visit
  • Intro does not replay on page refresh (same session)
  • Intro replays after closing and reopening browser tab (new session)
  • Skip button works
  • Escape key skips animation
  • Reduced motion preference skips animation
  • Video error gracefully handled

Checklist

• I have formatted and linted my code
• All new and existing tests pass
• My commits are signed (required for merge) -- you may need to rebase if you initially pushed unsigned commits

[cb-heimdall]

🟡 Heimdall Review Status

Requirement	Status	More Info
Reviews	🟡 0/1	Denominator calculation Show calculation 1 if user is bot 0 1 if user is external 0 2 if repo is sensitive 0 From .codeflow.yml 1 Additional review requirements Show calculation Max 0 0 From CODEOWNERS 0 Global minimum 0 Max 1 1 1 if commit is unverified 0 Sum 1

[vercel]

@manifoldfrs is attempting to deploy a commit to the Coinbase Team on Vercel.

A member of the Team first needs to authorize it.