交互式网页实验

iPhone Duo Vercel App：交互式折叠手机实验

iPhone Duo Vercel App 是一个可在浏览器中操作的折叠手机实验，通过 React、Three.js 和 Motion 把 Apple 的 iPhone Duo 模型做成可拖动、展开和调节的交互页面。本文说明它能做什么、如何使用、哪些代码可复用，以及素材许可的边界。

独立项目声明: 该演示由开发者 jal-co 制作，不是 Apple 官方产品、Apple 官方应用或 ToolAtrium 自有产品。

iPhone Duo Vercel App 快速信息

快速结论

iPhone Duo Vercel App 更适合作为交互动效和前端工程参考：折叠过程细腻、控制项清楚、源代码公开；但它不是 iPhone 模拟器，也不是所有素材都可自由再分发的即装即用组件包。

iPhone Duo Vercel App 是一个部署在 Vercel 上的独立折叠手机设计实验。页面把 3D iPhone Duo 放在暗色工作室场景中，访问者可以自己控制手机从闭合到展开的过程，而不只是观看固定视频。

它的重点是折叠交互。手机两半围绕铰链旋转时，屏幕图层会分阶段模糊、移动、缩放并重新变清晰，因此整体体验比简单旋转一个 3D 模型更接近真实产品演示。

iPhone Duo Vercel App 的主要控制项无需注册即可使用。你可以在手机上横向拖动，点击设备或 Unfold 按钮，也可以使用折叠角度滑块停在中间状态。页面还提供三种壁纸效果。

Tune 面板可以调节动画时长、模糊、视差、灯光、背景和屏幕图像。项目文档还说明了键盘控制和减少动态效果的处理方式，因此它不仅适合观看，也适合用作前端实现参考。

根据仓库文档，页面使用 React 19 组织组件，使用 Three.js 加载预处理的 3D 模型和屏幕着色器，再使用 Motion 管理过渡状态。外屏与内屏采用不同纹理图层，使模糊和新内容进入动画可以分别控制。

代码被拆分为 FoldablePhone、PhoneDevice、FoldToggle 和 FoldScrubber 等组件。开发者可以把相关源码目录复制到 React 项目中研究或改造，但该项目目前不是一个已发布的 npm 包。

仓库说明源代码与原创 SVG 屏幕素材采用 MIT 许可证；Apple 的 3D 模型、模型内嵌纹理和沙漠壁纸不在 MIT 许可范围内。准备复用或重新发布前，应先阅读仓库的 THIRD_PARTY 说明。

iPhone Duo Vercel App 也不是可运行真实 iOS 应用的环境。手机屏幕中的图标和面板属于 WebGL 纹理层，并非可以点击使用的 App。应把它视为交互设计实验，而不是浏览器模拟器或官方产品参数来源。

这个页面更适合前端开发者、动效设计师、创意开发者，以及正在研究折叠设备叙事方式的产品团队。它集中展示了分阶段动画、指针交互、无障碍控制、屏幕着色效果和高保真产品展示。

如果你的目标是了解真实 iPhone Duo 的售价、规格或购买信息，应优先查看 Apple 官方页面；如果目标是学习实现方式，则应把 Vercel 在线演示和 GitHub 仓库结合起来阅读。

不是。它是开发者 jal-co 制作的独立设计与工程实验，不属于 Apple 官方产品或官方应用。

演示页面无需付款或注册即可打开。若要复用代码或素材，仍需遵守仓库许可证和第三方素材说明。

README 提供了复制组件源码并安装 Three.js、Motion 依赖的方式；当前项目不是已发布的 npm 包。

不能。屏幕内容是 WebGL 纹理图层，不是可交互的 iOS 系统或真实应用。

先阅读 LICENSE 与 THIRD_PARTY 文件。Apple 的模型、纹理和壁纸不在项目 MIT 许可证覆盖范围内。

建议使用支持 WebGL 的最新版浏览器。桌面尺寸能更完整地显示折叠控制项和 Tune 面板。

继续浏览 ToolAtrium