3D Models

3D models put real depth into a slideshow: device mockups with your screenshots on their screens, browser frames around your product, and geometric shapes for abstract backdrops. They render with CSS 3D, so they work everywhere your slideshow does - including exports.

#Adding a Model

Select a block and click "Add 3D Model", then pick a model. Two families:

• Devices and mockups - iPhone 17 Pro and Air, iPad, MacBook Pro, Studio Display, Samsung S25 Ultra (each in portrait and landscape where it applies), light and dark browser windows, and flat 16:9 / 16:10 planes for frameless screenshots.
• Geometry - cube, capsule, torus, cone, cylinder, pyramid. These take a "3D Model Color" instead of screen content and work well as depth accents behind text.

Swap the model anytime from the sidebar - your screen content carries over.

#Screen Content

For devices, choose "Image" or "Video" screen content and add the asset, exactly like a media element (AI generation included). Alongside it:

• "Screen Fit" - cover or contain for how the asset fills the screen.
• "Glossy Screen" - realistic screen reflections, on by default.
• "Screen Cutout" - hides the device body and shows only the screen shape. Useful when you want the screen's silhouette without the hardware.
• Browser URL - browser frames show an address bar; type whatever URL should appear in it.
• "Loop Video" - for video screens.

The screen content is part of the model's shared content: one screen, the same on every pane the block appears on.

#Positioning in 3D

Besides the usual X/Y/Scale, 3D models get a "3D Pan / 3D Rotate" group: "Rotate X", "Rotate Y", "Rotate Z", "Pan X", "Pan Y", and "Distance" (camera distance - the perspective intensity).

These are per-pane values, and that is the fun part: give the MacBook a three-quarter angle on pane one and face-on on pane two, and PaneFlow smoothly rotates it in 3D during the transition. No animation setup needed - just set each pane's angle and navigate.

The MacBook also has a lid: the lid toggle in the sidebar sets it open or closed per pane, so the laptop can open itself as the viewer arrives at a pane.

#3D Animations

In the "Animation" group, 3D models offer Rotate X and Rotate Y - entrance spins around the respective axis settling into your configured angle - and Laptop Lid (MacBook only), which plays the lid opening when the pane becomes active.

#Next

• Transitions & Morphing - per-pane values and how they animate
• Element Animations - entrance timing and delays
• Images & Video - preparing the screen content