Figurine Carousel Hero

# Figurine Carousel Hero — Full-Viewport Product Carousel

## Goal
Build a single full-viewport hero section for a character-figurine shop called "TOONHUB". Four figurines rotate through four roles — center, left, right, back — and the background colour, scale, blur, opacity and position all crossfade together on one shared 650ms curve. The figurines stand at the bottom of the screen, overlapping a giant ghost headline behind them.

Stack: React + TypeScript + Vite + Tailwind CSS, `lucide-react` for icons.

## Fonts (load in `index.html` head)
```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=Anton&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
```
Body font `'Inter', sans-serif`. Display font — the huge ghost text and the bottom-right link — `'Anton', sans-serif`.

## Image Data
Four items, exact URLs and colours:
```ts
const IMAGES = [
  { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/1.02464a56.png', bg: '#F4845F', panel: '#F79B7F' },
  { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/2.b977faab.png', bg: '#6BBF7A', panel: '#85CC92' },
  { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/3.4df853b4.png', bg: '#E882B4', panel: '#ED9DC4' },
  { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/4.4457fbce.png', bg: '#6EB5FF', panel: '#8DC4FF' },
];
```
Preload all four on mount via `new Image()`.

## State & Logic
- `activeIndex` (0–3), an `isAnimating` boolean lock, and `isMobile` (`window.innerWidth < 640`, updated on resize).
- `navigate('next' | 'prev')`: return early if animating; set `isAnimating = true`; move `activeIndex` to `(prev + 1) % 4` or `(prev + 3) % 4`; release the lock after 650ms.
- Roles derived from `activeIndex`: `center = activeIndex`, `left = (activeIndex + 3) % 4`, `right = (activeIndex + 1) % 4`, `back = (activeIndex + 2) % 4`.

## Layout
The outer `<div>` carries `backgroundColor: IMAGES[activeIndex].bg`, `transition: background-color 650ms cubic-bezier(0.4,0,0.2,1)`, `fontFamily: 'Inter, sans-serif'`, and `relative w-full overflow-hidden`. Inside it, a `relative w-full` div with `height: 100vh; overflow: hidden`.

1. **Grain overlay** — `absolute inset-0 pointer-events-none`, zIndex 50. An SVG fractalNoise data URI with `baseFrequency=0.9`, `numOctaves=4`, opacity 0.08 inside the SVG; the container sits at `opacity: 0.4`, `backgroundSize: 200px 200px`, repeating.
2. **Giant ghost text "3D SHAPE"** — `absolute inset-x-0 flex items-center justify-center pointer-events-none select-none`, zIndex 2, `top: 18%`. Anton, `fontSize: clamp(90px, 28vw, 380px)`, weight 900, white, opacity 1, `lineHeight: 1`, uppercase, `letterSpacing: -0.02em`, `whiteSpace: nowrap`.
3. **Top-left brand label "TOONHUB"** — `absolute top-6 left-4 sm:left-8`, zIndex 60. `text-xs font-semibold uppercase`, white at 0.9 opacity, `letterSpacing: 0.18em`.
4. **Carousel** — `absolute inset-0`, zIndex 3. Map all four items; each is `position: absolute` with `aspectRatio: '0.6 / 1'` and role-based styles. Inside each, an `<img>` at `width: 100%; height: 100%; objectFit: contain; objectPosition: bottom center`, `draggable={false}`.

   Per-role style:
   - **center** — `transform: translateX(-50%) scale(isMobile ? 1.25 : 1.68)`, no blur, opacity 1, zIndex 20, `left: 50%`, `height: isMobile ? '60%' : '92%'`, `bottom: isMobile ? '22%' : 0`.
   - **left** — `translateX(-50%) scale(1)`, blur 2px, opacity 0.85, zIndex 10, `left: isMobile ? '20%' : '30%'`, `height: isMobile ? '16%' : '28%'`, `bottom: isMobile ? '32%' : '12%'`.
   - **right** — identical to left, but `left: isMobile ? '80%' : '70%'`.
   - **back** — `translateX(-50%) scale(1)`, blur 4px, opacity 1, zIndex 5, `left: 50%`, `height: isMobile ? '13%' : '22%'`, `bottom: isMobile ? '32%' : '12%'`.

   Each item transitions `transform`, `filter`, `opacity` and `left` over 650ms `cubic-bezier(0.4,0,0.2,1)`, with `willChange: 'transform, filter, opacity'`.
5. **Bottom-left copy and nav** — `absolute bottom-6 left-4 sm:bottom-20 sm:left-24`, zIndex 60, `maxWidth: 320px`:
   - `<p>` "TOONHUB FIGURINES" — bold, uppercase, tracking-widest, `mb-2 sm:mb-3 text-base sm:text-[22px]`, white at 0.95, `letterSpacing: 0.02em`.
   - `<p>` hidden on mobile (`hidden sm:block`): "The artwork is stunning, shipped fully prepared. The finish is a vision, the 3D craft is flawless. Many thanks! Wishing you the win. Order now." — `text-xs sm:text-sm`, white at 0.85, `lineHeight: 1.6`, `mb-4 sm:mb-5`.
   - Two circular buttons (`w-12 h-12 sm:w-16 sm:h-16`, transparent background, 2px white border, white icon) using `ArrowLeft` and `ArrowRight` from lucide-react at size 26, `strokeWidth` 2.25. Hover: `scale(1.08)` plus background `rgba(255,255,255,0.12)`, transitioning `transform 150ms, background-color 150ms`. They call `navigate('prev')` and `navigate('next')`.
6. **Bottom-right link "DISCOVER IT"** — `absolute bottom-6 right-4 sm:bottom-20 sm:right-10`, zIndex 60. An `<a>` with `flex items-center`, Anton, `fontSize: clamp(20px, 4vw, 56px)`, weight 400, white, opacity 0.95 rising to 1 on hover over 200ms, `letterSpacing: -0.02em`, `lineHeight: 1`, uppercase, no underline. Followed by `ArrowRight` (`w-5 h-5 sm:w-8 sm:h-8`, `strokeWidth` 2.25).

## Behaviour Summary
Clicking either arrow rotates the roles. Background colour, image positions, scales, blurs and opacities all crossfade simultaneously over 650ms with `cubic-bezier(0.4,0,0.2,1)`. The figurines sit at the bottom of the screen, overlapping the giant "3D SHAPE" text behind them.

## Quality Bar
- TypeScript strict, zero `any`. Tailwind for layout; inline styles only where the role-based values are computed.
- The 650ms lock must not swallow input — disable the buttons while animating rather than silently dropping clicks, so the control never feels broken.
- Watch the payload: source figurines are multi-megabyte PNGs. Compress and resize them to the rendered size, serve WebP/AVIF, and preload only the first frame — a `new Image()` preload of four full-size PNGs will stall the hero on a slow connection.
- Give the `<img>` elements real `alt` text, mark the ghost headline `aria-hidden`, and make both arrows keyboard-operable with visible focus rings.
- Honour `prefers-reduced-motion`: swap roles instantly with a short opacity fade instead of the 650ms transform/blur choreography.