Foldable UI Posture Studio

Simulate how iOS and Android responsive layouts adapt across physical fold angles, tabletop kicks, split multitasking, and hinge seam safe-zones.

Tabletop (Half-Fold 90°)

Interactive Fold Simulator

State: HALF_OPENED
Segments: 2 (Screen 1 & 2)
Fold Axis: Horizontal (X)
DUAL-PANE POSTURE SIMULATOR • LIVE VIEW
Tabletop mode active: Viewfinder anchored to top display; shutter and lens dials mapped to ergonomic base display.
W3C Foldable CSS Media Query
/* Calculated based on 90° Tabletop */
@media (horizontal-viewport-segments: 2) {
  .camera-layout {
    display: flex;
    flex-direction: column;
  }
  .viewfinder {
    height: env(viewport-segment-bottom 0 0);
  }
  .controls-deck {
    height: env(viewport-segment-height 0 1);
  }
}
SwiftUI / UIKit Posture Trigger
import SwiftUI

struct DuoAdaptiveView: View {
  @Environment(\.foldState) var foldState
  
  var body: some View {
    if foldState.hingeAngle == 90 {
      TabletopCameraLayout()
    } else {
      FlatExpandedLayout()
    }
  }
}

Ergonomic Tabletop Posture

When the hinge sits between 75° and 115°, the user places the bottom half on a flat surface like a laptop. Viewfinders and video streams rise to eye-level, leaving touch dials stable on the desk.

Hinge Crease Safe Zones

A physical fold display introduces a slight crease or dual bezel. Content spanning both displays must never position primary buttons or reading text directly across the spine.

Dual-Task Continuity

Foldables enable simultaneous app states: drag-and-drop between browser and notes, side-by-side video conferencing, or persistent playback scrubbing while chatting.

Foldable UI Design Principles & Guidelines

How does the operating system detect foldable postures?

Foldable devices utilize twin hall-effect sensors, gyroscopes, and high-precision hinge encoders. When hardware reports an angle between 0° and 360°, the OS Window Manager transitions window scenes between Flat (180°), Tabletop (80°-120°), Tent (260°-300°), and Cover-Screen (0°-10°).

What are the W3C CSS Viewport Segments specifications?

Standard CSS defines @media (horizontal-viewport-segments: 2) and @media (vertical-viewport-segments: 2) alongside environment variables like env(viewport-segment-width) and env(viewport-segment-height) to place components seamlessly on either side of the hinge seam.

Why is camera UI the ideal showcase for foldable software?

A standard smartphone requires a tripod for hands-free selfies, time-lapses, or video calls. A foldable folded at 90° functions as its own built-in tripod. Inverting the UI puts the active image preview on the upright screen and the controls within thumb reach on the flat base.

Enjoy this tool? Build your own with Super