Pro editor help

Where to click

Open `/app/pro` after signing in with Pro access.

Do this

1. Use Device when you need to add or choose the mockup hardware.
2. Use Layers when you need to select, hide, reorder, group, or ungroup objects.
3. Use Device animation, Camera, Blur, Scene, and Glare when you are designing motion and visual depth.
4. Use Media, Images, Audio, and Text when you are adding the real content that appears in the mockup.
5. Use the bottom timeline to control timing, then use Export when the whole preview is ready.

Common mistakes

• Do not animate everything at once. Start with the main device motion, then add camera and support layers.
• Do not guess which object is selected. Check Layers before changing transforms or keyframes.
• Do not use Images for device-screen recordings. Use Media for content that belongs inside a device screen.

If it still fails

If the project feels messy, hide secondary layers and make the main device readable first.

Where to click

Open Device in the left rail.

Do this

1. Choose the device type that matches the product you are showing: phone for mobile apps, MacBook or display for SaaS/websites, iPad for tablet flows, watch for watch UI, or screen-only when the frame should stay minimal.
2. Click a device card to add it to the scene or select it, depending on the editor state.
3. Use multiple devices only when each one explains a real part of the product story.
4. After adding more than one device, select the target device before opening Media or Device animation.
5. If a template already has devices, use Device together with Layers so you know which object you are editing.

Common mistakes

• Too many devices can make every screen too small.
• Do not mix mobile and desktop screens unless the product really has both experiences.
• Do not upload screen media before selecting the device that should receive it.

If it still fails

If media appears on the wrong device, select the correct device in Device or Media, then upload again.

Where to click

Open Layers in the left rail.

Do this

1. Click a layer to select the exact device, group, image, text layer, or system layer you want to edit.
2. Use visibility controls to hide objects temporarily while you work on a crowded scene.
3. Drag or reorder layers when front/back stacking matters for text, image layers, or overlapping devices.
4. Group devices when they should move together as one object, such as a phone pair sliding into frame.
5. Ungroup when each object needs its own animation, timing, or media.

Common mistakes

• Animating a group and the same device separately can create confusing motion.
• Layer order matters for text, images, and device visibility.
• A hidden layer can still exist in the project, so check visibility before assuming something was deleted.

If it still fails

If you cannot find what you selected, open Layers and use visibility toggles to isolate it.

Where to click

Open Device animation in the left rail.

Do this

1. Select the device or group you want to animate first. Layers is the safest place to confirm the selection.
2. Move the playhead to the first moment where the object should have a defined pose.
3. Adjust position, rotation, scale, and supported device controls such as laptop lid angle when available.
4. Press Animate to save the first keyframe for that pose.
5. Move the playhead later, change the pose, then add another keyframe.
6. Use transition presets and speed controls to decide how the object moves between keyframes.
7. Preview the whole timeline after every major motion change.

Common mistakes

• A custom animation needs at least two keyframes to create motion.
• Do not rotate a dense dashboard so far that the screen becomes unreadable.
• Do not add many small keyframes before the broad motion feels right.

If it still fails

If motion jumps unexpectedly, check keyframe order and transition type before adding more keyframes.

Where to click

Open Camera in the left rail.

Do this

1. Use camera controls when the whole scene should push in, pull back, pan, orbit, or reframe.
2. Adjust camera position to choose where the viewer is looking from.
3. Adjust target to choose what the camera is looking at.
4. Use field of view and zoom to control how close or wide the shot feels.
5. Press Animate to save camera keyframes at the current playhead time.
6. Use camera motion after the device animation already communicates the main idea.

Common mistakes

• Animating camera and device heavily at the same time can make the product hard to follow.
• Wide field-of-view values can distort devices if pushed too far.
• Camera motion can make text and UI smaller, so preview the export size before final render.

If it still fails

If the scene feels dizzy, keep the camera stable and animate the device instead.

Where to click

Open Blur in the left rail.

Do this

1. Set the focus point where the viewer should look first.
2. Adjust blur strength while keeping the product screen readable.
3. Use blur when background images, secondary devices, or support layers are distracting.
4. Press Animate to create blur keyframes when focus should change over time.
5. Preview moving sections, because blur can feel stronger during animation than on a still frame.

Common mistakes

• Blur should support attention, not hide the only proof of the product workflow.
• Strong blur can look different during motion than on a paused frame.
• Do not blur a screen recording that viewers need to read closely.

If it still fails

If the export feels soft, reduce blur and rely on composition or text for emphasis.

Where to click

Open Media in the left rail and select the target device.

Do this

1. Select the device whose screen should change.
2. Upload the screenshot, product image, or MP4 recording for that device.
3. Use fit and transform controls to crop, position, scale, or align the media inside the screen.
4. Trim start/end when a video has extra setup or dead time.
5. Use timeline offset or clip timing to decide when the media starts.
6. Use playback speed, loop, muted, freeze first frame, and freeze final frame to make the screen match the scene timing.
7. Use separate clips for different devices when each device needs different screen content.

Common mistakes

• Do not let several device videos compete unless the story needs simultaneous action.
• If a video starts too late, check both trim and timeline offset.
• Do not use the Images button for screen content. Images are floating layers outside the device screen.

If it still fails

If a clip is hard to sync, freeze the first frame until the device is readable, then start the important motion.

Where to click

Open Images in the left rail.

Do this

1. Upload an image asset that should sit in the scene outside the device screen.
2. Use image position, scale, rotation, and opacity to place it without covering the product.
3. Use layer order if the image needs to appear in front of or behind another object.
4. Animate the image only after the static placement looks right.
5. Use Images for logos, badges, product marks, arrows, or supporting graphics. Use Media for device-screen content.

Common mistakes

• Large logos or badges can make the mockup feel like an ad before the product is clear.
• Do not place image layers over important screen UI unless the point is to highlight that exact area.
• Avoid low-resolution assets when exporting 4K.

If it still fails

If the scene feels crowded, hide the image layer in Layers and decide whether the device works better on its own.

Where to click

Open Audio in the left rail.

Do this

1. Upload the audio track you want to use in the video.
2. Use trim and timing controls so the useful part of the audio starts with the important visual moment.
3. Adjust volume so music supports the product instead of overwhelming it.
4. Use loop only when the track can repeat cleanly.
5. Preview the edit muted as well, because the visual story should still make sense without sound.

Common mistakes

• Do not rely on audio to explain something that should be visually clear.
• Do not use audio you do not have rights to publish.
• Very loud music can make the export feel less professional even when the animation is good.

If it still fails

If export timing feels off, temporarily mute or remove audio, fix the visual timeline first, then add the track again.

Where to click

Open Text in the left rail.

Do this

1. Add a text layer for a short message, feature name, step label, or callout.
2. Edit the wording first, then choose font, size, color, alignment, background, and shadow.
3. Keep text outside the most important part of the device screen unless it is a deliberate callout.
4. Use attached text when the label should follow a device edge or object.
5. Animate text keyframes when the label should enter, move, fade, or change during the timeline.

Common mistakes

• Long sentences make product videos hard to scan.
• Text can become unreadable in mobile/social exports if it is too small.
• Do not animate text before its static placement and size work.

If it still fails

If text makes the composition feel busy, remove it and use the product screen plus motion to explain the idea.

Where to click

Open Scene in the left rail.

Do this

1. Use Color for minimal product shots.
2. Use Gradient or Pattern when the video needs brand energy.
3. Use Image for a branded or contextual background.
4. Enable Flat color when you need a clean unlit solid background without floor reflections.
5. Use background keyframes when the scene should change over time.
6. Check contrast against the device and uploaded media before exporting.

Common mistakes

• Busy image backgrounds can fight with screen recordings.
• Animated backgrounds should not distract from important UI motion.
• A background that matches the device color too closely can make the hardware disappear.

If it still fails

If the design feels noisy, return to a flat color and rebuild complexity slowly.

Where to click

Open Glare in the left rail.

Do this

1. Use glare to make glossy device screens feel more realistic.
2. Lower glare when it hides important UI text or product details.
3. Adjust lighting so the device shape reads clearly against the background.
4. Press Animate to save a glare or lighting keyframe.
5. Add another keyframe later when the highlight should move or change intensity.
6. Preview the full animation because glare can cross the screen during motion.

Common mistakes

• High glare can hide small product details.
• Lighting changes should be subtle unless they are part of the story.
• Do not judge glare on one still frame if the device or camera is moving.

If it still fails

If glare looks wrong in export, reduce intensity and check the full animation before rendering again.

Where to click

Use the timeline controls along the bottom of the Pro editor.

Do this

1. Scrub the playhead to inspect exact moments.
2. Use zoom when keyframes or media clips are too close together.
3. Use loop to preview a section repeatedly while tuning motion.
4. Set start and end ranges when the export should be longer or shorter than the visible keyframes.
5. Use auto spacing when adding first-pass keyframes quickly.
6. Use preview guides only for layout while editing; they do not appear in export renders.

Common mistakes

• Do not assume a layer is animated just because it exists on the timeline. It needs keyframes or media timing.
• Long empty ranges can make exports feel stuck or too slow.
• If a media clip starts at the wrong time, check the clip timing and the playhead position.

If it still fails

If timing feels confusing, reset to one main device animation and add other layer timing afterward.

Where to click

Click Screenshot in the Pro editor topbar or Export panel.

Do this

1. Move the playhead to the frame you want.
2. Check that preview guides are hidden if you do not want layout lines in the still.
3. Click Screenshot and wait for the PNG to save.

Common mistakes

• Do not capture while the scene is still loading.
• A screenshot is a still image; use Export for a video file.

If it still fails

If screenshot capture fails, try after a refresh or use Report bug with the device and browser details.

Where to click

Click Export in the topbar, then choose quality and background.

Do this

1. Use MP4 with Scene background for normal web, social, launch, and presentation videos.
2. Use transparent MOV when the device animation will be placed over another background in a video editor.
3. Choose HD for fast review exports and 4K for final assets.
4. Keep the export tab open until the file finishes saving.

Common mistakes

• Standard MP4 does not preserve transparent backgrounds in this workflow.
• Transparent MOV files are larger, so test a short version before rendering a long final export.

If it still fails

If export fails, shorten the timeline, use HD for a test, close heavy tabs, and retry in a desktop Chromium-based browser.

Where to click

Use Save in the editor and My Templates from the saved-project flow.

Do this

1. Save before leaving a complex timeline.
2. Use names that describe the campaign or format.
3. Open saved projects from My Templates and continue editing in the correct editor mode.
4. Use free marketplace templates as starting points when they fit the desired composition.

Common mistakes

• Do not rely only on browser state for important Pro work.
• Do not overwrite a useful project when you need a variant. Save a separate version instead.

If it still fails

If a project appears stuck on loading, refresh once, then report a bug with the project route.

Where to click

Use `/app/pro`, `/profile/`, and the Report bug button in the editor or export page.

Do this

1. After checkout, return to Pro and re-check access if the confirmation modal asks you to wait.
2. Use the profile billing portal for subscription management when available.
3. Use Report bug from the editor when something breaks so diagnostics are attached.
4. Email contact@buildwithdeni.com if you cannot reach the in-app report flow.

Common mistakes

• Checkout success alone does not grant Pro access. The trusted webhook must confirm it.
• Do not include card details, passwords, tokens, or private customer data in support messages.

If it still fails

If Pro access does not appear after checkout, wait a moment, refresh `/app/pro`, and include your account email when contacting support.