Duo Web Simulator

An independent seven-pose foldable phone viewer built with Three.js and TypeScript. Explore a procedural model, adjust its hinge, rotate the camera and export a transparent PNG. Run it locally, learn from it, or adapt it under the MIT license.

Try the live demo · How the model works · Asset and license provenance

What you can do

• Explore seven views: Unfold, Landscape, Portrait, Closed, Seated, Standing and Details.
• Adjust the fold from 0° to 180°, drag to orbit, and scroll or pinch to zoom.
• Choose silver, ink or sand frame finishes.
• Save a PNG of the model, with a transparent background.
• Use native keyboard-accessible controls; reduced-motion preferences are respected.
• Learn from a small, standalone project without a backend, API key or account.

The device geometry and canvas-generated screen art are original. Nothing is downloaded from Apple. The model is illustrative: it is not CAD, an iOS emulator, an official Apple product viewer, or a hardware/durability test. Export is a still image; this project does not export video or run phone apps.

Run locally

Use Node.js 22.12 or newer.

git clone https://github.com/watreesir/duo-web-simulator.git
cd duo-web-simulator
npm ci
npm run dev

Open the localhost URL printed by Vite. For a static production build:

npm run build
npm run preview

Deploy dist/ to a static host. The build uses relative asset URLs, so it also works under a subdirectory. No environment file is required. The demo UI is currently English only.

Change a pose

Each view in src/poses.ts has its own fold angle, model rotation and camera position:

{
  id: 'standing',
  label: 'Standing',
  title: 'Find your balance',
  description: 'A partly open hinge gives the upright form a new sense of depth.',
  fold: 65, // degrees: 0 closed, 180 flat
  rotation: [0.12, -0.85, 0], // Euler XYZ, radians
  camera: [0, 0.2, 8.5],
}

See the architecture guide for the hinge coordinate system, split-screen UV mapping, animation loop and places to customize. Change the dimensions in src/scene.ts to explore other foldable forms; do not treat the defaults as measured hardware dimensions.

Tests

npx playwright install chromium
npm test

Tests exercise all seven poses, fold and reset behavior, PNG export, keyboard controls, mobile overflow, and the no-WebGL fallback. WebGL requires a compatible browser/GPU or software renderer. You can select installed Chromium with PLAYWRIGHT_CHANNEL=chromium npm test; do not disable tests to hide a graphics-environment failure.

Related tools and context

I maintain this project and iPhone Duo Guide, an independent guide and collection of browser tools. These links belong to the same maintainer:

• Screen-size comparison and calculation method: understand aspect ratios, letterboxing and usable video area before composing screen content. Its source inputs and limitations are documented on the page.
• Duo Studio: the site's separate tour, phone interface and creative tools. The existing Apple-asset-based tour and the rest of that site are not the source in this repository.
• The site's folding-animation tutorial: a workflow for the site's separate creative tool, not a video-export feature of this repository.

The live open-source demo linked at the top is built from this repository. The broader guide and Duo Studio have different content, capabilities and asset rights.

Privacy

There is no analytics SDK, upload endpoint, cookie, storage persistence, camera or microphone access in the downloadable app. Rendering and PNG generation happen in your browser. The app emits local duo:interaction DOM events for pose selection and PNG generation, without sending them anywhere. The live demo on iphoneduo.io adds the site's cookie-free Plausible adapter for page views, link clicks and these two actions; see its privacy policy. That adapter is not included in this repository. Clicking an external link takes you to another site's privacy policy. Guide links include non-personal UTM campaign labels so the maintainer can distinguish referral visits; you can remove or replace them in your fork. No runtime service depends on keeping those links.

License and independence

Original code, geometry, generated artwork and documentation: MIT. Commercial use, modifications and competing implementations are allowed. Keep the copyright and license notice where MIT requires it; a visible backlink is appreciated, not required. Third-party dependencies retain their own licenses.

This project is not affiliated with or endorsed by Apple. Apple and iPhone are trademarks of Apple Inc. No Apple logos, presentation files, models, textures, wallpapers or proprietary site template are included.

Contribute

Reproducible bug reports, accessibility fixes, improved geometry explanations and original example scenes are welcome. Include browser/OS and steps to reproduce, and avoid sharing personal data. Read CONTRIBUTING.md before adding assets or dependencies. Updates are driven by useful fixes and examples, not by a commit-count schedule.