A browser-based study of foldable screen transitions, built with Three.js.
- Only the cover half rotates; the rear-camera half stays fixed.
- Screen content uses a fixed front-view projection during folding. The outer UI stays aligned with its hinge-side left edge.
- Blur and darkening follow the image coordinates, including the image edges. Maximum blur radius is 72 source pixels; darkening uses twice the transition strength, capped at black.
- Wallpaper, Launcher, and Custom modes. Custom opens the image picker directly and applies one image to both screens; the outer screen shows the image's right half.
- Drag to orbit, scroll to zoom, or use the play button and slider to fold the device.
- Responsive controls for desktop and mobile. Uploaded images stay in the current browser tab.
The application is static HTML, CSS, and JavaScript. No Node.js build step is required. Three.js is bundled locally.
The Apple reference assets are downloaded separately. Use Python 3.12 to prepare them:
git clone https://github.com/jadon7/iphone-duo.git
cd iphone-duo
python3 -m venv .venv
source .venv/bin/activate
python -m pip install -r requirements-assets.txt
python scripts/prepare-assets.py
python -m http.server 8766 --bind 127.0.0.1On Windows, activate the environment with .venv\Scripts\activate.
Open http://127.0.0.1:8766/. Serve the directory over HTTP; opening index.html as a local file cannot load the model.
The preparation script downloads the original Star White USDZ and UI images from Apple, selects the model's Landscape pose, flattens its references, and rewrites texture paths for the browser. The resulting files stay in the ignored assets/ directory. Asset URLs were verified on September 10, 2026.
Choose Wallpaper or Launcher for the default screen layouts. Choose Custom to select an image. The inner screen contains the whole image; the outer screen crops to the right-hand portion and aligns that portion to its left edge. Recommended image size: 2670 × 1878.
The slider controls the fold from closed to open. The default view is fully open and paused. The outer screen turns off at full opening.
| File | Purpose |
|---|---|
index.html |
Screen-mode tabs and fold controls |
main.js |
Three.js scene, fold deformation, projected UI, blur, and darkening |
ui.js |
Default screen layouts |
style.css |
Desktop and mobile layout |
scripts/prepare-assets.py |
Download and prepare the reference assets |
vercel.json |
Install and prepare assets during Vercel builds |
vendor/three/ |
Three.js runtime and required add-ons |
The Vercel project is connected to this GitHub repository. Pushes to main publish the production site; other branches create preview deployments.
vercel.json installs the asset tools and runs scripts/prepare-assets.py during each build. Git deployments therefore include the model and screen images without storing those assets in the repository.
For a manual Vercel deployment:
vercel link
vercel --prod.vercelignore keeps local credentials and Git metadata out of deployments while including the prepared assets.
For other static hosts, prepare the assets locally before publishing the project directory.
Original application code is released under the MIT license. See third-party notices for bundled libraries and reference assets.
Apple models and imagery are excluded from the repository and the MIT license. The preparation script links to their original sources; their use is subject to Apple's terms. This project is an independent animation study.