Verwendung
Verwende diese Fähigkeit, wenn der Benutzer Folgendes erstellen möchte:
-
Lehrvideos – Ein Thema recherchieren und eine animierte Erklärung erstellen
- Beispiel: „Erstelle ein Tutorial über den Lebenszyklus eines Schmetterlings für Schüler der 3. Klasse“
-
SaaS-Walkthrough-Demos – Softwarefunktionen mit animierter Benutzeroberfläche präsentieren
- Beispiel: „Erstelle ein Demovideo, das zeigt, wie man die Datenbankfunktion von Notion verwendet“
-
Produkteinführungs-Ankündigungen – Marketingvideos mit Bewegungsgrafiken
- Beispiel: „Erstelle ein Einführungsvideo, das unsere neue KI-gestützte Suchfunktion ankündigt“
-
Tutorial-/Walkthrough-Videos – Schritt-für-Schritt-Anleitungen mit Cursor-Animationen
- Beispiel: „Erstelle ein Tutorial, das zeigt, wie man ein Projekt in unserer App einrichtet“
-
Social-Media-Promo-Videos – Kurze, knackige kinetische Textvideos für Werbung
- Beispiel: „Erstelle eine 15-Sekunden-Instagram-Anzeige für unsere Fitness-App“
-
App-/Produkt-Präsentationsvideos – Kinetischer Text kombiniert mit schwebenden UI-Mockups
- Beispiel: „Erstelle einen Werbespot, der unsere Krypto-Börsenoberfläche zeigt“
-
Landing-Page-Reveal-Videos – Design-Tool-Ästhetik mit Webseiten-Animationen
- Beispiel: „Erstelle ein Video, das unser neues SaaS-Landingpage-Design präsentiert“
Videoproduktions-Workflow
Halte für alle Videoarten diese Pipeline ein:
1. VERSTEHEN → 2. RECHERCHE → 3. SKRIPT → 4. SZENEN → 5. AUDIO → 6. ANIMIEREN
Schritt 1: Die Anfrage verstehen
Identifiziere:
- Videoart: Lehrvideo, SaaS-Demo, Produkteinführung, Tutorial/Walkthrough, Social-Promo, App-Präsentation, Landing-Page-Reveal oder KI-Erklärvideo?
- Zielgruppe: Alter, Kenntnisstand, Kontext
- Ton: Lehrreich, professionell, energiegeladen, verspielt, dramatisch, minimalistisch
- Dauer: Ultrakurz (5-15s), kurz (30-60s), mittel (1-3min) oder lang (3-5min)
- Format: Breitbild 16:9 (1920x1080), Quadrat 1:1 (1080x1080) oder Hochformat 9:16 (1080x1920)
- Visueller Stil: Dunkel-dramatisch, sanfter Farbverlauf, sauber-minimalistisch oder Design-Tool-Ästhetik
Schritt 2: Recherche (für Tutorials und Demos)
Für Lehrinhalte:
- Suche nach genauen, aktuellen Informationen
- Verwende zuverlässige Quellen (offizielle Dokumentationen, Bildungsseiten)
- Sammle wichtige Fakten, Statistiken oder Schritte zur Erklärung
Für SaaS-Demos:
- Erkunde das Produkt, um die Funktionen zu verstehen
- Mache Screenshots oder notiere UI-Muster
- Identifiziere den wichtigsten Workflow, der demonstriert werden soll
Schritt 3: Das Skript schreiben
Schreibe ein vollständiges Voiceover-Skript, BEVOR du Audio generierst. Die Struktur variiert je nach Videoart (siehe unten).
Schritt 4: Szenen planen
Unterteile das Skript in visuelle Segmente:
- Jede Szene = eine Schlüsselidee oder ein Schritt
- Notiere, welche Bilder jede Zeile begleiten
- Plane Übergänge zwischen den Szenen
Schritt 5: Audio generieren
Verwende Resemble.ai, um das Voiceover zu generieren (siehe Einrichtung unten).
Schritt 6: Animationen erstellen
Erstelle die Remotion-Komposition mit Animationen, die mit dem Audio synchronisiert sind.
Videoart: Lehrvideo
Ziel: Erkläre ein Konzept klar für ein bestimmtes Zielgruppenniveau.
Skriptstruktur
AUFMERKSAMKEIT (5-10s)
„Hast du dich jemals gefragt, wie aus einer Raupe ein Schmetterling wird?“
EINFÜHRUNG (10-15s)
Setze den Kontext und gib einen Vorschau auf das, was sie lernen werden.
HAUPTTEIL (Hauptinhalt, aufgeteilt in 3-5 Kernpunkte)
- Punkt 1: Erkläre mit einer visuellen Metapher
- Punkt 2: Baue auf dem vorherigen Punkt auf
- Punkt 3: Füge Details oder ein Beispiel hinzu
- ...
ZUSAMMENFASSUNG (10-15s)
Fasse die wichtigsten Erkenntnisse zusammen.
ABSCHLUSS (5s)
Aufruf zum Handeln oder abschließender Gedanke.
Zielgruppenanpassung
| Zielgruppe | Sprachstil | Bilder |
|---|---|---|
| Klasse K-2 | Sehr einfach, verspielt, 5-Wort-Sätze | Helle Farben, niedliche Figuren, große Formen |
| Klasse 3-5 | Einfach, aber informativ, Analogien | Klare Diagramme, Schritt-für-Schritt, moderates Tempo |
| Klasse 6-8 | Mehr Wortschatz, Ursache-Wirkung | Diagramme, beschriftete Grafiken, schnelleres Tempo |
| High School+ | Fachbegriffe in Ordnung, Nuancen | Datenvisualisierungen, detaillierte Grafiken |
| Erwachsene | Professionell, prägnant | Sauberes Design, Infografiken |
Animationsmuster für Tutorials
- Einblendungen: Elemente einblenden, während der Sprecher sie erwähnt
- Transformationen: Formen verändern, um Veränderungen zu zeigen (Raupe → Schmetterling)
- Diagramme: Animierte Beschriftungen, Pfeile, die auf Teile zeigen
- Zeitachsen: Fortschrittsbalken, Schrittindikatoren
- Vergleiche: Nebeneinander mit Hervorhebung
Beispiel Szenenplan
Skript: „Zuerst legt der Schmetterling winzige Eier auf ein Blatt.“
Szene 1:
- Bild: Blatt erscheint (von unten hereingleiten, Federeffekt)
- Bild: Kleine Eier blenden auf dem Blatt ein
- Timing: Das Wort „Eier“ mit dem Erscheinen der Eier synchronisieren
- Dauer: 4 Sekunden
Videoart: SaaS-Walkthrough-Demo
Ziel: Zeige Benutzern, wie sie eine Aufgabe in einer Software erledigen.
Skriptstruktur
AUFMERKSAMKEIT (5-10s)
„Lass mich dir zeigen, wie du [Ziel erreichen] in [Produkt].“
KONTEXT (10s)
Warum diese Funktion wichtig ist, welches Problem sie löst.
WALKTHROUGH (Hauptinhalt)
- Schritt 1: Navigiere zu X
- Schritt 2: Klicke auf Y
- Schritt 3: Konfiguriere Z
- ...
ERGEBNIS (10s)
Zeige das Ergebnis, den fertigen Zustand.
ABSCHLUSS (5-10s)
Fasse den Nutzen zusammen, schlage nächste Schritte vor.
Visuelle Elemente
- UI-Mockups: Stilisierte Darstellungen der Oberfläche
- Cursor-Animationen: Animierter Zeiger, der sich zu Klickzielen bewegt
- Hervorhebungen: Leuchtende Rahmen um Schaltflächen/Felder, die besprochen werden
- Zoomeffekte: Fokus auf bestimmte Bereiche der Benutzeroberfläche
- Callouts: Textbeschriftungen, die auf UI-Elemente zeigen
Animationsmuster für Demos
- Cursor-Bewegung: Sanfte Bézier-Kurven, kurze Pause vor dem Klick
- Klick-Effekt: Welligkeit oder Puls beim Klicken
- Feld-Fokus: Rahmen hervorheben, leichte Skalierung
- Tipp-Animation: Zeichen, die in Eingabefeldern erscheinen
- Übergang: Zwischen Bildschirmen schieben oder einblenden
- Callout-Pfeile: Einblenden, auf Element zeigen, ausblenden
Beispiel Szenenplan
Skript: „Klicke auf die blaue Schaltfläche ‚Neue Datenbank‘ in der Seitenleiste.“
Szene:
- Bild: UI-Mockup der Seitenleiste
- Animation: Cursor bewegt sich zur Schaltfläche (0.8s ease-out)
- Animation: Schaltfläche wird mit Leuchten hervorgehoben
- Animation: Klick-Welleneffekt
- Animation: Neues Panel gleitet von rechts herein
- Dauer: 3 Sekunden
Videoart: Produkteinführungs-Ankündigung
Ziel: Erzeuge Aufregung um ein neues Produkt oder eine neue Funktion.
Skriptstruktur
AUFMERKSAMKEIT (5-10s)
Kühne Aussage oder Frage, die die Aufmerksamkeit erregt.
PROBLEM (10-15s)
Welchen Schmerzpunkt löst dies?
LÖSUNGSVORSTELLUNG (10-15s)
Das Produkt/die Funktion dramatisch vorstellen.
HAUPTFUNKTIONEN (20-40s)
3-5 prägnante Funktionshighlights mit Bildern.
SOZIALER BEWEIS (optional, 10s)
Statistiken, Testimonials oder Glaubwürdigkeitsmerkmale.
AUFRUF ZUM HANDELN (5-10s)
Was sollen die Zuschauer als Nächstes tun?
Visueller Stil
- Fette Typografie: Großer Text, kinetische Typanimationen
- Markenfarben: Verwende konsequent die Farbpalette des Produkts
- Symbole und Grafiken: Abstrakte Formen, Funktionssymbole
- Hohe Energie: Schnellere Schnitte, dynamische Bewegung
- Logo-Enthüllung: Animiertes Logo am Ende
Animationsmuster für Einführungen
- Text-Einschläge: Wörter schlagen mit Wucht ein
- Kinetische Typografie: Wörter, die sich bewegen, skalieren, drehen
- Zähler-Animationen: Zahlen, die hochzählen (Benutzer, Umsatz usw.)
- Symbolsequenzen: Funktionen erscheinen mit Spring-/Federeffekt
- Farbverlaufshintergründe: Sich langsam verschiebende Farbverläufe
- Partikeleffekte: Dezente Glitzer, schwebende Formen
- Logo-Enthüllung: Hochskalieren, einblenden oder aus Teilen zusammensetzen
Beispiel Szenenplan
Skript: „Wir stellen Smart Search vor – finde alles in Millisekunden.“
Szene:
- Bild: Dunkler Hintergrund mit Farbverlauf
- Animation: „Wir stellen vor“ blende ein (0,5s)
- Animation: „Smart Search“ schlägt groß, fett ein (0,3s, mit Erschütterung)
- Animation: Der Slogan wird unten hingetippt (Schreibmaschine, 1,5s)
- Animation: Suchsymbol pulsiert
- Dauer: 4 Sekunden
Videoart: Tutorial / Walkthrough
Ziel: Bringe Benutzern bei, wie sie eine Aufgabe mit klaren Schritt-für-Schritt-Anleitungen erledigen.
Skriptstruktur
EINFÜHRUNG (3-5s)
„So erreichst du [Ziel] in [Produkt].“
SCHRITT 1 (10-20s)
Erste Aktion mit klarer visueller Demonstration.
SCHRITT 2 (10-20s)
Zweite Aktion, aufbauend auf dem vorherigen Schritt.
SCHRITT 3+ (10-20s jeweils)
Setze den Workflow fort ...
ERFOLGSZUSTAND (5-10s)
Zeige den Abschluss, feiere das Ergebnis.
ZUSAMMENFASSUNG (optional, 5s)
Kurze Zusammenfassung, was erreicht wurde.
Visueller Stil
- Helle, saubere Hintergründe: Gebrochenes Weiß (#fafafa), Creme oder Hellgrau
- Vollständiger UI-Kontext: Zeige die gesamte Oberfläche, nicht nur Fragmente
- Fortschrittsanzeigen: Schritt-Brotkrümel, nummerierte Phasen (1 → 2 → 3)
- Cursor als Führung: Sanfte Cursor-Bewegung führt das Auge des Betrachters
- Erfolgsfeier: Grüne Häkchen, Konfetti oder gebrandete Erfolgsbildschirme
- Minimale Ablenkungen: Konzentriere dich auf die Aufgabe, vermeide dekorative Elemente
Animationsmuster für Tutorials
- Cursor-Choreografie: Sanfte Bézier-Pfade mit kurzer Pause vor Klicks
- Klick-Feedback: Dezente Welligkeit oder Hervorhebung beim Klicken
- Formularfeld-Fokus: Rahmen-Leuchten, wenn das Feld aktiv ist
- Tipp-Simulation: Text erscheint zeichenweise in Eingabefeldern
- Schrittübergänge: Sanfte Überblendung oder Schieben zwischen Bildschirmen
- Fortschrittsaktualisierungen: Brotkrümel-/Schrittindikator animiert vorwärts
- Erfolgsburst: Häkchen skaliert mit Federeffekt herein, optional Konfetti
- Panel-Enthüllungen: Seitenleisten oder Dropdowns gleiten sanft herein
Visuelle Elemente
- Brotkrümelnavigation: „← 1. Absicht → 2. Idee → 3. Skizzenblock“
- Formularfelder: Platzhaltertext, Beschriftungen, Validierungszustände
- Schaltflächen: Klare CTAs mit gezeigten Hover-/Aktiv-Zuständen
- Seitenleisten/ Paneele: KI-Vorschläge, Einstellungen oder Werkzeugpaletten
- Erfolgsbildschirme: Vollfarbiger Hintergrund mit Symbol + Nachricht
Beispiel Szenenplan
Skript: „Gib zunächst ein, worum es in deiner Lektion geht.“
Szene 1 - Einrichtung (2s):
- Bild: Vollständige App-Oberfläche, heller Hintergrund
- Bild: Brotkrümel zeigt „2. Idee“ aktiv
- Animation: Bildschirm blendet ein
Szene 2 - Interaktion (4s):
- Bild: Formular mit Beschriftung „Gib ein Konzept oder Thema ein:“
- Animation: Cursor bewegt sich zum Eingabefeld (0,6s ease-out)
- Animation: Feldrand hebt sich blau hervor
- Animation: „Das geheime Leben der Pilze“ wird eingetippt (2s)
- Animation: Cursor bewegt sich zur Schaltfläche „Weiter“
Szene 3 - Übergang (2s):
- Animation: Schaltfläche hebt sich beim Hovern hervor
- Animation: Klick-Welleneffekt
- Animation: Bildschirm gleitet nach links, neues Panel gleitet herein
Szene 4 - Ergebnis (3s):
- Bild: Skizzenblock-Ansicht mit KI-Vorschlagsfeld
- Animation: Vorschlagskarten kommen gestaffelt herein (0,15s Verzögerung pro Karte)
- Animation: Abschnitt „Lektionsablauf“ wird befüllt
Szene 5 - Erfolg (3s):
- Bild: Grüner Vollbild-Hintergrund
- Animation: Weißer Kreis skaliert herein (Federeffekt)
- Animation: Häkchen wird im Kreis gezeichnet
- Animation: „Deine Lektion ist live!“ blendet darunter ein
- Animation: Untertitel „Bereit, Staunen und Entdecken zu wecken“ blendet ein
Tutorial-Pacing-Richtlinien
| Schrittschwierigkeit | Dauer | Hinweise |
|---|---|---|
| Einfacher Klick | 2-3s | Klick und sofortiges Ergebnis |
| Formulareingabe | 4-6s | Tippen + Absenden |
| Mehrfeldriges Formular | 8-12s | Mehrere Eingaben |
| Komplexer Workflow | 15-20s | Mehrere Unterschritte |
| Erfolgszustand | 3-5s | Kurz innehalten |
Tipps für effektive Tutorials
- Eine Aktion pro Szene – Hetze nicht mehrere Klicks zusammen
- Bei Ergebnissen innehalten – Lass die Zuschauer das Ergebnis sehen, bevor es weitergeht
- Hebe hervor, was sich ändert – Verwende dezentes Leuchten oder Skalieren bei neuen Elementen
- Erzählung mit Aktion abstimmen – Der Klick erfolgt, wenn der Sprecher „klicke“ sagt
- Zeige die gesamte Benutzeroberfläche – Kontext hilft Benutzern, sich zu orientieren
- Mit einer Feier enden – Erfolgszustände verstärken den Abschluss
Videoart: Social-Media-Promo
Ziel: Errege schnell Aufmerksamkeit mit fettem kinetischem Text für Anzeigen und soziale Inhalte.
Skriptstruktur
AUFMERKSAMKEIT (1-3s)
Ein einzelnes starkes Wort oder ein Satz, der das Scrollen stoppt.
NUTZENVERS versprechen (3-5s)
Was haben sie davon? Ein prägnanter Satz.
FUNKTIONSBLITZ (5-10s)
2-3 Hauptvorteile, im Schnelldurchlauf.
CTA (2-3s)
Klare Handlung: „Jetzt herunterladen“, „Kostenlos testen“, URL
Visueller Stil
- Minimale Hintergründe: Einfarbig oder einfache Farbverläufe
- Maximaler Kontrast: Dunkler Hintergrund + weißer Text ODER farbiger Hintergrund + weißer Text
- Wort-für-Wort-Enthüllungen: Jedes Wort bekommt seinen eigenen Moment
- Farbübergänge: Die Hintergrundfarbe wechselt zwischen den Szenen
- Quadratisches Format: 1080x1080 für Instagram/Social Feeds
Animationsmuster für Social Promos
- Wort-Einschlag: Einzelne Wörter erscheinen mit Wucht (Skalierung 1,2→1 + leichtes Wackeln)
- Hintergrundblitz: Sofortige Farbwechsel zwischen Wörtern/Sätzen
- Textskalierung: Wörter werden groß und schrumpfen dann, um Platz für das nächste zu machen
- Minimale Bewegung: Lass die fette Typografie die Arbeit machen
- Schnelle Schnitte: Maximal 0,5-1s pro Wort/Satz
Beispiel Szenenplan
Skript: „Wir sind bereit.“
Szenenfolge (insgesamt 4 Sekunden):
- Bild 1: Schwarzer Hintergrund, „WIR“ schlägt in Weiß ein (0,8s)
- Bild 2: Weißer Hintergrund, „SIND“ erscheint in Schwarz, zentriert (0,8s)
- Bild 3: Roter Hintergrund, „B“ wird getippt, wird zu „BEREIT“ (1,6s)
- Bild 4: Letztes Bild halten (0,8s)
Dauerrichtlinien
| Plattform | Ideale Länge | Maximale Länge |
|---|---|---|
| Instagram Reels | 15-30s | 90s |
| TikTok | 15-60s | 3min |
| Twitter/X | 15-45s | 2min 20s |
| 30s-1min | 10min | |
| YouTube Shorts | 15-60s | 60s |
Videoart: App-/Produkt-Präsentation
Ziel: Präsentiere die Oberfläche eines Produkts mit filmischem Flair, kombiniere Text und UI.
Skriptstruktur
AUFMERKSAMKEIT (3-5s)
Problemstellung oder faszinierende Frage.
PRODUKT VORSTELLEN (5-10s)
Zeige den Produktnamen/das Logo, etabliere die Marke.
FUNKTIONSTOUR (20-40s)
Gehe mit UI-Demonstrationen durch 3-5 Hauptfunktionen.
NUTZENZUSAMMENFASSUNG (5-10s)
Fasse zusammen, was es besonders macht.
CTA (5s)
URL, App-Store-Badge oder nächster Schritt.
Visueller Stil
- Dunkle Farbverlaufshintergründe: Schwarz zu Lila/Blau für Technologieprodukte
- Sanfte Farbverlaufshintergründe: Pastellfarben (Pink, Lavendel, Mint) für freundliche Apps
- Schwebende UI-Mockups: App-Bildschirme in leichter Schräglage mit Schatten
- Kinetischer Text neben UI: Text erscheint neben oder über der Oberfläche
- Cursor-Interaktionen: Zeige Klicks, Scrollen, Tippen innerhalb der UI
Animationsmuster für App-Präsentationen
- Einführungssequenz: Logo skaliert mit Leuchten herein
- Panel-Schieber: UI-Panels gleiten herein (von rechts, links, oben)
- Datenauffüllung: Diagramme, Listen oder Karten werden nach und nach sichtbar
- Fokuswechsel: Unschärfe auf inaktive Elemente, Schärfe auf das hervorgehobene Feature
- Text-Overlays: Text, der über oder neben der UI erscheint, mit Einblendung nach oben
- Feature-Puls: Das aktuelle Feature pulsiert oder schwebt leicht, um Aufmerksamkeit zu erregen
- Übergänge durch Formverschiebung: UI-Elemente verändern sanft ihre Form (Rechteck → Kreis)
Beispiel Szenenplan
Skript: „Verfolge dein Portfolio in Echtzeit mit unserer Ticker-Tafel.“
Szene 1 - Einführung (3s):
- Bild: Dunkler Farbverlaufshintergrund (Schwarz zu Marineblau)
- Animation: „Echtzeit-Tracker“ gleitet von oben herein (0,5s)
- Animation: Untertitel „Für Händler, die niemals einen Schlag verpassen“ (0,8s Verzögerung)
- Übergang: Überblendung zu Schwarz (0,3s)
Szene 2 - UI-Enthüllung (4s):
- Bild: Schwebendes Telefon-Mockup, leicht nach rechts geneigt
- Animation: Telefon skaliert von 0,8 auf 1,0
- Animation: Ticker-Tafel innerhalb der App erscheint von unten
- Animation: Kurse (BTC, ETH) scrollen von rechts nach links (2s)
Szene 3 - Funktionshighlight (3s):
- Animation: Cursor tippt auf BTC-Ticker
- Animation: BTC-Zeile vergrößert sich, pulsiert (Gold-Leuchten)
- Animation: Kursänderung „+2,4 %“ erscheint in Grün
- Dauer: 3s
Videoart: Landing-Page-Reveal
Ziel: Präsentiere ein Webdesign oder die Neugestaltung einer Seite mit der Ästhetik eines Designtools.
Skriptstruktur
AUFMERKSAMKEIT (3-5s)
Vorher vs. Nachher oder eine provokante Designfrage.
BEREICH TOUR (20-30s)
Zeige 3-5 Abschnitte der Seite nacheinander, erkläre die Designwahl.
MICRO-INTERACTIONS (10-15s)
Zoome auf Hover-Zustände, Übergänge und Animationen.
ERGEBNIS (10s)
Zeige die vollständige Seite aus der Vogelperspektive.
CTA (5s)
Lade die Zuschauer ein, die Seite zu besuchen oder sich zu abonnieren.
Visueller Stil
- Design-Tool-Ästhetik: Hellgrauer Hintergrund (#e0e0e0), ähnlich wie Figma-Canvas
- Eingerahmte Webseiten-Mockups: Browser-Rahmen, der die Seite enthält
- Tool-Panels: Symbolleisten, Ebenen Panels und Asset-Bibliotheken, die wie Design-Software aussehen
- Anmerkungen: Textblasen, die auf bestimmte Elemente zeigen
- Selektions-Highlights: Blauer Umriss (ähnlich wie eine Figma-Auswahl) für Fokus
- Makro-/Mikro-Übergänge: Zoomt von der Gesamtseite zu einem Detail oder umgekehrt
Animationsmuster für Landing-Page-Reveals
- Raster-Aufdecken: Elemente erscheinen nacheinander in einem Raster (Bilder, Textblöcke)
- Selektions-Leuchten: Ein Element wird mit einem blauen Rand ausgewählt, dann erscheint ein Anmerkungstext
- Zoom-zu-Detail: Die Ansicht zoomt von der Gesamtseite zu einem bestimmten Abschnitt
- Hover-Simulation: Eine Schaltfläche ändert ihre Farbe oder Größe, als ob der Mauszeiger darüber schwebt
- Bildlaufanimation: Der Seiteninhalt bewegt sich nach oben, während auf die Seite herangezoomt wird
- Ebenen-Panel: Ein Seitenpanel zeigt Ebenen, die nacheinander hervorgehoben werden
Beispiel Szenenplan
Skript: „Beachte, wie der Heldenbereich sofort die Aufmerksamkeit auf sich zieht.“
Szene 1 - Kontext (2s):
- Bild: Hellgrauer Canvas-Hintergrund
- Bild: Gerahmtes Web-Mockup, zentriert
- Bild: Tool-Panel links (Ebenenliste)
Szene 2 - Auswahl (2s):
- Animation: Heldenbereich wird mit blauem Rand ausgewählt (0,3s)
- Animation: Ebenen-Panel zeigt „Heldenbereich“ hervorgehoben
Szene 3 - Einblick (3s):
- Animation: Pfeil erscheint, zeigt auf die Überschrift
- Animation: Textanmerkung „Kühne, klare Überschrift“ erscheint (0,5s)
- Animation: Untertitel „Erklärt das Wertversprechen auf einen Blick“ (0,3s später)
Szene 4 - Element-Leuchten (2s):
- Animation: CTA-Schaltfläche pulsiert sanft (wiederholt 2x)
- Animation: Kurzer Zoom auf die Schaltfläche (1,5x)
Szene 5 - Ergebnis (3s):
- Animation: Rauszoomen zur Vollansicht der Seite
- Animation: Gesamtseite wird mit Schattenwurf angezeigt
- Dauer: Halten (1,5s)
Landing-Page-Reveal-Tipps
- Behandle es wie eine Design-Review – Zeige die Seite so, als ob du sie einem Kunden präsentierst
- Verwende Design-Tool-Konventionen – Auswahlrahmen, Ebenen Panels und Anmerkungen schaffen ein vertrautes Gefühl
- Wechsle zwischen Makro und Mikro – Beginne mit der Gesamtansicht für den Kontext, zoome dann für Details
- Simuliere Benutzerinteraktionen – Zeige Hover-Zustände, Klicks und Bildläufe, um das Erlebnis zu demonstrieren
- Nutze Anmerkungen sparsam – Zu viele stören den visuellen Fluss, aber 2-3 pro Szene sind effektiv
- Ende mit einem „Veröffentlichen“-Gefühl – Ein letzter Zoom-Out, Schattenwurf und ein CTA erzeugen einen Abschluss
Videoart: KI-Erklärung
Ziel: Zeige mit filmischer Geschwindigkeit und Textüberlagerungen, wie ein KI-Workflow funktioniert.
Skriptstruktur
EINGABE (5-10s)
Zeige die Eingabeaufforderung oder das Problem, das der Benutzer gibt.
VERARBEITUNG (15-25s)
Vermittle die internen Schritte, die die KI unternimmt.
AUSGABE (5-10s)
Zeige das Ergebnis im fertigen Format.
CTA (5s)
Was der Betrachter mitnehmen oder als Nächstes tun kann.
Visueller Stil
- Terminal-Dunkel: Schwarzer oder sehr dunkler Hintergrund mit Code-/Textüberlagerungen
- Naschleifen: Symbole, die leuchten und sich drehen, um zu zeigen, dass der Prozess läuft
- Code-Einblendungen: JSON- oder Codeblöcke, die nacheinander erscheinen und sich befüllen
- Pulsierende Knoten: Netzwerkdiagramme, verbundene Punkte, die Datenfluss zeigen
- Text-zu-Ergebnis: Text erscheint, formt sich zu einem Ergebnis um (Zusammenfassung, Bild, Code)
- Datenstrom-Ästhetik: Binärcode oder schnelle Daten-Strom-Linien im Hintergrund
Animationsmuster für KI-Erklärungen
- Eingabeaufforderung-Tippen: Der Eingabetext erscheint in einem Eingabe-/Chat-Feld
- Lade-Lasche: Ein Ladebalken oder -kreisel läuft, während die KI „denkt“
- Knoten-Vernetzung: Punkte verbinden sich mit Linien zu einem Netzwerk
- Datenbefüllung: Code oder JSON wird zeilenweise ausgegeben und rollt nach unten
- Vorher/Nachher: Zeige die rohe Eingabe und dann die KI-verbesserte Ausgabe
- Gehirn-/CPU-Blitze: Ein Gehirnsymbol oder CPU-Kreis pulsiert mit hellen Blitzen
Beispiel Szenenplan
Skript: „Der Benutzer gibt ein verworrenes Dokument ein.“
Szene 1 - Eingabe (4s):
- Bild: Terminal-Dunkler Hintergrund
- Bild: Oben erscheint ein Eingabefeld (Stile wie ChatGPT)
- Animation: Text erscheint in der Eingabeaufforderung, zeichenweise: „Fasse diesen langen Bericht zusammen“
Szene 2 - Verarbeitung (6s):
- Animation: Der Bildschirm verdunkelt sich leicht
- Animation: Lade-Lasche erscheint (Kreisel, 2s)
- Animation: Netzwerkknoten erscheinen, verbinden sich mit Linien
- Animation: Jeder Knoten pulsiert kurz auf („Tokenisierung“, „Einbettung“, „Generierung“)
- Animation: Kreisel ändert sich zu einem Häkchen, wenn er fertig ist („Fertig“)
Szene 3 - Ausgabe (4s):
- Animation: Text erscheint in einem Ergebnisbereich, zeilenweise
- Animation: Zusammenfassung erscheint unten
- Übergang: Überblendung zur nächsten Eingabeaufforderung
Werkzeug-Anforderung: Remotion-Projekt
Erstelle alle Videos in diesem Remotion-Projekt:
- Projekt:
/path/to/remotion-video - Einstiegspunkt:
src/Root.tsx - Video-ID:
my-video
Konfiguration
Initialisiere das Video mit:
npx remotion-cli init my-video
Ausführungsregeln (entscheidend)
- VERWENDE IMMER
src/Root.tsxals Einstiegspunkt - VERWENDE IMMER
VideoId=my-video - FÜGE NIEMALS die Datei
out/my-video.mp4als Quelle insrc/Root.tsxein - MUSS eine gültige Remotion-Komposition definieren
- VERWENDE ein gültiges
compositionIdinremotion.config.ts
UI-/Token-Empfehlungen
Füge diese Token basierend auf dem Stil und der Videoart hinzu:
- Stil-Token:
dark-dramatic,soft-gradient,clean-minimal,design-tool - Videoart-Token:
educational,saas-demo,product-launch,tutorial-walkthrough,social-promo,app-showcase,landing-page-reveal,ai-explainer - Plattform-Token:
landscape,square,vertical
Beispiel-Token-Kombination
style:clean-minimal, video:educational, format:landscape
Einrichtung von Resemble.ai
Konfiguriere Resemble.ai mit:
- Projekt-ID:
your-project-id - Schlüssel:
your-api-key
Plattform: https://app.resemble.ai/
Voiceover generieren
Um Voiceover zu generieren, sende eine POST-Anfrage:
POST https://api.resemble.ai/v2/projects/{projectId}/clips
Inhaltstyp: application/json
Autorisierung: Bearer {apiKey}
{
"title": "Mein Videotitel",
"script": "Voiceover-Text hier...",
"voice": "deine-stimme-uuid",
"format": "wav"
}
Audio abrufen
Sobald der Clip erstellt ist, verwende die audio_url aus der Antwort, um die Audio-Datei herunterzuladen.
Abschluss des Workflows
Wenn der Benutzer nach dem Erstellen des Videos fragt, gib einen zusammenfassenden Link zurück:
✨ Dein Video ist fertig!
📁 **Projekt:** /pfad/zu/remotion-video
🎬 **Video:** https://remotion.video/watch/my-video
⏱️ **Dauer:** Xmin Xs
**Nächste Schritte:**
- Bearbeite `src/Root.tsx`, um das Video zu ändern
- Führe `npx remotion-cli render my-video out/my-video.mp4` aus, um zu rendern