Motion Gallery · Devices & Screens
Device Cycler
A device frame whose screen cycles through your images as view-mode states.
Example 1 · Entrance + auto-cycle
A laptop cycling its screens
Your images shown as screen states inside a laptop frame, cross-fading Automatically from one to the next. The device fades in on load. Click the screen to open the full image.
Example 2 · Phone
On a phone
The same auto-cycling screens in a phone frame — a tall, narrow 9:16 device (with a dynamic-island pill and a home indicator) for mobile mockups.
Example 3 · Tablet, slide up
On a tablet, sliding
A tablet frame with the Slide-up transition — each screen slides up into place instead of cross-fading.
Example 4 · Browser window
In a browser window
A browser-window frame (with a title bar and traffic-light dots) cycling widescreen screenshots — perfect for a web app.
Example 5 · No frame
Bare screens, no chrome
No device frame at all — just the cross-fading screens with rounded corners, at 4:3. Click the screen to open the full image.
Docs & Playground
Tweak every option live
Play with all of these settings in real time and read the full option reference in the manual.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.