解构内心星图：基于 React + Three.js + Tailwind v4 构建 3D 沉浸式 MBTI “灵魂棱镜” 测试站

传统的性格测试通常采用枯燥的白底黑字单选题形式，缺乏情感上的交互共鸣。为了打破这一维度，我研发了「灵魂棱镜（Soul Prism）」（mbti.lsh.indevs.in）性格探索平台。项目旨在将深奥的 MBTI 心理学理论融入现代科幻与数字禅美学之中，利用高度动态的感官交互，引导测试者在一场如梦似幻的交互式光影体验中，解构属于自己的量子化灵魂图谱。

在界面设计上，全站采用了前卫的玻璃拟物化（Glassmorphism）与极简主义相结合的视觉语言。得益于全新的 Tailwind CSS v4 带来的编译性能飞跃与原生 CSS 变量融合，我们得以使用极其精简优雅的原子类名，绘制出带有细腻半透明毛玻璃质感、边缘流光溢彩的玻璃卡片与深邃的空间阴影。配合 Framer Motion 构建的场景路由切换和弹性微交互，每一次题目的渐入渐出、每一个选项在鼠标悬停与点击时的缩放及回弹响应，都呈现出如丝绸般顺滑、自然有机的动态张力，极大增强了测试的沉浸感。

项目的技术硬核在于 3D 视觉层与用户交互的无缝融合。我们基于 Three.js 与 @react-three/fiber (R3F)，在背景层构建了一个高性能的自适应 3D 粒子星空矩阵。这一 3D 场景并非冷冰冰的背景装饰，而是与前端的“答题进度”以及“用户性格维度倾向”做出了深度的响应式状态绑定。当用户在答题过程中倾向于不同人格特质时，粒子矩阵的色彩光谱流速、引力焦点以及旋涡强度会产生实时的物理共振与折射光效变幻，以可视化的粒子流完美呼应了“棱镜（Prism）”这一定义。

为了方便用户将测试结果进行社交传播，项目集成了 html-to-image 功能。在测试终点页，系统会将包含 MBTI 雷达分析图谱、核心特质优势标签、盲区成长指南以及专属“灵魂量子标识”的精美 UI 视图，直接在客户端浏览器内存中高性能渲染为一张 2K 高清 PNG 海报图。这种基于 Canvas 像素流的客户端“零延迟导出”方案，避免了繁重的服务器端渲染（SSR）开销，在保护了绝对用户隐私的前提下，为用户带来了极佳的保存与社交分享体验。

最终，该项目作为一个完全解耦的静态 Web App，通过 GitHub 的 Git 集成直接部署到了 Cloudflare Pages 边缘 network，实现全球毫秒级的无缝渲染与极致秒开速度。这不仅是一次将心理学与 3D 计算机视觉完美碰撞的趣味尝试，更是在 Vibe Coding 设计哲学下，将极致视觉、交互体验与现代前端工程高度黏合的又一次快乐实践。