Fable 5 复刻 3D 云基础设施网站

尽可能精确地复刻附带视频中展示的网页应用。它是一个深色电影感的 3D「意图 → 基础设施」城市可视化（「用 Gemini Cloud Assist 把意图变成基础设施」）——一个 AI 代理在一张用户可以飞行、悬停、检查的深色 3D 地图上构建一座发光的霓虹城市，同时一个实时代理日志持续滚动。忠实还原它的外观、布局、动效和交互。

必须精确匹配：
- 3D 场景：一座近乎全黑的深色城市——扁平的街道网格，低矮的深色挤出建筑块，逐渐淡入朦胧的地平线，远处有隐约的山脉和星星。中央有一个结构集群，以鲜艳的霓虹色发光（品红、电光绿、青色、蓝色、橙色），带强烈的辉光。动画化的虚线路线（蓝 / 绿 / 黄）在街道中流动。发光的垂直光束信标（蓝色），一个脉动的绿色地面光环，漂浮的图钉。
- POI 悬停：一个圆角 Material 风格药丸提示框，带图标和标签淡入显示（例如「Spectators」「Medical Station」）。
- UI 外壳（Material 风格，圆角、玻璃质感，叠加在画布之上）：
  · 顶部栏：汉堡菜单加暗淡标题「Intent to infrastructure with Gemini Cloud Assist」
  · 左侧竖直工具栏：收藏（心形）、定位 / 盾牌、相机、轨道 / 重新居中、全屏，加相机预设切换「A / B / C」
  · 底部居中操作栏：一个彩虹渐变的 Gemini 风格光球、一个对比 / 切换图标、一个 ">_" 终端 / 日志切换按钮
  · 右下角：设置齿轮加刷新
  · 右侧「LOG」面板（点击 ">_" 时滑入）：PLANNER / RUNNER 两个标签；表格列为 TIME · AGENT · TYPE · MESSAGE；行数据持续流入（PLANNER·TOOL、SIMULATOR·RUN、PLANNER·RUN），带彩色类型标签（红色 TOOL / 蓝色 TOOL / 绿色 RUN）和每行的彩色圆点。

需要还原的行为：
- 自由轨道 / 平移 / 缩放相机；在俯视全景和低角度地平线视角之间平滑飞行切换。
- 相机预设 A/B/C：点击后用 GSAP 平滑飞向已设定好的取景视角。
- 悬停 POI → 弹出提示药丸；切换日志面板；新日志行以细微高亮持续流入。
- 电影感的「构建」揭示动画：结构逐个集群升起并点亮霓虹，路线逐渐绘出，信标弹出。
- 霓虹发光材质带强烈辉光，动画化虚线路线，脉动信标，缓慢的相机怠速漂移，平滑缓动的过渡（不允许跳变）。

技术栈：Next.js + TypeScript + Tailwind，React Three Fiber（Three.js）+ drei（OrbitControls、GLTF Draco），相机动画用 GSAP，UI 面板用 Framer Motion，后期处理（发光层的辉光、暗角、细微颗粒）。60fps、响应式，并提供 prefers-reduced-motion 的降级方案。

我会以 GLTF 格式提供城市模型——围绕一个占位的 /public/city.glb 搭建整个场景（如果没有素材，则生成一个程序化的深色网格城市，带挤出建筑块），并让霓虹集群、路线、信标、POI、相机预设和实时流动的日志面板围绕它完整运作起来。构建完整的应用。