How to make a collaboration app launch video

Clasp is a fictional collaboration app. This lesson takes its complete 71.217-second film apart into a working plan: animated type establishes a promise, a word becomes a movable object, a summary interaction provides evidence, and people move from a call into a conversation. You will edit those mechanisms and render the full 1920 × 1080 example at 60 fps.

Inspired by Slack's A New Day for Work, this adaptation keeps the reference's sequence, overlapping motion and alternation between abstract graphics and product demonstrations. Clasp has a different name, slightly shifted saturated palette, compact three-bar mark and product copy. The browser, people and messages are original vector drawings for a fictional product. There is no source video, source screenshot, recorded conversation or source audio in the composition.

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.

Open the source and establish a baseline

Download this lesson's source project, unzip it and open a terminal in that folder. You need Node.js with npm, an editor and space for the rendered MP4. Follow the Node version specified in the download's README. The project is standalone and does not require the private 20cuts repository.

npm install
npm run check
npm run dev

Select CommonroomLaunch. The composition has 4,273 delivery frames. Before editing, scrub to output frames 1470, 2075 and 2758. These show the lifted “noise” capsule, the summary panel and the call participants becoming conversation authors.

Render the baseline with:

npm run render

The source is in src/videos/tutorial-commonroom/. entry.tsx registers the composition. Video.tsx contains the vector primitives, scene functions, clock mapping and audit. source-times.ts is a numeric timing table. It contains no pictures or audio; it preserves the measured reference timing at a 60 fps delivery rate. Manrope is the only binary visual dependency. Its unmodified variable font, public/assets/tutorial-commonroom/manrope.ttf, and MANROPE-OFL.txt license are included. Manrope retains the rounded display character of the accepted study without redistributing its commercial font. The on-screen product is Clasp; the stable composition ID remains CommonroomLaunch.

Build a narrative that alternates promise and proof

The opening wall repeats “Good work, together,” then gives way to Clasp's mark. The film moves into a stylized conversation, widens to categories such as Knowledge and Automation, and follows one message author into a field of people. This makes the product feel connected to a group before the film asks the viewer to consider individual capabilities.

The central phrase, “Help take the noise out of work,” becomes an action. The word “noise” lifts away from the sentence and falls off screen. A crowded field of colored pieces clears. Five remaining dots gather into a wipe that reveals a summary interaction. The claim is followed by an example of what reducing noise could look like.

After a brief brand return, a call becomes a channel conversation. Ribbons introduce Clasp Projects, and a sequence of verbs—Connect, Share, Find and Organize—uses the same geometric vocabulary. The closing orbital movement gathers that vocabulary into the final promise and identity.

The film has 37 measured beats. The complete table below uses half-open source-cue ranges and presentation times, rounded to milliseconds. These cue numbers describe the measured reference pictures; they are not the studio's 60 fps output-frame numbers. The last end time includes the short final hold required to fill the delivery frame.

Map the clock before changing a cue

The studied reference has 4,268 decoded pictures with presentation timestamps. Dividing its cue number by 60 would introduce drift. Video.tsx instead asks for the latest source timestamp at or before each delivery frame's time. This is the complete lookup:

function sourceFrame(t: number) {
  let lo = 0,
    hi = SOURCE_TIMES.length - 1;
  while (lo < hi) {
    const mid = Math.ceil((lo + hi) / 2);
    if (SOURCE_TIMES[mid] <= t) lo = mid;
    else hi = mid - 1;
  }
  return lo;
}

The composition calls it with:

const frame = useCurrentFrame();
const f = sourceFrame(frame / COMMONROOM_FPS);

Every scene receives this shared f. To find the first delivery frame that reaches source cue n, use Math.ceil(SOURCE_TIMES[n] * 60). To find its exact presentation time, read SOURCE_TIMES[n]. Do not change the timing table to slow one action; change that action's cue window in Video.tsx.

The p helper clamps a cue window to progress between 0 and 1. It accepts an easing function, so separate objects can use the same clock with different timing. The film uses Easing.bezier(0.65, 0, 0.25, 1) for its smooth moves and Easing.bezier(0.16, 1, 0.3, 1) for the faster-starting out moves.

FILM_AUDIT() checks the timing table's 4,268 entries, strictly increasing timestamps, the 4,273-frame delivery duration, every mapped frame's range and inclusion of the last source picture. Those checks preserve the established edit while you alter the drawing or copy.