Der Tag, an dem eine Website sich selbst filmte

Jedes Produkt mit einer Website braucht Video. Eine Demo für die Startseite, einen kurzen Clip für Social Media, eine Tour für einen Launch, einen Ausschnitt für die Vertriebspräsentation. Jedes davon kostet denselben Nachmittag: Bildschirmrekorder, Skript, Stimme, Schnittprogramm und viel Geduld.

Dann ändert sich die Seite. Eine neue Preistabelle, eine umbenannte Funktion, ein frisches Titelbild, und das Video erzählt still und leise eine andere Geschichte als die Seite, die es zeigen soll.

Uns ließ eine Frage nicht los. Wenn die Website die Wahrheit über das Produkt schon enthält, warum muss das Video dann woanders entstehen?

PageToVid beginnt mit einem einfachen Versprechen. Der Film kommt von der echten Website, nicht von einem Mock-up. Kein Stockmaterial, das sich als dein Produkt ausgibt, keine von Hand nachgebauten Folien, nichts zu installieren. Wenn die Seite es sagt, zeigt der Film es.

Dieses Versprechen verlangt drei Dinge zugleich:

• Einen echten Browser. Die Seite wird auf unseren Servern geöffnet, gescrollt und gefilmt, genau so, wie Besucher sie sehen, deshalb ist jede Aufnahme scharf und wiederholbar.
• Eine Geschichte statt eines Scrollens. Eine KI liest zuerst die Seite und entscheidet, was erzählenswert ist: was das Produkt ist, für wen es gedacht ist und was es verspricht.
• Eine Stimme und ein Format. Der Film wird gesprochen, untertitelt und für den Ort zugeschnitten, an dem er läuft: Breitbild, Handy oder quadratischer Feed.

Das Feld auf der Startseite wirkt fast zu einfach. Dahinter reichen sich fünf Schritte die Arbeit weiter:

1. 1Lesen. Ein Browser öffnet die Seite, sammelt Text, Links, Farben und einen Screenshot, und ein KI-Modell schreibt eine kurze Notiz über das Produkt.
2. 2Planen. Ein zweiter Durchgang macht daraus Szenen: was die Stimme sagt, welcher Teil der Seite zu sehen ist und welche Art von Einstellung es wird.
3. 3Filmen. Ein echter Browser spielt jede Szene auf der Live-Seite durch, scrollt, fährt mit der Maus darüber, klickt und nimmt gestochen scharfe Bildschirme in hoher Dichte und kurze Bewegungsclips auf.
4. 4Sprechen. Eine KI-Stimme liest das Skript, und jedes Wort wird auf den Ton ausgerichtet, damit die Untertitel genau dann aufleuchten, wenn es gesprochen wird.
5. 5Rendern. Remotion, eine Video-Engine auf Basis von React, setzt Bildschirme, Clips, Animationen, Musik und Untertitel zum fertigen Film zusammen.

Eine Entscheidung vom allerersten Tag zählt mehr, als man denkt. Scharfe Bildschirme entstehen aus hochauflösenden Screenshots, die die Engine animiert, und echtes Video heben wir uns für Momente auf, die Bewegung brauchen, etwa ein Hover oder einen Klick. Deshalb bleibt der Text in einem PageToVid-Film lesbar, auch auf einem kleinen Handy.

Die Idee war eine Woche lang auf einem Laptop unter einem Arbeitstitel gewachsen. Am 23. Juni wurde daraus PageToVid, und es bekam, was ein echtes Produkt braucht: einen Container mit Browser, Videowerkzeugen und Render-Engine, Sicherheits- und Cache-Header und eine automatische Kette, die jede Änderung prüft, baut und in die Cloud bringt.

Schon am ersten Tag lief es öffentlich. Die Anmeldung kam dazu, und die Startseite schrumpfte auf eine Zeile: URL einfügen, Enter drücken. Bald stellte diese Zeile zuerst eine Frage, nach dem Format des Films, mit drei Karten für 16:9, 9:16 und 1:1, denn das Format ändert alles, was der Rekorder tut.

Die ersten Filme waren anschaubar. Wir wollten mehr als das, also haben wir sie angesehen wie ein Zuschauer, auf dem Handy und in echter Geschwindigkeit, und nachjustiert, was uns auffiel.

• Ruhiges Scrollen. Gescrollt wird jetzt mit festem Tempo, gemessen in Bildschirmhöhen pro Sekunde, damit eine kurze Szene so gelassen gleitet wie eine lange, egal wie lang die Seite ist.
• Das echte Handy-Layout. Ein 9:16-Film entsteht in echter Handybreite und hoher Pixeldichte, damit die Seite das Layout zeigt, das ihre mobilen Besucher wirklich sehen.
• Eine Stimme, die atmet. Die Sprecherstimme ist eine Spur langsamer, ohne ihre Tonhöhe zu verändern, und jede Szene und jeder Untertitel folgt ihrem Takt.
• Untertitel mit Platz. Grafikszenen halten unten einen freien Streifen, sobald Untertitel an sind, damit Texte und Zahlen nie darunter rutschen.

Diese ersten Renderings haben uns eine Gewohnheit geschenkt, die wir behalten wollen: eine echte Seite rendern, den Film genau ansehen, die eine Sache finden, die den Zauber bricht, und ihre Ursache beheben statt des Symptoms. Ein Film, der auf dem Laptop gut aussieht, kann auf dem Handy schwer zu lesen sein, deshalb beurteilen wir jede Änderung an einem echten Render, im Format, in dem jemand ihn ansehen wird.

Dieser Blog begleitet PageToVid Meilenstein für Meilenstein, von diesem ersten Feld bis zu allem, was daraus wird, in einfachen Worten und in vier Sprachen. Wenn du dieses erste Kapitel selbst sehen willst, füge deine Website in PageToVid ein oder sieh dir die Funktionen an.