GOOGLE · FLOW UI-TRACKING

Das Interface klebt am Gerät, auch wenn die Hand sich dreht.

Du filmst mit dem Handy, wie du ein MacBook oder ein iPhone hältst und drehst. Aus dem ersten Frame baust du ein Standbild mit schwebendem Glas-Interface oder AR-Callouts. Google Flow legt dieses Overlay zurück auf dein Video und trackt es rigide am Gerät, es kippt mit, wird perspektivisch schmaler und bleibt exakt dort, wo es hingehört.

Free (eingeschränkt) · Google AI Plus (4,99 €/Monat) · Google AI Pro (21,99 €/Monat) · Google AI Ultra (ab 99,99 €/Monat)

Zwei Geräte, zwei Overlay-Arten, beide aus einem Handy-Clip und einem Standbild

01
MacBook Spatial-Glas
02
iPhone AR-Callouts

Was das UI-Tracking besonders macht.

Vier Bausteine, die aus einem wackeligen Handy-Clip eine Aufnahme machen, die aussieht, als wäre sie in einem Compositing-Programm getrackt worden, ohne einen einzigen Tracking-Marker.

01 · DER ERSTE FRAME IST DIE BÜHNE

Design und Bewegung werden getrennt.

Der ganze Trick beginnt mit einem Screenshot des ersten Frames. Auf diesem einen Standbild baust du das Overlay in aller Ruhe im Bildmodell auf, so lange, bis Layout, Glas und Typografie sitzen. Erst danach kommt das Video dazu. Flow muss dann nur noch bewegen, was du bereits final gestaltet hast, statt Aussehen und Bewegung gleichzeitig zu erfinden.

02 · JEDES MODUL BLEIBT EIGENSTÄNDIG

„Do not merge" ist der wichtigste Satz.

Bildmodelle räumen Interfaces liebend gern auf: Sie fassen Module zu einem großen Panel zusammen, vereinheitlichen Abstände und tauschen Icons gegen ähnlich aussehende. Genau das zerstört die Wiedererkennung. Deshalb steht im Prompt mehrfach, dass jedes Modul seine eigene Glaskarte bleibt und Layout, Proportionen, Icons und Farben unverändert übernommen werden.

03 · RIGID STATT SCREEN-SPACE

Am Objekt kleben, nicht am Bildschirm.

Beide Varianten sind technisch möglich, und ohne Ansage wählt das Modell die einfachere: Das Overlay bleibt flach an derselben Stelle im Bild kleben, der Untertitel-Look. Gewollt ist das Gegenteil. Deshalb steht wörtlich im Prompt, dass das Tracking starr und physisch am Objekt hängt, nicht im Screen-Space: mitdrehen, perspektivisch schmaler werden, mit der Entfernung skalieren.

04 · ERST AUFBAUEN, DANN VERRIEGELN

Der Auftritt hat zwei Phasen.

Wenn alles sofort da ist, wirkt das Overlay wie ein aufgeklebtes Bild. Deshalb schreibt der Prompt eine Reihenfolge vor: Am Anfang ist nur das Gerät zu sehen, dann fahren die Karten nacheinander aus dem Display heraus an ihren Platz. Ab dem Moment, in dem alles sichtbar ist, ändert sich nichts mehr am Arrangement, es hängt nur noch fest am Gerät und macht dessen Bewegung mit.

Wie das UI-Tracking wirklich arbeitet.

01 · Zwei Modelle, zwei Aufgaben

Das Bildmodell gestaltet, das Videomodell trackt.

Ein Videomodell ist schlecht darin, saubere Interfaces zu erfinden: Icons wandern, Text flackert, Abstände atmen. Ein Bildmodell kann das exzellent, hat aber keine Zeitachse. Die Aufteilung nutzt beide Stärken: Nano Banana oder ChatGPT bauen das perfekte Standbild, Flow übernimmt danach nur noch die Bewegung.

02 · Der gemeinsame Anker

Bild und Video starten im selben Frame.

Weil das Referenzbild auf dem ersten Frame des Videos aufbaut, stimmen Perspektive, Ausschnitt, Licht und Gerätegröße von Sekunde null an überein. Flow muss nichts umrechnen, sondern nur weiterführen. Nimmst du ein anderes Foto desselben Geräts, springt das Overlay am Anfang sichtbar auf seine Position.

03 · Das Glas darf nichts schlucken

Transluzent ja, eingefärbt nein.

Ohne Ansage nimmt das Modell das Wallpaper hinter der Karte auf und färbt das Glas damit ein, dann verschwindet das Interface im Hintergrund und sieht bei jeder Drehung anders aus. Der Prompt trennt beides sauber: Milchglas mit Kantenlicht, Brechung und weichem Schatten, aber jede Karte behält ihr eigenes, sauberes Frosted-Aussehen, egal was dahinter liegt.

04 · Größer als das Gerät

140 Prozent statt brav im Rahmen.

Bleibt das Overlay innerhalb der Displayfläche, liest das Auge es als Bildschirminhalt, der räumliche Eindruck fällt weg. Deshalb steht eine konkrete Zahl im Prompt: Das Interface überragt das Gerät in Breite und Höhe und belegt rund 140 Prozent seiner Grundfläche. Genau dieser Überstand erzeugt das Gefühl, dass die Karten vor dem Gerät in der Luft hängen.

Wer das UI-Tracking wirklich nutzt.

01 · SaaS & App-Marketing

Dein Dashboard schwebt vor dem Laptop

Statt einer Bildschirmaufnahme, die jeder wegscrollt, hältst du das Gerät in der Hand und deine eigene Oberfläche schwebt als Glaskarten davor. Das Control Center ist hier nur die Vorlage, du lädst genauso den Screenshot deines Dashboards, deiner App oder deines Konfigurators als zweite Referenz hoch.

02 · Produkt-Launch & Tech-Reels

Der Spec-Sheet-Clip ohne Kamerateam

Die iPhone-Variante ist im Kern ein animiertes Datenblatt: Beschriftungen mit Verbindungslinien hängen an Kamera, Display, Chip und Anschluss und drehen sich mit dem Gerät. Für Hardware-Launches, Zubehör und Refurbished-Shops ist das der Clip, der sonst ein Studio und einen Motion-Designer gekostet hätte.

03 · Agentur- & Konzept-Pitch

Spatial-Mockup statt Folie 12

Wer ein Interface-Konzept für Vision Pro, Automotive-Displays oder ein AR-Feature verkaufen will, zeigt es am besten im Raum statt im Rechteck. Ein zehn Sekunden langer Clip, in dem das Konzept vor einem echten Gerät hängt und mitdreht, ersetzt eine ganze Reihe statischer Mockup-Folien.

04 · Schulung & Erklärvideo

Callouts, die am Bauteil bleiben

Der Effekt endet nicht bei Apple-Geräten. Alles, was du in der Hand halten und drehen kannst, lässt sich so beschriften: ein Werkzeug, ein Ersatzteil, ein Messgerät, eine Maschine. Weil die Labels am Objekt hängen statt am Bildrand, zeigen sie auch dann auf die richtige Stelle, wenn du das Teil vor der Kamera wendest.

Deine drei Prompts zum Kopieren.

Teil 1 baut aus deinem Standbild und dem Control-Center-Screenshot das schwebende Glas-Interface. Teil 2 legt dieses Bild zurück auf dein Video und trackt es am MacBook. Teil 3 ist die iPhone-Route: Sie trackt ein bereits beschriftetes Produktbild, ohne dass ein neues Interface gebaut werden muss.

ui-tracking-prompts.txt
=== TEIL 1: DAS GLAS-INTERFACE BAUEN (Bildmodell, z. B. Nano Banana oder ChatGPT) ===
Hochladen: 1) Screenshot des ersten Frames deines Laptop-Videos  2) eng zugeschnittener Screenshot des iPhone-Kontrollzentrums (nur Interface, kein Hintergrund)

Using the uploaded laptop photo and the provided iPhone Control Center as references, transform the Control Center into an Apple Vision Pro-style spatial interface floating above the laptop.

The interface must not be a single panel. Recreate it as multiple independent floating glass cards, exactly matching Apple's original layout. Every module should remain its own separate glass panel with identical spacing, proportions, hierarchy, icons, colors, typography, and arrangement.

Scale the entire interface to be larger than the laptop, extending beyond the display in both width and height. The floating workspace should feel expansive, with the combined arrangement occupying roughly 140% of the laptop's footprint, while keeping every module perfectly balanced.

Each glass card should feel like a physical object suspended in space. Use premium Apple's liquid glass materials with translucency, soft background blur, realistic glass thickness, subtle edge highlights, gentle internal reflections, light refraction, and soft natural shadows. The interface should look identical to Apple's glass UI found in Vision Pro.

The glass must remain visually independent. Do not allow the laptop wallpaper, desktop, or surrounding environment to blend into, tint, or affect the interface. Each card should maintain its own clean frosted appearance regardless of what is behind it.

Every card should be anchored to the laptop in 3D space, floating naturally several inches in front of the screen with accurate perspective and depth. The interface should feel like it originates from the laptop while remaining suspended in mid-air.

Do not merge cards together. Do not redesign, simplify, stretch, crop, rearrange, or modify any UI elements. Preserve every detail exactly.

Avoid sci-fi holograms, neon glows, projection beams, blue lighting, or futuristic visual effects. This should resemble Apple's spatial computing interface, not a hologram.

Transparent glass see through, like liquid glass.


=== TEIL 2: TRACKING AUF DEM MACBOOK (Google Flow) ===
Hochladen: 1) dein Original-Video  2) das Bild aus Teil 1

Use the uploaded video as the base video and the uploaded image as the visual reference.

At the beginning of the video, only the laptop is visible. The floating glass interface gradually appears from the laptop screen, with each card smoothly animating into place one after another.

Once fully visible, keep the interface perfectly attached to the laptop for the rest of the video. As the laptop moves, rotates, and tilts, the interface follows naturally with accurate tracking.

Keep the layout, glass appearance, and positioning similar to the reference image. Do not change the video or background.


=== TEIL 3: TRACKING AM IPHONE / AN JEDEM OBJEKT (Google Flow) ===
Hochladen: 1) dein Original-Video  2) das bereits beschriftete Produktbild (Callouts, Labels, Linien, auf dem ersten Frame aufgebaut)

Apply precise 3D motion tracking to the existing text and UI graphics.

The text and callout elements must:
Stay perfectly locked to the object
Be anchored to a consistent surface point
Move naturally with the hand and object
Maintain correct 3D perspective and depth
React accurately to rotation and tilt
Preserve proper scale relative to distance from camera

Tracking must feel rigid and physically attached to the object, not screen-space tracked.

No drifting
No sliding
No jitter

Clean, professional AR-style overlay.
Wichtig: Teil 2 und Teil 3 funktionieren nur mit hochgeladenem Video plus Bild. Beide Prompts beschreiben bewusst kein einziges Aussehensmerkmal, sie sagen ausschließlich, wie sich etwas bewegen soll. Das „Wie es aussieht" steckt komplett im Referenzbild aus Teil 1 beziehungsweise in deinem beschrifteten Produktbild. Wenn du das Interface stattdessen komplett neu erfinden lassen willst, statt es zu tracken, ist das hier der passendere Weg: Nano Banana.

In 5 Schritten startklar.

01

Clip drehen: Gerät halten, kippen, drehen

Film dich mit dem Handy dabei, wie du das MacBook oder iPhone hältst und über die ganze Aufnahme hinweg natürlich bewegst: kippen, leicht drehen, nicht ruckartig reißen. Acht bis zehn Sekunden reichen. Wichtig ist gleichmäßiges Licht und ein Hintergrund, der ruhig bleibt; je sauberer die Bewegung, desto stabiler klebt das Overlay später.

02

Ersten Frame als Standbild ziehen

Öffne den Clip, spule ganz an den Anfang und mach einen Screenshot vom ersten Bild. Genau dieses Standbild ist die gemeinsame Grundlage von Bild und Video, deshalb kein anderes Foto verwenden, auch wenn es dasselbe Gerät zeigt.

Screenshot des ersten Videoframes: eine Hand hält ein aufgeklapptes MacBook vor einer türkis beleuchteten Studiowand
Schritt 02Erster Frame
03

Das Overlay auf dem Standbild aufbauen

Für die MacBook-Route brauchst du eine zweite Referenz: einen Screenshot deines iPhone-Kontrollzentrums, eng zugeschnitten, sodass wirklich nur die Oberfläche zu sehen ist. Beides zusammen plus Teil 1 des Prompts ergibt das schwebende Glas-Interface. Für die iPhone-Route baust du stattdessen direkt ein beschriftetes Produktbild mit Callouts und Verbindungslinien auf demselben Standbild.

Eng zugeschnittener Screenshot des iPhone-Kontrollzentrums: Verbindungs-Kachel, Musik-Player, Ausrichtungssperre, Bildschirmsynchronisierung, Fokus, Helligkeits- und Lautstärkeregler
Referenz AControl Center, zugeschnitten
Ergebnis von Prompt 1: dieselbe MacBook-Aufnahme, jetzt mit mehreren getrennten Glaskarten des Kontrollzentrums, die vor und über dem Display schweben
Route AGlas-Interface
Route B: ein iPhone in der Hand mit beschrifteten Callouts zu Kamerasystem, Display, Chip, Finish, Akku und Anschluss, verbunden über dünne Linien
Route BAR-Callouts
04

Video plus Bild in Flow, Tracking-Prompt einfügen

In Google Flow beides hochladen: den Original-Clip als Basis-Video und das fertige Bild als visuelle Referenz. Dann Teil 2 (MacBook) beziehungsweise Teil 3 (iPhone) vollständig einfügen. Seitenverhältnis 9:16, Modell Veo 3.1. Am Prompt nichts kürzen, die Aufzählungen sind das, was das Tracking starr statt flach macht.

05

Zwei Stellen prüfen: Sekunde eins und die stärkste Drehung

Am Anfang darf das Overlay nicht sichtbar auf seine Position springen, passiert das, stammt dein Bild nicht wirklich vom ersten Frame. Und an der Stelle mit der größten Drehung muss das Overlay perspektivisch schmaler werden statt flach stehen zu bleiben. Sind beide Stellen sauber, hält der Rest des Clips fast immer.

Kleb dein Interface ans Gerät.

Ein Handy-Clip, ein Standbild, drei Prompts, und dein Interface dreht sich mit, als wäre es wirklich da.

Mehr Tipps auf @till.schae

Häufige Fragen.

Warum brauche ich ein Standbild, wenn ich doch schon ein Video habe?
Weil Flow zwei völlig verschiedene Fragen beantworten muss: Wie sieht das Overlay aus? Und wie bewegt es sich? Die erste Frage löst du im Bildmodell, dort baust du das Interface in Ruhe auf einem einzigen Frame, kontrollierst Layout, Glas, Typografie und Abstände und kannst so oft nachbessern, wie du willst. Die zweite Frage löst Flow im Video. Würdest du das Aussehen direkt im Video-Prompt beschreiben, müsste das Modell Design und Bewegung gleichzeitig erfinden, und genau dann wandern Karten, wechseln Icons und flackert die Typografie von Frame zu Frame.
Warum ausgerechnet der erste Frame des Videos?
Weil Flow beim Tracking von Frame 1 aus startet. Wenn dein Referenzbild exakt auf dem ersten Frame aufbaut, stimmen Perspektive, Bildausschnitt, Licht und Gerätegröße von der ersten Sekunde an überein, das Modell muss nichts umrechnen, sondern nur weiterführen. Nimmst du stattdessen einen Frame aus der Mitte oder ein anderes Foto desselben Geräts, springt das Overlay am Anfang sichtbar auf seine Position, weil Bild und Video nicht denselben Startzustand beschreiben.
Was heißt „rigid tracking, not screen-space" genau?
Screen-space heißt: Das Overlay klebt am Bildschirm des Zuschauers. Es bleibt flach an derselben Stelle, egal was das Gerät im Bild macht, der klassische Untertitel-Look. Rigid tracking heißt: Das Overlay klebt am Objekt. Dreht sich das MacBook, dreht sich die Glaskarte mit, sie wird perspektivisch schmaler, ihre Kanten fluchten weiter mit dem Display, und wenn das Gerät näher zur Kamera kommt, wird sie größer. Diese Unterscheidung gehört wortwörtlich in den Prompt, weil beide Varianten technisch möglich sind und das Modell sonst die einfachere wählt.
Warum steht im Bild-Prompt so oft „do not merge, do not redesign"?
Weil Bildmodelle Interfaces gerne aufräumen. Ohne diese Sperren fasst das Modell die einzelnen Control-Center-Module zu einem großen Panel zusammen, vereinheitlicht Abstände, ersetzt Icons durch ähnlich aussehende und erfindet Beschriftungen. Das Ergebnis sieht dann nach generischem Sci-Fi-HUD aus statt nach echtem Apple-Interface. Die Wiedererkennung entsteht ausschließlich daraus, dass jedes Modul seine eigene Glaskarte bleibt und Layout, Proportionen und Farben unverändert übernommen werden.
Geht das auch mit meinem eigenen Produkt-UI statt dem Control Center?
Ja, und genau darin liegt der eigentliche Nutzen. Das Control Center ist nur die bequemste Vorlage, weil es jeder kennt und weil es von Haus aus aus sauber getrennten Modulen besteht. Du kannst genauso einen Screenshot deines Dashboards, deiner App oder deines Konfigurators als zweite Referenz hochladen, wichtig ist nur, dass er eng zugeschnitten ist und wirklich nur die Oberfläche zeigt, ohne Browserleiste, Statusbar oder Desktop-Hintergrund.
Welches Modell, welche Länge, welche Kosten?
Die Clips auf dieser Seite sind 8 bzw. 10 Sekunden in 9:16 (720×1280 Preview) und entstanden mit Veo 3.1 in Google Flow, die Referenzbilder in ChatGPT bzw. Nano Banana. Google AI Pro (21,99 €/Monat, 1.000 Flow-Credits) reicht für regelmäßige Generierungen, Google AI Ultra (ab 99,99 €/Monat, 10.000 Credits) entfernt zusätzlich das sichtbare „Veo"-Logo. Der kostenlose Zugang funktioniert im Ansatz, liefert aber niedrigere Qualität und ein Wasserzeichen.