screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile video creation flow examples

Search the library

Filmit AI: AI Cinematic Video: Creating a Video from a Photo

Open recorded flow

  1. Step 1 · 1:36

    Filmit AI: AI Cinematic Video: Top navigation bar, large photo upload area, script text input area with controls, prompt ideas section, and a bottom primary action button.See the flow
    Filmit AI: AI Cinematic Video

    Top navigation bar, large photo upload area, script text input area with controls, prompt ideas section, and a bottom primary action button.

  2. Step 2 · 1:38

    Filmit AI: AI Cinematic Video: A centered system permission modal overlaying a dark-themed editor screen with a top navigation bar and a bottom action button.See the flow
    Filmit AI: AI Cinematic Video

    A centered system permission modal overlaying a dark-themed editor screen with a top navigation bar and a bottom action button.

  3. Step 3 · 1:40

    Filmit AI: AI Cinematic Video: Top navigation bar followed by a dense grid of square image thumbnails.See the flow
    Filmit AI: AI Cinematic Video

    Top navigation bar followed by a dense grid of square image thumbnails.

  4. Step 4 · 2:02

    Filmit AI: AI Cinematic Video: Top navigation bar, image preview area, script input field, and a bottom modal overlay for cinematic controls.See the flow
    Filmit AI: AI Cinematic Video

    Top navigation bar, image preview area, script input field, and a bottom modal overlay for cinematic controls.

  5. Step 5 · 2:08

    Filmit AI: AI Cinematic Video: Top navigation bar, image preview area, script input section, and a bottom modal overlay for cinematic controls.See the flow
    Filmit AI: AI Cinematic Video

    Top navigation bar, image preview area, script input section, and a bottom modal overlay for cinematic controls.

  6. Step 6 · 2:19

    Filmit AI: AI Cinematic Video: Top navigation bar, followed by a controls card, a prompt ideas carousel, a model selection list, a settings bar, and a bottom primary CTA button.See the flow
    Filmit AI: AI Cinematic Video

    Top navigation bar, followed by a controls card, a prompt ideas carousel, a model selection list, a settings bar, and a bottom primary CTA button.

  7. Step 7 · 2:25

    Filmit AI: AI Cinematic Video: Top navigation bar, followed by control buttons, a horizontal prompt ideas carousel, a model selection dropdown, and a detailed generation settings card with a bottom CTA button.See the flow
    Filmit AI: AI Cinematic Video

    Top navigation bar, followed by control buttons, a horizontal prompt ideas carousel, a model selection dropdown, and a detailed generation settings card with a bottom CTA button.

  8. Step 8 · 2:29

    Filmit AI: AI Cinematic Video: A centered modal dialog box appearing over a dark-themed background interface containing video generation controls.See the flow
    Filmit AI: AI Cinematic Video

    A centered modal dialog box appearing over a dark-themed background interface containing video generation controls.

invideo AI: AI Video Generator: Creating a Video

Open recorded flow

  1. Step 1 · 1:33

    invideo AI: AI Video Generator: Header with navigation, central chat input area, horizontal scrollable template buttons, bottom navigation bar.See the flow
    invideo AI: AI Video Generator

    Header with navigation, central chat input area, horizontal scrollable template buttons, bottom navigation bar.

  2. Step 2 · 1:56

    invideo AI: AI Video Generator: Header image followed by configuration dropdowns, text inputs, settings list, and bottom action buttons.See the flow
    invideo AI: AI Video Generator

    Header image followed by configuration dropdowns, text inputs, settings list, and bottom action buttons.

  3. Step 3 · 2:25

    invideo AI: AI Video Generator: Top video preview area followed by a modal overlay containing a list of selection options and bottom action buttons.See the flow
    invideo AI: AI Video Generator

    Top video preview area followed by a modal overlay containing a list of selection options and bottom action buttons.

  4. Step 4 · 2:40

    invideo AI: AI Video Generator: The screen consists of a background prompt configuration area and a centered modal overlay containing a list of voice options and bottom action buttons.See the flow
    invideo AI: AI Video Generator

    The screen consists of a background prompt configuration area and a centered modal overlay containing a list of voice options and bottom action buttons.

  5. Step 5 · 2:56

    invideo AI: AI Video Generator: The screen consists of a background form with input fields and a centered modal overlay containing a list of languages and bottom action buttons.See the flow
    invideo AI: AI Video Generator

    The screen consists of a background form with input fields and a centered modal overlay containing a list of languages and bottom action buttons.

  6. Step 6 · 3:00

    invideo AI: AI Video Generator: Top-down form with dropdowns, text inputs, and a settings list, ending with a dual-button footer.See the flow
    invideo AI: AI Video Generator

    Top-down form with dropdowns, text inputs, and a settings list, ending with a dual-button footer.

  7. Step 7 · 3:34

    invideo AI: AI Video Generator: Top navigation bar, followed by a user prompt bubble, a vertical list of status updates, and a bottom navigation bar.See the flow
    invideo AI: AI Video Generator

    Top navigation bar, followed by a user prompt bubble, a vertical list of status updates, and a bottom navigation bar.

  8. Step 8 · 3:36

    invideo AI: AI Video Generator: Header with navigation and profile, followed by a segmented control, three categorized selection sections, and a bottom-anchored primary action button.See the flow
    invideo AI: AI Video Generator

    Header with navigation and profile, followed by a segmented control, three categorized selection sections, and a bottom-anchored primary action button.

AI Song Generator: Mozart: Create a Music Video

Open recorded flow

  1. Step 1 · 8:13

    AI Song Generator: Mozart: Top header with logo and credits, hero video area, instructional text, central upload box, secondary info button, primary continue button, and bottom navigation bar.See the flow
    AI Song Generator: Mozart

    Top header with logo and credits, hero video area, instructional text, central upload box, secondary info button, primary continue button, and bottom navigation bar.

  2. Step 2 · 8:15

    AI Song Generator: Mozart: The screen consists of a blurred background view with a prominent bottom sheet overlay containing a title, two primary action buttons, and a grid of image thumbnails.See the flow
    AI Song Generator: Mozart

    The screen consists of a blurred background view with a prominent bottom sheet overlay containing a title, two primary action buttons, and a grid of image thumbnails.

  3. Step 3 · 8:18

    AI Song Generator: Mozart: Top navigation bar with segmented control, followed by a system privacy notice, a grid of photo thumbnails, and a bottom floating action bar.See the flow
    AI Song Generator: Mozart

    Top navigation bar with segmented control, followed by a system privacy notice, a grid of photo thumbnails, and a bottom floating action bar.

  4. Step 4 · 8:24

    AI Song Generator: Mozart: Top-left close button, centered instructional text, central oval frame overlay, bottom instructional text, and a bottom-center confirmation button.See the flow
    AI Song Generator: Mozart

    Top-left close button, centered instructional text, central oval frame overlay, bottom instructional text, and a bottom-center confirmation button.

  5. Step 5 · 8:27

    AI Song Generator: Mozart: Top header with credits, central hero image area with photo preview, bottom primary action button, and a persistent bottom navigation bar.See the flow
    AI Song Generator: Mozart

    Top header with credits, central hero image area with photo preview, bottom primary action button, and a persistent bottom navigation bar.

  6. Step 6 · 8:29

    AI Song Generator: Mozart: Top navigation bar, followed by a title, search input, upload button, and a scrollable list of song cards.See the flow
    AI Song Generator: Mozart

    Top navigation bar, followed by a title, search input, upload button, and a scrollable list of song cards.

  7. Step 7 · 8:34

    AI Song Generator: Mozart: Top navigation bar, segmented control, 'Your scenes' grid, 'Trending' carousel, 'Golden Hour' section, and a fixed bottom 'Continue' button.See the flow
    AI Song Generator: Mozart

    Top navigation bar, segmented control, 'Your scenes' grid, 'Trending' carousel, 'Golden Hour' section, and a fixed bottom 'Continue' button.

  8. Step 8 · 8:45

    AI Song Generator: Mozart: Top navigation bar with progress indicator, central image preview, row of aspect ratio selection buttons, and a large bottom primary action button.See the flow
    AI Song Generator: Mozart

    Top navigation bar with progress indicator, central image preview, row of aspect ratio selection buttons, and a large bottom primary action button.

  9. Step 9 · 8:50

    AI Song Generator: Mozart: Top navigation bar with progress indicator, central title, large hero image, duration selection controls, and bottom primary action button.See the flow
    AI Song Generator: Mozart

    Top navigation bar with progress indicator, central title, large hero image, duration selection controls, and bottom primary action button.

  10. Step 10 · 8:53

    AI Song Generator: Mozart: Top navigation bar followed by a background content area, with a large modal overlay containing a title and a grid of four pricing cards.See the flow
    AI Song Generator: Mozart

    Top navigation bar followed by a background content area, with a large modal overlay containing a title and a grid of four pricing cards.

Found an example you like?See the whole story.

See the full library See plans