Product motion video (house style)

Produce short product films that look like a person annotating the real product on a warm notebook page: off-white paper with a faint dot grid, heavy black headlines that pop in word by word, pastel highlighter tags, pen marks that draw themselves around the thing that matters, the product's real UI inside device frames and desktop windows, a cursor that visibly clicks, and a quiet synthesised soundtrack whose clicks and chimes land on the frame.

Two formats:

• Promo: at most 40 s, sells one idea through a hook, a brand lockup, one proof per scene, an outcome and an end card.
• Tutorial: 50 to 120 s, teaches one task in numbered steps on real footage, no voice.

The style was extracted from three shipped Desquared films (a 40 s promo and two tutorials of 51 s and 57 s). Every number in this skill comes from their source code, not from taste.

Non-negotiables

1. Real product UI only. Render it from code or capture it clean (references/capture.md). Never a mock-up, a redraw or lorem ipsum. Every number on screen is computed from the product.
2. Everything is a function of time. Each frame is computed from t through a window and a named easing curve, so any still can be rendered on its own. Check stills before rendering the film.
3. One timing source for picture and sound. A sound is declared next to the picture it belongs to, in the same scene-local time, never typed a second time.
4. The film works muted. Captions carry the story; there is no voiceover by default.
5. Nothing paid by default. Music and effects are synthesised; fonts are open licence. Ask before adding any paid text-to-speech, stock music or render service.

The style in one screen

Full values and rationale: references/house-style.md (look), references/motion.md (motion, pacing, cursor), references/sound.md (sound).

Pipeline

Details, commands and the checklist: references/pipeline.md.

1. Brief. Audience, channel, promo or tutorial, the one sentence, three to six proof points, the real facts to show, brand inputs (exact name, icon, colour, call to action).
2. Storyboard. Fill the scene table from references/storyboard-promo.md (40 s, ten scenes) or references/storyboard-tutorial.md (title, steps from six patterns, end card). Check it against the pacing rules before any code.
3. Capture the real UI into assets/ at 3x (phones) or 2x (desktop, web), with clean status bars and fixture data. references/capture.md covers render-from-code, snapshot tests, headless browsers and simulators.
4. Build scenes. One Scene per storyboard row, built from the kit's pieces, with its sound cues in the same place.
5. Stills QA. Render the settled state and every click of every scene as PNGs and look at each at full size. Repeat until each would pass as a poster.
6. Render the silent film: frames piped into ffmpeg -f rawvideo -pix_fmt bgra -s 1920x1080 -r 30 -i - -c:v libx264 -preset slow -crf 14 -pix_fmt yuv420p -movflags +faststart.
7. Audio. Synthesise the WAV from the same cue list (16-bit, 44.1 kHz, stereo).
8. Mux without re-encoding video: -c:v copy -c:a aac -b:a 192k -shortest -movflags +faststart.
9. Final QA with a one-frame-a-second contact sheet and the checklist: legibility, no placeholder text, real captures, true numbers, brand spelled right, working call to action, loudness, muted comprehension, ffprobe specs.
10. Deliver the 1080p master, a poster frame, a lighter web copy, and a re-laid-out square or vertical cut if social needs one (never a crop of the 16:9 film).

Starter kit

assets/starter-kit/ is a small Compose Desktop project (Kotlin 2.4, Compose Multiplatform 1.11, JDK 17+, Gradle 8.10+, ffmpeg with libx264) holding the reusable pieces: palette and type, easing, doodles, cursor, captions, device and window frames, the footage camera, tutorial cards, the scene timeline with sound cues, the synthesiser, the frame pump and the capture helper. It needs no product classpath: product UI comes in as PNGs or as composables you add as a dependency. Its example film (23 s) renders with gradle run --args="all" in about 15 s.

Copy the folder out, replace the placeholder constants and the stand-in product, and write your scenes. Read its README.md for the file map.

Not on Kotlin? references/other-stacks.md maps every rule to Remotion and Motion Canvas.

Traps

• Guessed coordinates. Doodles and the cursor that aim at hand-typed positions drift the first time copy or layout changes. Aim at measured positions (the kit's Marks) or footage fractions. Measured positions come from layout, so render each frame twice (the kit does).
• Soft footage. A camera push at 2.6x on a 1x capture is mush. Capture wide enough: source px at least displayed px times the maximum zoom.
• A spinner in a capture. Async images need a second render after the loader warms up.
• Default easing. Library "ease" presets are not these curves. Name the curve every time.
• Two timelines. Sound times typed separately from picture times drift on the first edit.
• Rushing. Shortening every scene to fit more proofs makes the film unreadable. Cut a scene.
• Fonts. SF Pro and New York look right on a Mac but are licensed for Apple-platform UI mock-ups; published films use the open-licence set unless the licence is cleared.
• A crop for vertical. The grid puts captions beside the product; cropping loses one of them.

Bundled files