Launch-Video
Erstellen Sie einen erstklassigen, energiegeladenen 15–60s Launch-Film, der den Scroll-Stopp erzwingt und konvertiert. Bauen Sie den klassischen Bogen auf — Hook → Tease → Reveal → Feature-Montage → End-Card CTA — im Takt der Musik geschnitten, und exportieren Sie für jede Plattform-Ausrichtung.
Wann verwenden
- Produkteinführungen, Feature-Ankündigungen, Trailer, Hype-Reels (15–60s).
- "Sizzle"-Hero-Videos für eine Landing Page.
- Beat-synchrone Enthüllungen, bei denen der Markenmoment auf den Drop fällt.
Der Bogen
| Beat | Aufgabe | Typischer Anteil (bei 30s) |
|---|---|---|
| Hook (0–3s) | Ein auffälliges Bild/eine Bewegung, die den Scroll-Stopp erzwingt | 0–3s |
| Tease | Das Produkt andeuten; Neugier wecken, beat-synchron | 3–9s |
| Reveal | Produkt/Logo trifft auf den Musik-Drop | 9–13s |
| Feature-Montage | Schnell, kinetisch, ein Nutzen pro Einstellung | 13–25s |
| End Card | Logo + Tagline + CTA, sauber gehalten | 25–30s |
Skalieren Sie die gleichen Proportionen für 15s (enger) oder 60s (längere Montage, niemals ein längerer Hook).
Zwei nicht verhandelbare Regeln
- Sounddesign führt Bild. Sperren Sie zuerst den Track, markieren Sie die Beats und den Drop, dann schneiden Sie die Bilder auf diese Markierungen. Vertonen Sie niemals einen fertigen Schnitt – die Enthüllung landet auf dem Drop, nicht in seiner Nähe.
- Qualität vor Quantität. Einige makellose Einstellungen schlagen viele mittelmäßige. Entfernen Sie jede Einstellung, die nicht erstklassig ist.
Beat-synchrone Enthüllung auf den Drop
Finden Sie die genaue Timecode des Drops im Audio, dann timen Sie die Enthüllung so, dass die Marke in genau diesem Frame vollständig erscheint, mit einer Mikro-Überschwingung für den Effekt.
import gsap from "gsap";
const DROP = 9.0; // Sekunden, gemessen vom Track
const tl = gsap.timeline({ paused: true });
// Tease baut Spannung bis zum Drop auf
tl.to(".tease", { opacity: 1, scale: 1.05, duration: DROP, ease: "power1.in" })
// Reveal SCHNPPT auf dem Drop-Frame
.set(".logo", { opacity: 1 }, DROP)
.fromTo(".logo", { scale: 1.18 }, { scale: 1.0, duration: .18, ease: "power3.out" }, DROP)
.fromTo(".flash", { opacity: .9 }, { opacity: 0, duration: .25 }, DROP); // weißer Blitz
audio.addEventListener("play", () => tl.play());
Schneiden Sie auf Transienten, nicht auf einem festen Raster: die härtesten Schnitte fallen auf Kick/Snare-Hits; beschleunigen Sie (Zeitneuzuordnung) in den Drop, dann harter Schnitt aus ihm heraus.
Kinetische Feature-Montage
Ein Nutzen pro Einstellung, ~0.6–1.0s pro Einstellung, harte Schnitte auf den Beat. Jede Einstellung = ein fettes Keyword + ein einzelnes unterstützendes Bild.
.feature { opacity:0; }
.feature.in .kw { animation: pop .35s cubic-bezier(.22,1,.36,1) forwards; }
.feature.in .word { display:inline-block; }
@keyframes pop { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }
// Einstellungen von Beat-Markierungen aus dem Track steuern
const beats = [13.0, 13.8, 14.6, 15.4, 16.2]; // Sekunden
beats.forEach((t, i) => scheduleAt(t, () => showFeature(i)));
Behalten Sie eine einheitliche Bewegungssprache in der gesamten Montage bei (gleiche Eingangskurve, gleicher Ausgang), damit die Geschwindigkeit als Selbstvertrauen und nicht als Chaos wahrgenommen wird.
End Card
Halten Sie das Logo + Tagline + CTA für ≥2s ruhig und sauber. Keine geschäftige Bewegung, die mit dem CTA konkurriert; lassen Sie die Marke zur Ruhe kommen. Setzen Sie den Markenmoment auf den stärksten verbleibenden Beat, dann ein knackiger Button/URL.
Multi-Aspekt-Export
Komponieren Sie mit einer zentralen Sicherheitszone, damit ein Master sauber auf alle Aspekte zugeschnitten werden kann.
| Format | Verwendung | Auflösung | Sicherheitszone |
|---|---|---|---|
| 16:9 | YouTube, Landing-Hero, X | 1920×1080 | wichtige Inhalte innerhalb der mittleren 90% halten |
| 9:16 | Reels, TikTok, Shorts, Stories | 1080×1920 | Text innerhalb der mittleren 80% Höhe; obere 12% / untere 18% (UI) vermeiden |
| 1:1 | Feed-Beiträge | 1080×1080 | mittleres Quadrat des 16:9-Frames |
Gestalten Sie das Hero/Logo/CTA innerhalb des 1:1-Zentrumsquadrats, damit es jeden Zuschnitt übersteht. Rendern Sie den 16:9-Master, dann gestalten Sie (nicht nur letterboxen) 9:16 und 1:1 aus demselben Projekt neu.
Ausgabe-Checkliste
- Track zuerst gesperrt; Enthüllung landet exakt auf dem Drop.
- Hook verdient die ersten 3 Sekunden.
- Montage: ein Nutzen pro Einstellung, harte Schnitte auf Beats, einheitliche Bewegungssprache.
- End-Card hält ≥2s mit einem klaren CTA.
- 16:9 + 9:16 + 1:1 Exporte, Schlüsselinhalte in der zentralen Sicherheitszone.
- Nur Premium-Einstellungen – nichts Mittelmäßiges überlebt den Schnitt.
Liefern & Prüfen (gerenderte Standbilder → MP4)
Verpacktes Helfer-Skript (
scripts/): Kacheln Sie Ihre Standbilder mitscripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, dann überprüfen Sie die Codierung mitscripts/probe-mp4.sh out.mp4 [BxH] [fps]. Siehescripts/README.md.
Wenn der Launch-Film in Remotion erstellt/gerendert wird, behandeln Sie ihn als die schwere Stufe: registrieren Sie eine <Composition> (+ zod schema + defaultProps), steuern Sie jeden Wert über useCurrentFrame() — keine GSAP-Timelines / Audio-Event-Callbacks / Date.now() / Math.random() zur Renderzeit (backen Sie Beat- + Drop-Timecodes in die Props). Ausgabe = das gerenderte out/*.mp4 pro Format (plus das Projekt).
Prüfschleife — Standbilder rendern → inspizieren → codieren. Mustern Sie den Bogen mit den ausgelieferten Props (echte Headline/Tagline/CTA), nicht nur mit defaultProps.
# Frame-genaue Standbilder über Hook → Reveal → End-Card
npx remotion still Launch out/f-hook.png --frame=24 --props=props/launch.json # Hook verdient erste 3s
npx remotion still Launch out/f-reveal.png --frame=270 --props=props/launch.json # Logo SCHNPPT auf dem Drop-Frame
npx remotion still Launch out/f-end.png --frame=899 --props=props/launch.json # End-Card: Logo+Tagline+CTA, sauber gehalten
# jedes inspizieren: Wiedergabetreue (Produkt/Logo, Tagline, CTA-Text exakt, Markenfarben richtig, Enthüllung am Drop-Frame)
# UND Artefakte (Textüberlauf, außerhalb der Leinwand, CTA im unteren Drittel von 9:16, fehlende Schriftart, hängengebliebener Flash-Frame)
Multi-Format — den Master in JEDEM Format prüfen, bevor alle codiert werden. Ein Neurahmen-Fehler (Hero aus der Sicherheitszone geschoben) wiederholt sich über jedes Format; fangen Sie ihn einmal.
for ar in 16x9 9x16 1x1; do # Reveal + End-Card pro Format prüfen
npx remotion still Launch "out/reveal-${ar}.png" --frame=270 \
--props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
# Standbilder sauber in allen Formaten? → dann jedes codieren:
for ar in 16x9 9x16 1x1; do
npx remotion render Launch "out/launch-${ar}.mp4" --props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
npx remotion render Launch out/demo.gif --codec=gif --props=props/launch.json # README-Demo
Bevor Sie fertig sind:
npx remotion stillrendert sauber bei Hook / Reveal / End-Card — keine Fehler, keine fehlenden Schriftarten/Assets.- Logo/Tagline/CTA-Text exakt, Markenfarben richtig; Enthüllung landet auf dem Drop-Frame; Schlüsselinhalte innerhalb der zentralen Sicherheitszone, frei vom unteren Drittel von 9:16.
- Nur Frame-gesteuert — keine GSAP/Audio-Callback-Timings,
Date.now()oderMath.random()(Beats/Drop in Props eingebacken). - Ausgelieferte Props rendern korrekt (nicht nur
defaultProps); die End-Card hält ≥2s mit einem CTA. - Master in 16:9 + 9:16 + 1:1 vor der Codierung überprüft; MP4s spielen ab; (optional) GIF für die README.
Referenzdateien
references/launch-structure.md— eine vollständige, schrittweise Vorlage mit Timecodes für einen 30s-Film (skalierbar auf 15–60s), beat-synchronem Reveal-Timing, Rezepten für kinetische Montage-Einstellungen, dem Sounddesign-führt-Bild-Workflow und detaillierten Multi-Format-Sicherheitsbereichskarten für 16:9 / 9:16 / 1:1.