应式3D角色轮播动画UI

Prompt

一键获取所有惊艳动画网站的 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」文字相互叠加。

复用方法

关键决定

用四个角色位，center、left、right、back，加对应的固定样式表（缩放、模糊、透明度、层级）来描述轮播状态，而不是直接写死每张图片的具体位置，这种角色位驱动样式的架构决定是这个轮播组件的核心，切换时只需要轮转四个角色的索引分配，所有视觉变化就自动通过 CSS transition 联动完成，不需要单独为每次切换写动画逻辑。用巨大的幽灵文字「3D SHAPE」压在轮播图片下层，图片又叠加在文字之上，这种图文交叠的层级设计是制造视觉纵深感和品牌记忆点的关键决定。

换到你的题材

变量是品牌名、幽灵文字内容、图片数据和配色。骨架是三样：角色位驱动的状态管理架构、650ms 统一过渡时长加 cubic-bezier 缓动曲线、巨大背景文字加前景图片的层级叠加设计。换成其他产品轮播场景，比如鞋类电商、汽车展示时，把图片数据和背景文字替换掉，角色位状态管理和统一过渡时长这两条技术规则可以整段复用，这是这类轮播组件最有工程复用价值的部分。

容易翻车

这条 Prompt 是一份非常精确的代码级规格说明，任何一个数值（650ms、cubic-bezier 参数、各角色位的 scale 和 blur 值）实现时都可能被写代码的模型悄悄改动或遗漏，复测时要逐项核对生成的代码是否精确匹配了每个角色位的样式参数。isAnimating 锁和角色位取模运算这类状态逻辑容易在实现时出现边界错误，比如快速连续点击时动画锁失效，复测时要专门测试快速连续点击箭头是否会导致轮播位置错乱或动画卡顿。

建议模型

Claude SonnetGPT-5Gemini Pro

稳定度: 92 / 100
成本: 中

创作者

viktoroddy

viktoroddy 在X输出 UI 工程化实践，《应式3D角色轮播动画UI》搭 Claude Sonnet 出方案，带可复现代码。

值得学习AI 编程(UI)稳定输出来源互动高

查看创作者 →

AI 编程(UI)X / 𝕏2026/05/10@servasyy_ai →

image to 3D

这条案例的价值不在提示词本身（prompt 只是一个 GitHub 链接），而在于它开源了一整套图生 3D 工作台：后端统一代理 Tripo、Hyper3D、Fal.ai、Hunyuan3D 等多家图生 3D API 并自动降级，密钥不进前端、生成结果本地缓存复用，是少见的能直接跑起来学的工程参考，而不是一次性效果展示。说明：该案例的创意归属存在争议——有创作者公开指出此想法与其更早发布的作品高度相似且未获署名，开源仓库的致谢也被指不完整。收录基于其工程实现的参考价值，归属争议请读者自行判断。

Skill · 3D / 动效 Hero

方法 / 代码

查看方法 ↗

来源热度

100

稳定度

查看 Case →

AI 编程(UI)X@Oluwaphilemon1 →

3D 超市包装式创意机构官网

@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 Hero Skill · 个人作品集叙事

提示语

Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中使用 GSAP 实现流畅的产品旋转和悬停交互如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒

来源热度

稳定度

查看 Case →

AI 编程(UI)X@uxsweta →

3D 发票打印机 SaaS 组件

@uxsweta 使用 AI UI Builder完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 Hero Skill · 产品与电商转化页

提示语

有几个人询问提示词，所以放在这里 👇 附言：根据你的使用场景进行调整。创建一个现代、极简的 3D 发票生成器机器组件，采用高级 SaaS 风格美学。视觉设计 - 设计一台宽幅横向的发票打印机，灵感来自小票打印机，但外观未来感十足且干净利落。 - 使用细微的灰色线条、柔和阴影和极少细节。 - 机器应显得高级、轻盈而现代，而不是写实或工业化。 - 保持整体设计足够干净，使其可以放入仪表盘或落地页的 Hero 区域。 - 直接在机器上添加一个醒目的 Print Inv

来源热度

稳定度

查看 Case →

Prompt

一键获取所有惊艳动画网站的 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」文字相互叠加。

复用方法

关键决定

换到你的题材

容易翻车

建议模型

Claude SonnetGPT-5Gemini Pro