Direct answer
The method in one paragraph
Capture your real product UI at 2x or 3x resolution using Screen Studio or CleanShot. Composite those recordings in Remotion (a React-based code motion framework) with kinetic typography — animated text claims — timed precisely to a music bed. Optionally layer 1–2 AI atmosphere clips (Kling, Seedance) as background depth behind the product. Export as MP4. The result looks like a keynote slide, not a screen recording, because the motion is designed in code rather than improvised in a timeline editor.
The critical constraint: never use AI to generate your product UI or on-screen text. Current AI video tools (Kling, Seedance, Veo, as of July 2026) cannot render legible interface text. All product UI must come from your real captured interface.
Step by step
The production process
Capture real product UI at 2x or 3x resolution
Use Screen Studio or CleanShot at 200% or 300% zoom on a retina display. 1x resolution looks blurry on retina screens and immediately reads as a rough demo. Capture individual flows — the key interaction, the output, the before-and-after — in short clips of 5–15 seconds each, not one long recording. Short, specific captures are easier to composite than a single long walkthrough.
Write a one-sentence brief before you open any editor
Write: "This video shows [what the product does] for [who] so that they [the one action]." If you cannot finish this sentence cleanly, the video is not ready to make yet. The sentence becomes the editorial test: every clip you include either supports it or does not belong. The most common production failure is starting to edit before the point of the video is clear.
Build kinetic typography and UI compositing in Remotion
Remotion is a React-based framework for code-generated video. Build your animated text claims (kinetic typography), composite your captured UI recordings into the composition, and control all timing with code. This is the step that makes the video look motion-designed rather than edited. The output is a rendered MP4 or a frame sequence. Every text element is perfectly legible because it is rendered as code, not generated by an AI.
Add 1–2 AI atmosphere clips as background depth (optional)
For visual richness, generate 1–2 atmospheric clips using Kling 3.0 or Seedance 2.0 i2v. Use them as background plates — abstract environments, soft light, depth — not as the main content. AI atmosphere behind real captured UI is what creates cinematic depth without a film crew. Keep them subtle. They should make the product feel premium, not pull focus from it.
Design for silence-first viewing
Add a music bed without lyrics. Use on-screen kinetic text to carry every claim so the video makes sense without audio. Most launch videos on X and LinkedIn are watched on the first pass without sound. If the video requires audio to make sense, it will fail silently in most distribution contexts.
Keep it 15–45 seconds for a launch film
A launch film for a feed post should be 15–45 seconds. A product demo for the product page can run 60–90 seconds. Do not combine these: a 90-second walkthrough posted as a launch tweet will have a low completion rate. Make a short version for the launch moment; a longer version for the product page.
Tool stack
What you need
UI capture
Screen Studio
2x/3x resolution, clean cursor, one-click export. Mac only.
UI capture (alternative)
CleanShot X
200% zoom capture, annotation, Mac. Windows alternative: ShareX.
Motion graphics
Remotion
React-based code video. Kinetic text, UI compositing, precise timing.
AI atmosphere (optional)
Kling 3.0 / Seedance 2.0
Background depth clips only. Never for UI or on-screen text.
Audio (optional)
ElevenLabs
Voiceover if needed. Musicbed.com or Artlist for music beds.
Simpler alternative
CapCut / DaVinci Resolve
Timeline editor for captured recordings without the code motion layer.
Kino — Premium launch video for funded SaaS marketing teams
Want this done for you? 72-hour turnaround.
Send a brief — what is launching, what it does, a reference or two. Kino handles the capture, the Remotion build, the audio. Delivered async with no calls or meetings. From £900 for a one-off launch film.
Frequently asked questions
Production questions answered
The method is hybrid production: capture real product UI at 2x or 3x resolution using Screen Studio or CleanShot, composite it in code using Remotion with kinetic typography, and optionally add 1–2 AI atmosphere clips (Kling, Seedance) as background depth. No film crew, studio, or camera required. The key rule: AI video cannot produce legible UI text — all on-screen product content must be built in code.
Screen Studio or CleanShot (UI capture at 2x/3x resolution), Remotion (code-based motion graphics and compositing), optionally Kling or Seedance (AI atmospheric b-roll), and optionally ElevenLabs (voiceover). For a simpler result without the code motion layer: CapCut or DaVinci Resolve can edit captured recordings at the cost of looking less motion-designed.
AI can generate atmospheric background clips but cannot render your real product UI legibly. AI-generated text and interfaces are hallucinated — blurry, garbled, or invented. Use AI for background atmosphere only, and use code (Remotion) for everything that needs to be legible on screen.
Remotion is a React-based framework for generating videos from code. For SaaS product demos, it produces kinetic typography with frame-precise timing, composites captured product UI recordings, and renders everything as a clean MP4. The result looks motion-designed, not timeline-edited — because the motion is written as code, not dragged in a clip editor.