I needed an easy to use and customizable tool to show my mobile design work in my Next.js portfolio. It works really well and can be cropped in almost any size, as well as displays full screen in a light box when selected.
(Click any iPhone Display 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 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>