Skip to main content

How do 3D tilt, auto-scroll, and landscape mode work in the Device Mockup widget?

Control motion inside the frame and orientation for phone and tablet using the Appearance tab interaction options.

Written by Karan Bhakuni

How do 3D tilt, auto-scroll, and landscape mode work in the Device Mockup widget?

Open Appearance. You will see Style (colors) and Interaction (motion and orientation). This article focuses on Interaction.

3D Tilt Effect

  • On: The device can respond with a subtle tilt-style interaction (layout-dependent).

  • Off: The frame stays steadier—useful if you want a calmer look or less motion.

Auto-Scroll on Hover

This setting changes how “tall” content behaves inside the screen when hover is available (typically desktop-style previews).

  • For images (Link or Upload): long screenshots may use a vertical motion-style treatment so the mockup feels alive instead of showing only the top crop.

  • For Website: behavior depends on whether the page can be embedded and scrolled from the parent. Some embedded pages cannot be scrolled programmatically because of cross-origin browser rules—this is expected when the site does not cooperate.

If you want the simplest, most predictable Website behavior, try turning Auto-Scroll on Hover off and evaluate the result for your specific URL.

[Screenshot: arrow to Auto-Scroll on Hover]

Phone / Tablet Landscape View

  • This option appears when the device type is Phone or Tablet.

  • On: The mockup uses landscape orientation for the screen area.

  • Off: It uses portrait.

Laptop and Browser device types do not use this phone/tablet landscape toggle.

[Screenshot: arrow to Phone Landscape View or Tablet Landscape View with Phone or Tablet selected in Content]

Practical tips

  • If motion feels distracting for your brand, turn off 3D Tilt Effect and Auto-Scroll on Hover.

  • If a screenshot looks “cut off,” confirm orientation (Landscape View) matches how you captured the image.

  • For marketing pages where hover does not exist (many mobile visitors), treat motion as an enhancement, not the main message.

Did this answer your question?