mobile-device-frames

Wrap HTML prototypes in realistic device frames with navigation, responsive behavior, and safe areas. No build step required.

Device
Skin
URL
393px 852px 55px radius Dynamic Island

Explore

Getting Started
Add frame.css and frame.js to your project, wrap content in a data-device div, and you're done.
8 Device Frames
iPhone 16 Pro Max, iPhone 16 Pro, iPhone 16, iPhone SE, Galaxy S24 Ultra, Galaxy S24, Pixel 9 Pro, Pixel 9.
Responsive
On mobile screens (<500px), the frame goes fullscreen with a FAB navigation sheet. Desktop shows a sidebar.
Animations
Add data-animate to elements for staggered fade-in-up animations on page load.
Home
Search
Profile
All Devices

Each device rendered at actual dimensions with correct notch type