Mobile app design & interactions

A movie app for a phone that folds open into a tablet. The closed phone browses posters and the open phone plays the film. I explored two ways to make the fold feel like one continuous screen.

Interaction design · SwiftUI · Concepts

The screen stays put while the cover swings away

Closed, the outer display shows a carousel of tall posters with their titles underneath. Each poster is a cutout of the film’s widescreen still, centered on its subject, so growing it reveals the rest of the same image.

When the hinge opens, the cover swings toward the viewer. The outer display draws its far side shorter and blurred to compensate, so the screen seems to stay in place while the cover moves out from under it.

On the inner display the closed screen stays in the right half up to 90°. Then the poster grows until it fills the display at 180° and the film starts. The clip pans to the right as it grows, so the small figure Joi points at is in frame when the phone is flat. This version has no tab bar on the closed screen.

First concept. The carousel browses, the phone opens on Blade Runner 2049 and the clip plays. It then closes and swipes back to the first poster. 23 seconds at 2560 × 1792.

The poster on the cover turns away with it

Here the poster on the cover is the front page of a leaflet. It moves with the display and gets no correction. The rest of the carousel is corrected instead, so it seems to stay in the plane of the inner display while the cover turns. The poster looks like it opens with the hinge and its neighbors stay where they were.

The film starts as soon as the hinge starts to open, so the motion is already visible on the front screen. From 40° the film grows toward full screen. The cover poster and the film inside can be different images.

Second concept. The carousel browses from Drive to Oppenheimer, Blade Runner and Dune, then returns to Blade Runner 2049 and opens. 10 seconds at 2560 × 1792.

Both concepts are one SwiftUI app

The app runs in the iPhone Duo simulator and draws every screen in the videos. Each outer and inner screen is a screenshot of the app at one hinge angle. The phone, the lighting and the camera are rendered in Blender, which changes none of the screen pixels.

The corrections assume one eye position. It sits four outer display widths in front of the closed phone and moves in front of the hinge from 90°. The Blender camera is there, so the videos show the effect from its best viewpoint. From other positions the corrected parts look skewed.

The navigation side of iPhone Duo is in Will iPhone Duo kill React Native?

The posters and the film clip belong to their studios. They appear here to show the concept.