A companion to iPhone Frame Display for the iPhone Duo. Unlike a single-screen phone, the Duo has five physical states - closed, closed at an angle, closed landscape, unfolded landscape, and unfolded portrait - so instead of picking a model you pick which state to composite into.
(Click any frame to view the Light Box)
If you'd like to run this handy little gadget in your project here is the repo:
Default
The whole frame, no crop. variant defaults to "cover-portrait" - the closed, outer display.
<DuoImage
src="/lock-screen.png"
width={200}
/>focus="top"
variant="inner-landscape" is the unfolded 7.6" display - both halves combined into one continuous screen. zoom={2} clips to roughly half the height, keeping the top in view.
<DuoImage
variant="inner-landscape"
src="/split-view.png"
width={280}
zoom={2}
focus="top"
/>focus="bottom"
The same crop, anchored to the bottom instead.
<DuoImage
variant="inner-landscape"
src="/split-view.png"
width={280}
zoom={2}
focus="bottom"
/>zoom
Higher zoom crops tighter. Rendered width grows on a sqrt curve so a closer crop still reads larger on the page, not smaller.
<DuoImage variant="inner-landscape" src="..." width={200} zoom={3} focus="bottom" />
<DuoImage variant="inner-landscape" src="..." width={200} zoom={5} focus="bottom" />variant
Unlike PhoneImage's model, the Duo's five frames aren't interchangeable alternates - they're the device's physical states, so variant picks orientation as much as it picks which display.
<DuoImage variant="cover-open" src="..." width={260} />
<DuoImage variant="cover-landscape" src="..." width={260} />
<DuoImage variant="inner-portrait" src="..." width={180} />ProjectImageGrid
Lays several frames out side by side. Here one screenshot shown as two complementary crops.
<ProjectImageGrid>
<DuoImage variant="inner-landscape" src="..." width={135} zoom={2} focus="top" />
<DuoImage variant="inner-landscape" src="..." width={135} zoom={2} focus="bottom" />
</ProjectImageGrid>