App Store and Google Play preview videos, made in code

Short answer: for the App Store, render a 15–30 second screen capture of the app at 886×1920 (iPhone) or 1200×1600 (iPad), 30fps max, with text overlays — Apple does not allow device frames or footage that is not the app. For Google Play, upload to YouTube (ads off) and link it; any orientation works, and only the first 30 seconds autoplay. One Remotion composition can render both.

Every number below is quoted from Apple's and Google's own pages as of September 2026. Check them again before you upload — both change.

Apple's specs

From App Store Connect's app preview specifications:

What Apple allows on screen

This is the rule that decides the design. App Review Guideline 2.3.4:

previews may only use video screen captures of the app itself. […] You can add narration and video or textual overlays to help explain anything that isn't clear from the video alone.

So: no phone mockup, no lifestyle footage, no logo animation that is not in the app. A full-frame capture of the app, with text on top. What you can control is the camera and the words.

Google Play's requirements

From Play Console Help: use a YouTube video URL (not a playlist or channel), turn ads off, and don't age-restrict it. Landscape and portrait are both supported. Only the first 30 seconds autoplay, and Google advises that at least 80% of the video should show the actual user experience.

Because it is a YouTube video rather than an App Store upload, Google Play is where a device-frame hero shot can go — see below.

The App Store composition

A capture from the simulator or a device, cropped to fit, with a camera that pushes in on each feature. Screen Recording does the crop and the camera; the camera only moves your app's pixels, so it stays inside 2.3.4:

import { AbsoluteFill, Composition, Sequence } from "remotion";
import { ScreenRecording } from "@/components/snap-cn/screen-recording";

const Caption = ({ text }: { text: string }) => (
  <AbsoluteFill style={{ justifyContent: "flex-start", paddingTop: 140 }}>
    <h2 style={{ fontSize: 64, fontWeight: 700, textAlign: "center", color: "white" }}>
      {text}
    </h2>
  </AbsoluteFill>
);

const AppPreview = () => (
  <AbsoluteFill style={{ background: "black" }}>
    <ScreenRecording
      src="/recordings/app-capture.mp4"
      camera={[
        { at: 90, duration: 25, zoom: 1.4, x: 0.5, y: 0.35 },
        { at: 300, duration: 25, zoom: 1 },
      ]}
    />
    <Sequence durationInFrames={150}>
      <Caption text="Split any bill in seconds" />
    </Sequence>
    <Sequence from={150} durationInFrames={150}>
      <Caption text="Everyone pays their share" />
    </Sequence>
  </AbsoluteFill>
);

export const RemotionRoot = () => (
  <Composition
    id="AppPreview"
    component={AppPreview}
    durationInFrames={600} // 20s at 30fps — inside Apple's 15–30s
    fps={30}
    width={886}
    height={1920}
  />
);

npx remotion render AppPreview out/app-preview-iphone.mp4

For iPad, register a second <Composition> at 1200×1600 with the iPad capture. Same components, different width, height and src.

If your capture already matches 886×1920 there is nothing to crop. If it is a different aspect, give Screen Recording sourceAspect (width ÷ height of the file) so the crop and fit are exact.

The Google Play video: here a device frame fits

On YouTube you are not bound by 2.3.4, so the opening shot can be the app inside a phone. Phone Frame takes the same capture as screenSrc and brings the device in with a crane move:

import { staticFile } from "remotion";
import { PhoneFrame } from "@/components/snap-cn/phone-frame";

export const PlayHero = () => (
  <PhoneFrame
    variant="showcase"
    entrance="float"
    scale={0.9}
    screenSrc={staticFile("recordings/app-capture.mp4")}
  />
);

Open on that for a few seconds, then cut to the full-frame capture — Google's guidance is that most of the video should be the real experience.

Install

npx shadcn@latest add @snapcn/screen-recording @snapcn/phone-frame

More on devices in how to add an iPhone mockup to a Remotion video.

Next: product tour and onboarding videos in React.

FAQ