How to make a mobile app promo video

To make a mobile app promo video, copy the App onboarding flow scene, ask Claude to put in your app's name, screens and words, and render it with npx hyperframes render. The phone, taps and screen changes are already animated.

App onboarding flow walks through an app inside a phone with visible taps and smooth screen changes, all drawn in HTML and CSS. Chat thread shows messages popping in, Search bar and results types a query and highlights your result, and Glassmorphism UI floats app screens in 3D space.

Because the screens are drawn in code, the text stays sharp at any size and you don't have to redo screenshots when the app changes. If you'd rather show the real app, Claude Code can place your screenshots inside the phone instead.

Scenes to start from

Step by step

  1. Open the App onboarding flow scene and copy it

    Open App onboarding flow in the Scenes Library and press Copy prompt. You get the prompt that made the scene; Copy code gives its HyperFrames code. Browsing is free, and free accounts can copy 2 scenes a day.

  2. Paste it into Claude or Claude Code

    Paste the prompt into claude.ai or the Claude app to see the scene build as a live preview. For an MP4 you need Claude Code: paste the prompt there, or set up the Scenes skill once (see Docs) and pull the scene into a folder.

    node ~/.claude/skills/scenes-library/pull.mjs app-onboarding my-app-promo

  3. Change the words in plain English

    Ask: "the app is Quill, a notes app. Screens: welcome, pick your topics, first note. Tagline: write first, organise never. Use #6D28D9".

  4. Check it and render the MP4

    HyperFrames renders the MP4 on your own computer, free, as often as you like. You need Node.js installed. Check first: it reports anything off-frame or broken.

    npx hyperframes check my-app-promo
npx hyperframes render my-app-promo

Questions

What size should an app promo video be?

1080x1920 (9:16) for Reels, TikTok and app store previews in portrait; 1920x1080 for websites and YouTube. App onboarding flow is 9:16.

Can I use real screenshots?

Yes, in Claude Code: add them to the scene folder and ask Claude to place them in the phone.

Is it free?

Browsing and previewing every scene is free, and free accounts copy 2 scenes a day. The render is free because HyperFrames makes the MP4 on your own computer, with no watermark on the video.

Do I need After Effects or a UI animator?

No. Scenes are HTML, CSS and JavaScript (HyperFrames code). Claude edits them from plain English and HyperFrames renders them to MP4. You never open a timeline.

More