Images & Video
Media comes in two flavors: positioned elements you place and size freely, and background elements that fill their entire block. Picking the right one upfront saves fiddling later.
#Image vs Background Image
A background image (or background video) always fills its block edge to edge, sits behind every other element in it, and has no position or size controls - just fit, blur, and a few effects. Use it whenever the media is the backdrop for text or other content.
A regular image or video element is positioned content: it has X/Y, width and height, scale, rotation, borders, shadows, masks, and animations. Use it for product shots, logos, photos in a collage - anything that is itself the content.
#Adding Media
- Select a block and use "Add Image" (I), "Add Video", "Add Background Image", or "Add Background Video" from its toolbar.
- Drag an image or video file onto an empty grid cell - PaneFlow creates a block with the media already placed.
- In the media settings you can upload a file, paste a URL, or pick from your asset library. Images can also be generated and edited with AI right in the sidebar.
#Fitting and Position
Every media element has a fit mode: "Cover" fills the frame and crops the overflow, "Contain" fits the whole asset inside with no cropping. The position selector next to it decides which part stays visible when cover crops (keep the top of a portrait, the left of a wide screenshot, and so on).
#Sizing
Sizing follows the shared model from Elements Overview, with one habit worth forming: set the width and leave height on "Auto". The height follows the asset's natural aspect ratio - no distortion, no math. Set an explicit height only when you want a specific frame for cover-cropping into.
When a block is reused at different sizes across panes, images sized with "Relative (%)" rescale with it automatically. To resize an image on just one pane, use its Scale on that pane - it animates during the transition.
#Video Settings
Videos add a "Loop Video" toggle and the same fit and position controls. Uploaded videos play automatically, muted - that is what browsers require for autoplay, and PaneFlow handles the attributes for you. Embedded videos (a YouTube link instead of a file) render as the platform's player, so PaneFlow's fit and loop controls do not apply to them.
#Recipe: Zoom and Pan
A still photo gains a lot of life from a slow push-in across panes:
- Add the image with "Cover" fit, filling its block.
- On the next pane (same block, reused), raise the image's Scale to 1.1-1.3 and nudge its X/Y to drift toward the subject.
- Navigate - the image zooms and pans smoothly during the transition.
#Next
- AI Features - generate and edit images in place
- Elements Overview - the shared controls
- Shapes - scrims and frames to pair with photos
