⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.
This simulation provides an interactive environment for learning how real mobile apps lay out their screens. Rather than a static mockup, it runs a small constraint-layout engine — the same fixed / intrinsic / flexible model behind iOS Auto Layout, Android ConstraintLayout and CSS Flexbox — against a header, a 16:9 hero image, a title, a flexible body of text and a primary button. Drag the device-width and device-height sliders to move between an iPhone SE-class screen and a Pro-Max-class screen, change the margin and accessibility text-scale, and toggle the safe-area notch to see the solver redistribute space in real time on a 3D phone mockup, reporting the resulting body height, remaining slack, visible line count and whether the layout still fits or would need to scroll.