iPhoneFrameDisplay

Live examples of each capability. Click any phone to open the shared lightbox — every instance on this page joins one swipeable gallery.

View the source on GitHub

Default

The whole phone, no crop. zoom defaults to 1, and focus has no effect at that zoom.

<PhoneImage
  src="/screenshot.png"
  width={240}
/>

focus="top"

zoom={2} clips to roughly half the height, keeping the top of the screen in view.

<PhoneImage
  src="/screenshot.png"
  width={240}
  zoom={2}
  focus="top"
/>

focus="bottom"

The same crop, anchored to the bottom instead.

<PhoneImage
  src="/screenshot.png"
  width={240}
  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.

<PhoneImage src="..." width={240} zoom={3} focus="bottom" />
<PhoneImage src="..." width={240} zoom={5} focus="bottom" />

PhoneVideo

The same geometry for a screen recording. It loads lazily on scroll, showing a generated poster until then, and autoplays muted and looping.

<PhoneVideo
  src="/demo.mp4"
  width={240}
  zoom={2}
  focus="bottom"
/>

ProjectImageGrid

Lays several phones out side by side. Here one recording shown as two complementary crops.

<ProjectImageGrid>
  <PhoneVideo src="..." width={135} zoom={2} focus="top" />
  <PhoneVideo src="..." width={135} zoom={2} focus="bottom" />
</ProjectImageGrid>