Loading model...

3D Renderer — Quick Guide

Loading content

Open Screen Content in the panel on the right:

  • Upload Image — load a PNG or JPG onto the device screen
  • Upload Video — load an MP4 or WebM that plays on the device

For the iPhone, load a mobile-width screenshot. For the MacBook, load a desktop-width screenshot.

Getting screenshots from alex.fi

Use Chrome DevTools to capture full-page PNGs at the correct size.

For the iPhone screen (mobile):

  1. Open the alex.fi page in Chrome
  2. Open DevTools — ⌘⌥IF12
  3. Click the Toggle device toolbar icon, or press ⌘⇧MCtrl+Shift+M
  4. Select iPhone 14 Pro from the device list (390 px wide)
  5. Open the command palette — ⌘⇧PCtrl+Shift+P
  6. Type Capture full size screenshot and press Enter
  7. Upload the downloaded PNG via Screen Content › Upload Image

For the MacBook screen (desktop):

  1. Open the alex.fi page in Chrome at full width (≥ 1280 px)
  2. Open the command palette — ⌘⇧PCtrl+Shift+P
  3. Type Capture full size screenshot and press Enter
  4. Upload the downloaded PNG via Screen Content › Upload Image

Always use "Capture full size screenshot" — not "Capture screenshot", which only captures the visible viewport.

Devices

Use the Device dropdown at the top of the panel to switch between iphone and macbook. The last uploaded image is remembered for each device.

Scrolling the image

Full-page screenshots are taller than the device screen. Use Screen Content › Y Offset to scroll the image up or down.

Hold Shift and scroll the mouse wheel for a quicker adjustment. Scroll Speed controls how fast the wheel scrolls.

Camera

  • Drag to orbit around the device
  • Scroll to zoom in and out
  • Hold Shift to scroll the image without zooming

Use Camera Presets for instant Front, Side, Top, or Isometric views.

Animation

Set up a motion sequence using the Animation folder:

  1. Position the device at your starting angle — click Set Start State
  2. Move to the end angle — click Set End State
  3. Optionally set a mid-point with Set Middle State
  4. Adjust Duration, FPS, and Easing
  5. Click Preview to play it back

Exporting

Use the Export folder to download your render:

  • Export Single PNG — still image of the current view
  • Export PNG Sequence — frame-by-frame ZIP, importable into Premiere, After Effects, or Keynote
  • Export Video (WebM) — animated clip for web use

Set Width px and Height px before exporting to control output resolution.