Page on Mobile renders website screenshots into device mockups (desktop, notebook, tablet, phone) on a <canvas> and auto-scrolls each screenshot so you can preview how a page looks across devices.

🌐 Live on GitHub Pages: exphoenee.github.io/pageonmobile

1. Install

npm install pageonmobile

2. Add a container

<div id="myPreview" style="width: 900px; aspect-ratio: 16/15"></div>

3. Create a preview

import { Preview } from 'pageonmobile';
import 'pageonmobile/style.css';

const preview = new Preview({
  containerId: 'myPreview',        // id of the element above
  direction: 'right',             // 'left' | 'right' | 'none'
  scrollSpeed: 300,               // pixels per second
  deviceFolder: '/device-frames/', // where the frame .webp files are hosted
  screenImage: {
    desktop:  '/shots/home.webp',  // YOUR screenshots — any URL
    notebook: '/shots/home.webp',
    tablet:   '/shots/home-tablet.webp',
    phone:    '/shots/home-mobile.webp',
  },
});

Only the devices you list in screenImage are rendered — the layout adapts to whichever subset is present. The four device frames ship with the package in node_modules/pageonmobile/media/device/; copy them to a public URL and point deviceFolder at it.

4. Control it at runtime

preview.pause();                       // pause all devices
preview.setScreenshot('/shots/pricing.webp', 'phone');
preview.destroy();                     // stop & clean up

Interaction

• Hover a device to bring it forward and slow the scroll.
• Click a device to pause / resume its scroll.

Options