应式3D角色轮播动画UI

一键获取所有惊艳动画网站的 Prompt：http://motionsites.ai

用 React + TypeScript + Vite + Tailwind CSS 构建一个全视口高度的单一主视觉区块，图标使用 `lucide-react`。这个组件是一个名为「TOONHUB」的角色手办轮播组件。

**字体（在 `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" />
```
正文字体：`'Inter', sans-serif`。展示字体（巨大幽灵文字+右下方链接）：`'Anton', sans-serif`。

**图片数据（4 项，精确的 URL 和颜色）：**
```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' },
];
```
组件挂载时通过 `new Image()` 预加载全部 4 张图片。

**状态与逻辑：**
- `activeIndex`（0 到 3），`isAnimating` 布尔锁，`isMobile`（`window.innerWidth < 640`，随窗口尺寸变化更新）。
- `navigate('next' | 'prev')`：动画进行中则忽略；设置 `isAnimating=true`；将 `activeIndex` 更新为 `(prev+1)%4` 或 `(prev+3)%4`；`650ms` 后释放锁。
- 由 activeIndex 推导出的角色位：`center=activeIndex`，`left=(activeIndex+3)%4`，`right=(activeIndex+1)%4`，`back=(activeIndex+2)%4`。

**布局结构：**
最外层 `<div>` 设置 `backgroundColor: IMAGES[activeIndex].bg`，过渡效果 `background-color 650ms cubic-bezier(0.4,0,0.2,1)`，`fontFamily: 'Inter, sans-serif'`，`relative w-full overflow-hidden`。内部是一个 `relative w-full` 的 div，`height: 100vh; overflow: hidden`。

1. **颗粒叠加层**（`absolute inset-0 pointer-events-none`，zIndex 50）：SVG fractalNoise data URI，`baseFrequency=0.9`，`numOctaves=4`，SVG 内部 opacity 0.08，容器 `opacity: 0.4`，`backgroundSize: 200px 200px`，重复平铺。

2. **巨大幽灵文字「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)`，字重 900，颜色白色，opacity 1，lineHeight 1，全大写，letterSpacing `-0.02em`，whiteSpace nowrap。

3. **左上角品牌标签「TOONHUB」**（`absolute top-6 left-4 sm:left-8`，zIndex 60）：`text-xs font-semibold uppercase`，白色，opacity 0.9，letterSpacing `0.18em`。

4. **轮播区**（`absolute inset-0`，zIndex 3）：遍历渲染全部 4 张 IMAGES；每一项 `position:absolute`，`aspectRatio: '0.6 / 1'`，按下方角色位分别设置样式。内部是一个 `<img>`，`width:100%; height:100%; objectFit:contain; objectPosition:bottom center; draggable=false`。

   各角色位样式：
   - **center**：`transform: translateX(-50%) scale(${isMobile?1.25:1.68})`，无模糊，opacity 1，zIndex 20，`left:50%`，`height: isMobile?'60%':'92%'`，`bottom: isMobile?'22%':0`。
   - **left**：`translateX(-50%) scale(1)`，模糊 2px，opacity 0.85，zIndex 10，`left: isMobile?'20%':'30%'`，`height: isMobile?'16%':'28%'`，`bottom: isMobile?'32%':'12%'`。
   - **right**：与 left 相同，但 `left: isMobile?'80%':'70%'`。
   - **back**：`translateX(-50%) scale(1)`，模糊 4px，opacity 1，zIndex 5，`left:50%`，`height: isMobile?'13%':'22%'`，`bottom: isMobile?'32%':'12%'`。

   每一项的过渡效果：`transform 650ms cubic-bezier(0.4,0,0.2,1), filter 650ms ..., opacity 650ms ..., left 650ms ...`。`willChange: transform, filter, opacity`。

5. **左下角文字加导航按钮**（`absolute bottom-6 left-4 sm:bottom-20 sm:left-24`，zIndex 60，`maxWidth:320px`）：
   - `<p>` 「TOONHUB FIGURINES」——粗体大写，tracking-widest，`mb-2 sm:mb-3 text-base sm:text-[22px]`，白色，opacity 0.95，letterSpacing `0.02em`。
   - `<p>`（移动端隐藏，`hidden sm:block`）：「作品令人惊艳，送达时已完全准备就绪。成品效果堪称一绝，3D 工艺无可挑剔。非常感谢！祝你好运。立即下单。」——`text-xs sm:text-sm`，白色，opacity 0.85，lineHeight 1.6，`mb-4 sm:mb-5`。
   - 两个圆形按钮（`w-12 h-12 sm:w-16 sm:h-16`，透明背景，2px 白色边框，白色图标）：来自 lucide-react 的 `ArrowLeft` 和 `ArrowRight`，尺寸 26，strokeWidth 2.25。悬停时：放大至 1.08 倍 + 背景色 `rgba(255,255,255,0.12)`。过渡效果 `transform 150ms, background-color 150ms`。点击触发 `navigate('prev')` / `navigate('next')`。

6. **右下角链接「DISCOVER IT」**（`absolute bottom-6 right-4 sm:bottom-20 sm:right-10`，zIndex 60）：`<a>` flex items-center，字体 Anton，`fontSize: clamp(20px, 4vw, 56px)`，字重 400，白色，悬停时 opacity 从 0.95→1（200ms），letterSpacing `-0.02em`，lineHeight 1，全大写，无下划线。后接 `ArrowRight`（`w-5 h-5 sm:w-8 sm:h-8`，strokeWidth 2.25）。

**行为总结：**点击箭头会轮转角色位；背景色、图片位置、缩放、模糊和透明度全部在 650ms 内以 `cubic-bezier(0.4,0,0.2,1)` 同步交叉渐变。角色图片位于屏幕底部，与它们身后的巨大「3D SHAPE」文字相互叠加。