How to make an assistant app launch video

Build a complete launch film for Aster, a fictional assistant app. The finished composition introduces a new identity, demonstrates a school-email summary, carries a pet photograph through a mobile caption request, and introduces a more capable edition. It runs for 2,212 frames at 30000/1001 frames per second: 73.807 seconds at 1920 × 1080.

Inspired by: Google’s Gemini launch film. This tutorial studies its sequence, typography, changes of scale, and transitions. Aster, Muse, Robin, Pip, Maple Grove School, and the example interface are fictional. The downloadable project uses a native pointed flare, a four-color A monogram, and distinct editable app symbols. One pet photograph is a 448 × 286 crop from frame 1348 of the reference film; it restores the photographic texture used in this study and is credited in the project’s asset record. The camera, phone, desktop, text, and controls are rebuilt in React and SVG. No source video or soundtrack is included.

The worked project is silent. Follow the same production order when you adapt it: decide the sequence of ideas, build and review the visuals, then write any narration to those visuals. Add audio only after the important visual landings are stable.

The full film and the first three lesson sections are public. The complete lesson and editable source project are included in your one-time purchase of the 20cuts Creation System.

What you will make

The film begins with short phrases whose motion explains their meaning. Letters experiment, selected text gets written, scattered letters resolve a problem, and a cloud of ideas becomes one clear phrase. A page turns to reveal a product announcement. Muse becomes Aster. The identity leads into desktop UI, then one specific piece of work establishes what the app does.

The second half follows a phone through a complete example. Pip’s photograph appears in a camera, becomes an attachment, becomes a prompt thumbnail, and stays visible above the caption response. A product-menu symbol then becomes the entrance to Aster Advanced. Four capability cards accumulate before the film closes on the desktop and mobile product together.

You will learn to separate camera movement from changes inside a surface, time words at exact frames, preserve one piece of content across interface states, build a particle-to-type transition, and inspect failures that a contact sheet can conceal.

Download and run the example

Download and unzip the Aster project attached to this lesson. You need a computer with Node.js 22 or later, npm, and enough free space for the installed packages and rendered video. The project includes React 19.2 and Remotion 4.0.488. You do not need an API key, a paid image service, or access to our production repository.

Open a terminal in the unzipped project folder and run:

npm install
npm run check
npm run dev

The first command installs the project’s dependencies. The second checks its TypeScript source. The third opens Remotion Studio. Select AsterLaunch, move the playhead to frame 0, and play the film once without pausing. Then render the complete MP4:

npm run render

The package’s render script writes the full silent film to its out folder. Keep the terminal open until encoding completes. A browser preview that works does not prove that the whole film can render; the complete export checks every frame.

The source files are organized around responsibilities:

Make a copy of the download before editing. Render the untouched project once. You now have a known starting point and a finished file to compare against your changes.

Read the full beat map before changing the film

Frame numbers below are zero-based and inclusive. The time shown is the start frame divided by 30000/1001. Adjacent rows account for every frame once; individual objects may begin or end on either side of a descriptive boundary. That overlap is intentional.