How to make a desktop launch video

Build a complete launch video for KeyStep, a fictional desktop launcher. The finished film moves through search, hotkey setup, clipboard history, emoji selection, dictation, and a focus assistant. It closes by turning those demonstrations into a product announcement. The composition contains 1,156 frames at 30 fps: 38.533 seconds at 1920 × 1080.

Inspired by: Raycast’s Coming 2026 film. This exercise studies its monochrome materials, extreme interface crops, carried objects, and announcement cadence. KeyStep is a fictional product with its own diagonal, segmented identity. Sprint and Forge are fictional integrations. Every visible surface, wallpaper, waveform, and mark in the project is editable React, SVG, or text. No reference footage, source screenshots, logos, or soundtrack are included.

The project is silent. Its sequence must communicate without narration. Build the visual sequence first; write and time any later narration to the finished actions.

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.

The task and the files you need

Your task is to make a desktop launch film that demonstrates a chain of related capabilities while retaining one material system. A search becomes a selected command. That command gets a hotkey. Clipboard content leads to a symbol picker. One symbol becomes a dictation control. Dictation leads into an assistant request, which produces tool activity. The feature labels at the end refer to things the viewer has already seen.

Download and unzip the KeyStep project attached to this lesson. You need Node.js 22 or later, npm, a terminal, and enough disk space for dependencies and video output. The package includes React 19.2 and Remotion 4.0.488. It has no API-key requirement or private-library dependency.

Run these commands from the unzipped folder:

npm install
npm run check
npm run dev

Choose KeyStepLaunch in Remotion Studio. Watch the full sequence, then render the untouched version:

npm run render

The MP4 is written to the project’s out folder. Keep that first export while you edit. Comparing against a known working cut makes it easier to identify whether a change affects the interface, camera, or timing.

The small file count is deliberate. The project is a complete worked example that you can inspect without learning a large framework. Keep the existing surface anatomy while learning the camera and timing mechanisms.

Follow the complete beat map

The table uses zero-based frame numbers with inclusive ends. In code, PASSAGES uses exclusive ends: the search passage ends at 170, and the hotkey passage starts at that same frame. Both describe the same boundary.

1. Separate materials from motion

Open materials.ts before changing the camera. The MATERIAL object contains the fills used by the wallpaper, glass, microphone, cells, and tool surfaces. A shared palette prevents one section from acquiring a different gray or edge treatment by accident.

Glass combines a translucent gradient, a visible rim, an inset highlight, and a background blur. The wallpaper behind it remains part of the image; it is not an empty black fill.

const Glass: React.FC<{
  children?: React.ReactNode;
  style?: React.CSSProperties;
}> = ({children, style}) => (
  <div
    style={{
      position: 'absolute',
      background: 'linear-gradient(125deg,rgba(80,80,82,.22),rgba(15,15,17,.63) 42%,rgba(72,72,75,.27))',
      border: '2px solid rgba(193,193,198,.28)',
      boxShadow: 'inset 0 2px 2px rgba(255,255,255,.08),0 18px 65px rgba(0,0,0,.26)',
      backdropFilter: 'blur(22px)',
      overflow: 'hidden',
      ...style,
    }}
  >
    {children}
  </div>
);

This component is already in Video.tsx; edit it there instead of creating a second glass style for another passage. Temporarily remove backdropFilter, inspect frame 145, then restore it. You should see the relationship between the panel and the background change while the outer geometry stays the same.

The metallic wallpaper is native SVG. Curved filled paths create its large blade, thin strokes define a rim, blurred ellipses create broad light, and a deterministic turbulence filter adds texture. Do not increase grain until it becomes a separate focal event. At the normal viewing size, it should help the material read rather than draw attention away from the UI.