Alle Artikel

Transparente App-Videos — deine App auf jedem Hintergrund

Exportiere Gerätevideos mit echtem Alphakanal — ProRes 4444 für den Schnitt, WebM alpha fürs Web — und lege deine App über jeden Hintergrund.

Die meisten App-Videos kommen mit fest eingebranntem Hintergrund. Der Verlauf, der im Editor noch großartig aussah, beißt sich jetzt mit deiner Landingpage, kämpft gegen dein Folien-Template und sperrt dein Gerät in ein Rechteck. Ein Video mit wirklich transparentem Hintergrund kennt diese Probleme nicht: Das Gerät schwebt frei, und alles dahinter — deine Hero-Section, deine Keynote, dein Schnitt — bleibt sichtbar.

Es gibt allerdings einen Haken, und der ist groß: Echte Transparenz in Videos ist bekanntlich schwer zu bekommen. Die Encoder in Browsern transportieren schlicht keinen Alphakanal. Warum sich ein transparenter Export trotzdem lohnt, wo die Fallen lauern und wie dir Mockpose eine Datei mit echtem alpha liefert, ohne dass du den Browser verlässt — darum geht es in diesem Beitrag.

Ein Asset, jeder Hintergrund

Ein transparentes Gerätevideo ist das flexibelste Marketing-Asset überhaupt, weil es deine App von ihrer Umgebung trennt. Einmal rendern, überall wiederverwenden:

  • Schwebendes Hero-Gerät. Lege das Video über den Verlauf und das Branding deiner eigenen Landingpage. Gestaltest du die Seite im nächsten Quartal neu, passt das Video immer noch — kein neuer Export nötig.
  • Bild-in-Bild-Demos. Setze deine App in einen größeren Schnitt — Launch-Video, Tutorial, Vortrag — ganz ohne farbigen Kasten drumherum.
  • Folien und Keynotes. Das Gerät sitzt direkt auf deinem Template, egal welches Theme.
  • Freisteller für Social Media. Lass das Gerät mit deinem Design verschmelzen, statt ein Rechteck daraufzukleben.

Wenn dich vor allem das schwebende Hero-Gerät hergeführt hat: Unser Leitfaden zu Device-Mockups für Landingpages passt perfekt zu diesem Beitrag.

Warum Transparenz in Videos so schwierig ist

Im Mockpose-Editor ist eine transparente Szene ein Klick: Hintergrund-Panel öffnen, Hintergrund auf „Transparent“ setzen. Bei Standbildern endet die Geschichte hier — PNG-Exporte behalten die volle Alpha-Transparenz, schon im kostenlosen Plan.

Video ist eine andere Sache. Die Encodings, die dein Browser lokal erzeugt — H.264 MP4 und WebM VP9 — transportieren überhaupt keinen Alphakanal. Schickst du eine transparente Szene hindurch, wird jeder durchsichtige Pixel schwarz. Das ist keine Grenze von Mockpose, sondern schlicht die Funktionsweise dieser Formate im gesamten Web.

Deshalb passt Mockpose auf dich auf. Hat deine Szene einen transparenten Hintergrund, erkennt der Export-Dialog das, warnt dich und wählt automatisch ein Encoding vor, das alpha tatsächlich transportiert.

Zwei Formate mit echtem alpha

Video mit echtem Alphakanal kommt aus unserem Premium-Server-Rendering. Es läuft auf GPUs und asynchron: Du arbeitest im Editor weiter, während gerendert wird, und die fertige Datei landet in deinen Exporten. Zwei Formate stehen bereit:

  • ProRes 4444 — der Standard der Schnittprogramme. Die Datei landet direkt in Final Cut Pro, Premiere Pro, DaVinci Resolve oder After Effects, mit echtem alpha und bereit fürs Compositing.
  • WebM alpha (VP9) — die Option fürs Web. Läuft mit voller Transparenz in Chrome, Firefox und Edge.

Ein Vorbehalt beim Web-Weg: Safari spielt WebM alpha nicht ab — dafür bräuchte es HEVC alpha, das noch nicht verfügbar ist. Liefere für Safari-Besucher einen MP4-Fallback aus, dasselbe Video über einem passenden Hintergrund gerendert, damit niemand eine kaputte Hero-Section sieht.

In vier Schritten zum transparenten App-Video

  1. Baue deine Szene — filmische Kamerafahrten und die Keyframe-Timeline laufen komplett im Browser — und setze den Hintergrund auf „Transparent“.
  2. Animiere dein Gerät oder wähle eines von über 100 Templates.
  3. Exportiere und wähle ProRes 4444 (für den Schnitt) oder WebM alpha (fürs Web).
  4. Lege die Datei über jeden beliebigen Hintergrund: Hero-Section, Folie, Schnitt-Timeline.
Schneller Gegencheck vor einem langen Render: Exportiere zuerst ein transparentes PNG-Standbild. Volles alpha, ein Klick, im kostenlosen Plan enthalten.

Der Mockpose-Editor ist kostenlos — Exporte bis 720p mit kleinem Wasserzeichen — und Premium schaltet 4K, Dateien ohne Wasserzeichen und das Server-Rendering frei, das Video mit echtem alpha erst möglich macht. Öffne app.mockpose.com, setze deinen Hintergrund auf „Transparent“ und sieh zu, wie deine App schwebt.