Vollständiger Leitfaden zum Rendervid Template-System. Lernen Sie, wie Sie JSON-Video-Templates erstellen, dynamische Variablen mit {{variable}}-Syntax verwenden, über 40 Animationsvorlagen, 17 Szenenübergänge und über 30 Easing-Funktionen konfigurieren.
Rendervid ist eine programmatische Video-Rendering-Engine, die auf einem deklarativen, JSON-basierten Template-System aufbaut. Anstatt Videos manuell in einer Zeitleiste zu bearbeiten, definieren Sie jeden Aspekt Ihres Videos – Szenen, Ebenen, Animationen, Übergänge und Ausgabeeinstellungen – in einem einzigen JSON-Dokument. Dieser Ansatz macht Templates zustandslos, versionskontrollierbar und maschinell generierbar und öffnet die Tür für KI-gesteuerte Videoproduktion, Batch-Rendering-Pipelines und vollautomatisierte Content-Workflows.
Dieser Leitfaden behandelt das komplette Rendervid Template-System von oben bis unten: Root-Level-Konfiguration, Ausgabeeinstellungen, das Variablen- und Eingabesystem, Szenen und Komposition, alle acht Ebenentypen, über 40 Animationsvorlagen, über 30 Easing-Funktionen, 17 Szenenübergänge, visuelle Effekte, Schriftartenkonfiguration und Ausgabeformate.
Jedes Rendervid-Template ist ein JSON-Objekt mit einem wohldefinierten Satz von Root-Level-Feldern. Hier ist das Grundgerüst eines vollständigen Templates:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| Feld | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
name | string | Ja | Menschenlesbarer Template-Bezeichner |
output | object | Ja | Video- oder Bild-Ausgabekonfiguration (Abmessungen, fps, Dauer, Format) |
inputs | array | Nein | Dynamische Eingabedefinitionen für Template-Variablen |
composition | object | Ja | Enthält das scenes-Array, das alle visuellen Inhalte definiert |
fonts | object | Nein | Google Fonts und benutzerdefinierte Schriftartendeklarationen |
customComponents | object | Nein | Registrierte benutzerdefinierte Ebenenkomponenten |
defaults | object | Nein | Standardwerte, die auf alle Ebenen angewendet werden, sofern nicht überschrieben |
Das Feld name dient organisatorischen Zwecken – es beeinflusst das Rendering nicht. Die Felder output und composition sind die beiden Säulen, die jedes Template haben muss. Alles andere ist optional, schaltet aber leistungsstarke Funktionen frei.
Das output-Objekt steuert die endgültig gerenderte Datei: ihr Format, ihre Abmessungen, Bildrate, Dauer und Hintergrundfarbe.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| Feld | Typ | Standard | Beschreibung |
|---|---|---|---|
type | string | "video" | Ausgabetyp: "video" oder "image" |
width | number | 1920 | Breite in Pixeln (bis zu 7680 für 8K) |
height | number | 1080 | Höhe in Pixeln (bis zu 4320 für 8K) |
fps | number | 30 | Bilder pro Sekunde (1-120) |
duration | number | – | Gesamtdauer in Sekunden |
backgroundColor | string | "#000000" | Hintergrundfarbe als Hex, RGB oder benannte Farbe |
Hier sind Ausgabekonfigurationen für beliebte Formate:
1080p Full HD (YouTube, allgemeiner Gebrauch):
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 vertikal):
{
"type": "video",
"width": 1080,
"height": 1920,
"fps": 30,
"duration": 30,
"backgroundColor": "#FFFFFF"
}
4K UHD:
{
"type": "video",
"width": 3840,
"height": 2160,
"fps": 60,
"duration": 120,
"backgroundColor": "#000000"
}
Open Graph / Social Share Image:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
Bei Bildausgabe werden fps und duration ignoriert – der Renderer erfasst ein einzelnes Bild.
Das Eingabe- und Variablensystem macht Rendervid-Templates wiederverwendbar. Anstatt Text, Farben oder URLs in Ihr Template fest zu codieren, definieren Sie Eingaben und referenzieren sie mit der {{variableName}}-Syntax überall im Template.
Eingaben werden im Top-Level-inputs-Array deklariert. Jedes Eingabeobjekt beschreibt eine einzelne Variable:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Titel",
"description": "Haupttiteltext, der in der Intro-Szene angezeigt wird",
"required": true,
"default": "Hello World"
},
{
"key": "brandColor",
"type": "color",
"label": "Markenfarbe",
"description": "Primäre Markenfarbe für Hintergründe und Akzente",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Untertitel anzeigen",
"description": "Untertitelsichtbarkeit umschalten",
"required": false,
"default": true
}
]
}
| Feld | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
key | string | Ja | Eindeutiger Bezeichner, der in {{key}}-Referenzen verwendet wird |
type | string | Ja | Datentyp: string, number, boolean, color, url, array |
label | string | Nein | Menschenlesbares Label für UI-Rendering |
description | string | Nein | Erklärung, was diese Eingabe steuert |
required | boolean | Nein | Ob die Eingabe zur Render-Zeit bereitgestellt werden muss |
default | any | Nein | Fallback-Wert, wenn keine Eingabe bereitgestellt wird |
string – Freiformtext. Verwenden Sie dies für Titel, Beschreibungen, Bildunterschriften oder beliebige Textinhalte.number – Numerische Werte. Verwenden Sie dies für Dauern, Größen, Positionen, Deckkraftstufen oder Zählwerte.boolean – True/False-Schalter. Verwenden Sie dies für bedingte Sichtbarkeit, Feature-Flags oder Ein/Aus-Schalter.color – Farbwerte in Hex (#FF5733), RGB (rgb(255,87,51)) oder benanntem Format. Verwenden Sie dies für Hintergründe, Textfarben und Akzente.url – Gültige URL-Strings. Verwenden Sie dies für Bildquellen, Videoquellen, Links und Schriftarten-URLs.array – Listen von Werten. Verwenden Sie dies für Bildergalerien, Textlisten, Folieninhalte oder beliebige wiederholte Daten.Sobald Eingaben definiert sind, referenzieren Sie sie überall im Template mit doppelten geschweiften Klammern:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
Variablen werden zur Render-Zeit aufgelöst. Wenn Sie die Rendervid-API oder CLI aufrufen, übergeben Sie die tatsächlichen Werte:
{
"title": "Sommerschlussverkauf 2026",
"brandColor": "#E63946",
"titleSize": 72
}
Hier ist ein vollständiges Template mit mehreren Eingabetypen, die zusammenarbeiten:
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Produktname",
"description": "Name des beworbenen Produkts",
"required": true,
"default": "Produkt"
},
{
"key": "price",
"type": "number",
"label": "Preis",
"description": "Produktpreis, der im Video angezeigt wird",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "Produktbild-URL",
"description": "URL zum Produktbild",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Akzentfarbe",
"description": "Farbe für CTA-Buttons und Hervorhebungen",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "Verkaufs-Badge anzeigen",
"description": "Ob das Verkaufs-Badge-Overlay angezeigt werden soll",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Produktmerkmale",
"description": "Liste der Merkmalsstichpunkte",
"required": false,
"default": ["Merkmal 1", "Merkmal 2", "Merkmal 3"]
}
],
"composition": {
"scenes": [
{
"name": "hero",
"duration": 15,
"layers": [
{
"type": "image",
"src": "{{productImage}}",
"position": { "x": 540, "y": 400 },
"size": { "width": 600, "height": 600 }
},
{
"type": "text",
"text": "{{productName}}",
"style": { "fontSize": 48, "fontWeight": 700, "color": "#FFFFFF" },
"position": { "x": 540, "y": 80 }
},
{
"type": "text",
"text": "${{price}}",
"style": { "fontSize": 64, "fontWeight": 900, "color": "{{accentColor}}" },
"position": { "x": 540, "y": 900 }
}
]
}
]
}
}
Dieses einzelne Template kann Tausende einzigartiger Produktvideos generieren, indem einfach die Eingabewerte zur Render-Zeit geändert werden – keine Template-Änderungen erforderlich.
Das composition-Objekt ist der Ort, an dem der Inhalt Ihres Videos lebt. Es enthält ein scenes-Array, und jede Szene repräsentiert ein eigenständiges Segment des Videos mit eigener Dauer, Ebenen und Übergang.
{
"composition": {
"scenes": [
{
"name": "intro",
"duration": 5,
"transition": {
"type": "fade",
"duration": 1
},
"layers": [ ... ]
},
{
"name": "main-content",
"duration": 20,
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "left"
},
"layers": [ ... ]
},
{
"name": "outro",
"duration": 5,
"layers": [ ... ]
}
]
}
}
| Feld | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
name | string | Nein | Bezeichner für die Szene (für Lesbarkeit und Debugging) |
duration | number | Ja | Szenenlänge in Sekunden |
transition | object | Nein | Übergangseffekt beim Betreten dieser Szene von der vorherigen |
layers | array | Ja | Geordnetes Array von Ebenenobjekten, von unten nach oben gerendert |
Szenen werden nacheinander abgespielt. Die gesamte Videodauer ist die Summe aller Szenendauern (minus etwaiger Übergangsüberlappungen). Ebenen innerhalb einer Szene werden in Array-Reihenfolge gerendert – die erste Ebene sitzt ganz unten im visuellen Stapel, und die letzte Ebene sitzt oben.
Wenn kein Übergang angegeben ist, verwendet die Szene standardmäßig einen harten cut.
Rendervid unterstützt acht verschiedene Ebenentypen. Jeder Ebenentyp dient einem bestimmten Zweck und akzeptiert zusätzlich zur gemeinsamen Basiskonfiguration eigene Eigenschaften.
Jede Ebene unterstützt unabhängig vom Typ diese Basiseigenschaften:
{
"position": { "x": 100, "y": 100 },
"size": { "width": 500, "height": 200 },
"rotation": 0,
"scale": { "x": 1, "y": 1 },
"anchor": { "x": 0.5, "y": 0.5 },
"opacity": 1,
"blendMode": "normal",
"from": 0,
"duration": -1,
"filters": [],
"style": {},
"className": ""
}
| Eigenschaft | Typ | Standard | Beschreibung |
|---|---|---|---|
position | object | {x: 0, y: 0} | X/Y-Koordinaten in Pixeln |
size | object | – | Breite und Höhe in Pixeln |
rotation | number | 0 | Rotationswinkel in Grad |
scale | object | {x: 1, y: 1} | Skalierungsmultiplikator für X- und Y-Achsen |
anchor | object | {x: 0.5, y: 0.5} | Ankerpunkt für Transformationen (0-1 Bereich, 0.5 = Mitte) |
opacity | number | 1 | Ebenendeckkraft (0 = transparent, 1 = undurchsichtig) |
blendMode | string | "normal" | CSS-Mischmodus für Compositing |
from | number | 0 | Startzeit in Sekunden (relativ zum Szenenbeginn) |
duration | number | -1 | Ebenendauer in Sekunden (-1 = volle Szenendauer) |
filters | array | [] | Array von visuellen Filterobjekten |
style | object | {} | Zusätzliche CSS-ähnliche Stileigenschaften |
className | string | "" | CSS-Klassenname für benutzerdefiniertes Styling |
text – Rendert gestylten Text mit voller Kontrolle über Schriftart, Größe, Farbe, Ausrichtung, Zeilenhöhe, Buchstabenabstand, Textschatten und mehr. Unterstützt die {{variable}}-Syntax für dynamische Inhalte.
image – Zeigt statische Bilder von URLs oder lokalen Pfaden an. Unterstützt Zuschneiden, Object-Fit-Modi, Rahmenradius und Bildfilter.
video – Bettet Videoclips in eine Szene ein. Unterstützt Trimmen (Start/Ende), Lautstärkeregelung, Wiedergabegeschwindigkeit, Looping und Stummschaltung.
shape – Rendert geometrische Primitive: Rechtecke, Kreise, Ellipsen, Linien und Polygone. Unterstützt Füllung, Strich, Rahmenradius, Verläufe und Schatten.
audio – Fügt einer Szene Audiospuren hinzu. Unterstützt Lautstärke, Ein-/Ausblenden, Trimmen und Looping. Audioebenen haben keine visuelle Darstellung.
group – Eine Container-Ebene, die untergeordnete Ebenen enthält. Gruppen ermöglichen es Ihnen, Transformationen, Animationen und Effekte auf mehrere Ebenen gleichzeitig anzuwenden.
lottie – Rendert Lottie/Bodymovin-JSON-Animationen. Unterstützt Wiedergabegeschwindigkeit, Looping und Segmentsteuerung zum Abspielen bestimmter Frame-Bereiche.
custom – Lädt registrierte benutzerdefinierte Komponenten, die im Feld customComponents definiert sind. Verwenden Sie dies für wiederverwendbare, parametrisierte Ebenenvorlagen.
Für eine detaillierte Konfiguration jedes Ebenentyps, einschließlich aller verfügbaren Eigenschaften und Codebeispiele, siehe die Rendervid Components Reference .
Rendervid enthält über 40 integrierte Animationsvorlagen, die in vier Kategorien organisiert sind: entrance, exit, emphasis und keyframe. Animationen werden an jede Ebene angehängt und steuern, wie diese Ebene erscheint, verschwindet oder sich während ihrer Lebensdauer verhält.
{
"type": "text",
"text": "Animierter Titel",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| Feld | Typ | Standard | Beschreibung |
|---|---|---|---|
type | string | – | Animationskategorie: entrance, exit, emphasis, keyframe |
effect | string | – | Vorlagenname (z.B. fadeInUp, pulse, bounceOut) |
duration | number | 30 | Dauer in Frames |
delay | number | 0 | Verzögerung vor Animationsstart, in Frames |
easing | string | "ease" | Easing-Funktionsname |
loop | number | 0 | Anzahl der Schleifen (0 = keine Schleife, -1 = unendlich) |
alternate | boolean | false | Richtung bei alternativen Schleifen umkehren |
Eingangsanimationen steuern, wie eine Ebene auf dem Bildschirm erscheint. Sie laufen einmal, wenn die Startzeit der Ebene erreicht ist.
| Vorlage | Beschreibung |
|---|---|
fadeIn | Einfaches Deckkraft-Einblenden von 0 auf 1 |
fadeInUp | Blendet ein, während nach oben gleitet |
fadeInDown | Blendet ein, während nach unten gleitet |
fadeInLeft | Blendet ein, während von links gleitet |
fadeInRight | Blendet ein, während von rechts gleitet |
slideInUp | Gleitet von unterhalb des Frames ein |
slideInDown | Gleitet von oberhalb des Frames ein |
slideInLeft | Gleitet vom linken Rand ein |
slideInRight | Gleitet vom rechten Rand ein |
scaleIn | Skaliert von 0 auf volle Größe |
zoomIn | Zoomt von einer kleineren Skala mit leichtem Überschwingen ein |
rotateIn | Rotiert von einem versetzten Winkel in Position |
bounceIn | Springt mit elastischem Überschwingen in Position |
flipInX | 3D-Flip auf der X-Achse (horizontaler Flip) |
flipInY | 3D-Flip auf der Y-Achse (vertikaler Flip) |
typewriter | Zeichen erscheinen nacheinander (Textebenen) |
revealLeft | Masken-Enthüllung gleitet von links |
revealRight | Masken-Enthüllung gleitet von rechts |
revealUp | Masken-Enthüllung gleitet nach oben |
revealDown | Masken-Enthüllung gleitet nach unten |
Ausgangsanimationen steuern, wie eine Ebene verschwindet. Sie laufen am Ende der Ebenendauer.
| Vorlage | Beschreibung |
|---|---|
fadeOut | Einfaches Deckkraft-Ausblenden von 1 auf 0 |
slideOutUp | Gleitet durch die Oberseite des Frames aus |
slideOutDown | Gleitet durch die Unterseite des Frames aus |
scaleOut | Skaliert von voller Größe auf 0 |
zoomOut | Zoomt auf eine kleinere Skala und blendet aus |
rotateOut | Rotiert aus der Position zu einem versetzten Winkel |
bounceOut | Springt mit elastischem Überschwingen nach außen, bevor es verschwindet |
flipOutX | 3D-Flip aus auf der X-Achse |
flipOutY | 3D-Flip aus auf der Y-Achse |
Hervorhebungsanimationen lenken die Aufmerksamkeit auf eine Ebene, während sie sichtbar bleibt. Sie funktionieren gut mit Looping.
| Vorlage | Beschreibung |
|---|---|
pulse | Rhythmisches Skalierungs-Pulsieren (wächst und schrumpft) |
shake | Schnelles horizontales Schütteln |
bounce | Vertikale Hüpfbewegung |
swing | Pendelartige Schwingrotation |
wobble | Außer-Achse-Wackeln, das Rotation und Translation kombiniert |
flash | Schnelle Deckkraft-Blitze |
rubberBand | Elastischer Dehnungs- und Schnapp-Effekt |
heartbeat | Doppelpuls-Herzschlagrhythmus |
float | Sanfte Auf- und Ab-Schwebebewegung |
spin | Kontinuierliche 360-Grad-Rotation |
Für volle kreative Kontrolle ermöglichen Keyframe-Animationen die Definition benutzerdefinierter Frame-für-Frame-Eigenschaftsänderungen:
{
"type": "keyframe",
"keyframes": [
{ "frame": 0, "opacity": 0, "x": -100 },
{ "frame": 15, "opacity": 1, "x": 0 },
{ "frame": 30, "opacity": 1, "x": 0 },
{ "frame": 45, "opacity": 0, "x": 100 }
],
"easing": "easeInOutCubic"
}
Keyframe-Animationen können jede numerische Eigenschaft animieren: opacity, x, y, rotation, scaleX, scaleY und mehr. Jeder Keyframe gibt eine Frame-Nummer und die Eigenschaftswerte bei diesem Frame an. Der Renderer interpoliert zwischen Keyframes unter Verwendung der angegebenen Easing-Funktion.
Eine einzelne Ebene kann mehrere Animationen haben. Zum Beispiel eine Eingangsanimation gefolgt von einer Hervorhebungsschleife, dann eine Ausgangsanimation:
{
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 20,
"easing": "easeOutCubic"
},
{
"type": "emphasis",
"effect": "pulse",
"duration": 30,
"delay": 20,
"loop": -1
},
{
"type": "exit",
"effect": "fadeOut",
"duration": 15,
"easing": "easeInCubic"
}
]
}
Easing-Funktionen steuern die Änderungsrate während einer Animation und bestimmen, ob sich Bewegung linear, glatt, fedrig oder elastisch anfühlt. Rendervid enthält über 30 integrierte Easing-Funktionen.
| Funktion | Beschreibung |
|---|---|
linear | Konstante Geschwindigkeit von Anfang bis Ende, keine Beschleunigung |
ease | Standard-CSS-ähnliches Easing mit sanfter Beschleunigung und Verlangsamung |
easeIn | Startet langsam, beschleunigt zum Ende hin |
easeOut | Startet schnell, verlangsamt zum Ende hin |
easeInOut | Beschleunigt in der ersten Hälfte, verlangsamt in der zweiten |
| Funktion | Beschreibung |
|---|---|
easeInQuad | Quadratische Beschleunigung (t^2) |
easeOutQuad | Quadratische Verlangsamung |
easeInOutQuad | Quadratische Beschleunigung dann Verlangsamung |
| Funktion | Beschreibung |
|---|---|
easeInCubic | Kubische Beschleunigung (t^3) – ausgeprägter als quadratisch |
easeOutCubic | Kubische Verlangsamung – glatter und natürlich wirkender Stopp |
easeInOutCubic | Kubisches Ease-in und Ease-out – das am häufigsten verwendete Easing |
| Funktion | Beschreibung |
|---|---|
easeInQuart | Quartische Beschleunigung (t^4) |
easeOutQuart | Quartische Verlangsamung |
easeInOutQuart | Quartisches Ease-in und Ease-out |
| Funktion | Beschreibung |
|---|---|
easeInQuint | Quintische Beschleunigung (t^5) – sehr scharfer Start |
easeOutQuint | Quintische Verlangsamung – sehr scharfer Stopp |
easeInOutQuint | Quintisches Ease-in und Ease-out |
| Funktion | Beschreibung |
|---|---|
easeInSine | Sinus-basierte Beschleunigung – die sanfteste Easing-Kurve |
easeOutSine | Sinus-basierte Verlangsamung |
easeInOutSine | Sinus-basiertes Ease-in und Ease-out |
| Funktion | Beschreibung |
|---|---|
easeInExpo | Exponentielle Beschleunigung – nahezu flach dann scharf |
easeOutExpo | Exponentielle Verlangsamung – scharf dann nahezu flach |
easeInOutExpo | Exponentielles Ease-in und Ease-out |
| Funktion | Beschreibung |
|---|---|
easeInCirc | Kreisförmige Beschleunigungskurve |
easeOutCirc | Kreisförmige Verlangsamungskurve |
easeInOutCirc | Kreisförmiges Ease-in und Ease-out |
| Funktion | Beschreibung |
|---|---|
easeInBack | Zieht leicht zurück, bevor es vorwärts beschleunigt (Antizipation) |
easeOutBack | Überschießt das Ziel und setzt sich dann zurück (Überschwingen) |
easeInOutBack | Antizipation beim Eintritt, Überschwingen beim Austritt |
| Funktion | Beschreibung |
|---|---|
easeInElastic | Elastisches Wackeln bei Beschleunigung – federartiges Aufziehen |
easeOutElastic | Elastisches Wackeln bei Verlangsamung – federartiges Schnappen |
easeInOutElastic | Elastisch an beiden Enden |
| Funktion | Beschreibung |
|---|---|
easeInBounce | Hüpfeffekt beim Eintritt – wie ein umgekehrt fallender Ball |
easeOutBounce | Hüpfeffekt beim Austritt – wie ein Ball, der auf den Boden trifft |
easeInOutBounce | Hüpfen an beiden Enden |
easeOutCubic oder easeOutQuart für natürlich wirkende EingängeeaseOutElastic oder easeOutBack für verspieltes ÜberschwingeneaseInOutSine für sanfte, kontinuierliche BewegungeaseInExpo für Aufbauten, easeOutExpo für schnappige StoppseaseOutBounce für schwerkraftähnliche EffekteÜbergänge steuern, wie eine Szene in die nächste übergeht. Rendervid bietet 17 Übergangstypen, die von einfachen Schnitten bis zu kinematografischen 3D-Effekten reichen.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
Das transition-Objekt wird auf der eingehenden Szene platziert (die Szene, zu der übergegangen wird). Die direction-Eigenschaft gilt nur für gerichtete Übergänge wie slide, wipe und push.
| Übergang | Beschreibung |
|---|---|
cut | Sofortiger Wechsel ohne visuellen Effekt (Standard) |
fade | Überblendung zwischen Szenen – die ausgehende Szene blendet aus, während die eingehende Szene einblendet |
zoom | Zoomt in die ausgehende Szene, während die eingehende Szene erscheint |
slide | Die eingehende Szene gleitet über die ausgehende Szene aus einer konfigurierbaren Richtung (links, rechts, oben, unten) |
wipe | Ein Wisch mit harter Kante enthüllt die eingehende Szene und bewegt sich in der angegebenen Richtung über den Frame |
push | Die eingehende Szene schiebt die ausgehende Szene in der angegebenen Richtung aus dem Bildschirm |
rotate | Die ausgehende Szene rotiert weg, während die eingehende Szene hinein rotiert |
flip | 3D-Flip-Übergang – der Frame flippt wie eine Karte, um die nächste Szene zu enthüllen |
blur | Die ausgehende Szene verschwimmt, während die eingehende Szene scharf wird |
circle | Eine kreisförmige Maske expandiert von der Mitte (oder einem bestimmten Punkt), um die nächste Szene zu enthüllen |
glitch | Digitaler Glitch-Verzerrungseffekt mit chromatischer Aberration und Verschiebung |
dissolve | Auflösung auf Pixelebene, bei der einzelne Pixel zufällig zwischen Szenen übergehen |
cube | 3D-Würfelrotation – die Szenen befinden sich auf benachbarten Flächen eines rotierenden Würfels |
swirl | Spiralverzerrung, die die ausgehende Szene in die eingehende Szene wirbelt |
diagonal-wipe | Ein diagonaler Wisch mit harter Kante, der sich von einer Ecke zur gegenüberliegenden bewegt |
iris | Kreisförmige Iris, die sich wie eine Kamerablende öffnet oder schließt |
crosszoom | Beide Szenen zoomen gleichzeitig – die ausgehende zoomt ein, die eingehende zoomt aus |
Kinematografisches Fade mit langer Überblendung:
{
"transition": {
"type": "fade",
"duration": 2
}
}
Gleiten von rechts (üblich für sequenzielle Inhalte):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
3D-Würfelrotation (dynamisches, modernes Gefühl):
{
"transition": {
"type": "cube",
"duration": 1
}
}
Glitch-Effekt (energetisch, technikaffin):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
Rendervid-Ebenen unterstützen eine Reihe von visuellen Effekten durch Filter, Mischmodi, Schatten und Transformationen.
Filter werden über das filters-Array auf jede Ebene angewendet. Jeder Filter ist ein Objekt mit einem type und value:
{
"filters": [
{ "type": "blur", "value": 5 },
{ "type": "brightness", "value": 1.2 },
{ "type": "contrast", "value": 1.1 },
{ "type": "grayscale", "value": 0.5 },
{ "type": "saturate", "value": 1.5 }
]
}
| Filter | Wertebereich | Beschreibung |
|---|---|---|
blur | 0+ (Pixel) | Gaußscher Weichzeichner – höhere Werte erzeugen mehr Unschärfe |
brightness | 0+ (Multiplikator) | 0 = schwarz, 1 = normal, 2 = doppelte Helligkeit |
contrast | 0+ (Multiplikator) | 0 = grau, 1 = normal, 2 = doppelter Kontrast |
grayscale | 0-1 | 0 = volle Farbe, 1 = vollständig entsättigt |
hue-rotate | 0-360 (Grad) | Rotiert Farben um das Farbrad |
invert | 0-1 | 0 = normal, 1 = vollständig invertierte Farben |
saturate | 0+ (Multiplikator) | 0 = entsättigt, 1 = normal, 2 = doppelte Sättigung |
sepia | 0-1 | 0 = normal, 1 = voller Sepia-Ton |
Die blendMode-Eigenschaft steuert, wie eine Ebene mit den darunter liegenden Ebenen kombiniert wird:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
Unterstützte Mischmodi: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
Text- und Formebenen unterstützen Schatteneffekte über die style-Eigenschaft:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
Filter, Mischmodi, Deckkraft und Schatten können alle auf einer einzelnen Ebene für ausgefeilte visuelle Behandlungen kombiniert werden:
{
"type": "image",
"src": "{{backgroundImage}}",
"opacity": 0.7,
"blendMode": "overlay",
"filters": [
{ "type": "blur", "value": 3 },
{ "type": "brightness", "value": 0.8 }
],
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.3)",
"offsetX": 0,
"offsetY": 10,
"blur": 20
}
}
}
Rendervid unterstützt sowohl Google Fonts (über 100 Familien integriert) als auch benutzerdefinierte Schriftarten, die von externen URLs geladen werden.
Deklarieren Sie Google Fonts im fonts.google-Array:
{
"fonts": {
"google": [
{ "family": "Roboto", "weights": [400, 700] },
{ "family": "Open Sans", "weights": [300, 400, 600, 700] },
{ "family": "Montserrat", "weights": [400, 500, 700, 900] },
{ "family": "Playfair Display", "weights": [400, 700] }
]
}
}
Jedes Schriftartobjekt erfordert:
| Feld | Typ | Beschreibung |
|---|---|---|
family | string | Google Font-Familienname (exakte Übereinstimmung erforderlich) |
weights | array | Array numerischer Gewichte zum Laden (100-900) |
Gängige Schriftgewichte: 100 (Thin), 200 (Extra Light), 300 (Light), 400 (Regular), 500 (Medium), 600 (Semi Bold), 700 (Bold), 800 (Extra Bold), 900 (Black).
Laden Sie Schriftarten von externen URLs mit dem fonts.custom-Array:
{
"fonts": {
"custom": [
{
"family": "MyBrandFont",
"src": "https://example.com/fonts/brand-font.woff2",
"weight": 400,
"style": "normal"
},
{
"family": "MyBrandFont",
"src": "https://example.com/fonts/brand-font-bold.woff2",
"weight": 700,
"style": "normal"
}
]
}
}
Unterstützte Schriftformate: WOFF2 (empfohlen für kleinste Dateigröße), WOFF, TTF und OTF.
Referenzieren Sie deklarierte Schriftarten nach Familienname in Textebenen-Stilen:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
Rendervid enthält plattformspezifische Schriftarten-Fallback-Ketten, um konsistentes Rendering über verschiedene Umgebungen hinweg sicherzustellen. Wenn eine angegebene Schriftart nicht verfügbar ist, greift der Renderer auf Systemschriftarten zurück, die derselben Klassifikation entsprechen (Serif, Sans-Serif, Monospace).
Rendervid unterstützt eine breite Palette von Ausgabeformaten und Codecs sowohl für Video- als auch für Bild-Rendering.
| Format | Codec | Dateierweiterung | Am besten für |
|---|---|---|---|
| MP4 | H.264 | .mp4 | Maximale Kompatibilität – Web, Mobil, Social Media |
| WebM | VP8 / VP9 | .webm | Web-Einbettung mit kleineren Dateigrößen |
| MOV | ProRes | .mov | Professionelle Bearbeitungs-Workflows, verlustfreie Qualität |
| GIF | – | .gif | Kurze Animationen, Social Sharing, E-Mail |
| MP4 | H.265 / HEVC | .mp4 | Neuere Geräte, 50% kleinere Dateien als H.264 bei gleicher Qualität |
| WebM | AV1 | .webm | Codec der nächsten Generation, beste Kompressionseffizienz |
| Format | Dateierweiterung | Am besten für |
|---|---|---|
| PNG | .png | Verlustfreie Qualität, Transparenzunterstützung |
| JPEG | .jpg | Fotografien, kleinere Dateigrößen |
| WebP | .webp | Modernes Web, beste Balance aus Qualität und Größe |
| Voreinstellung | Beschreibung |
|---|---|
draft | Schnelles Rendering mit reduzierter Qualität – ideal für Vorschau |
standard | Ausgewogene Qualität und Dateigröße – gut für die meisten Anwendungsfälle |
high | Höhere Bitrate und Qualität – für finale Auslieferungen |
lossless | Maximale Qualität ohne Kompressionsartefakte |
Rendervid unterstützt Auflösungen von kleinen Thumbnails bis zu 8K:
| Auflösung | Abmessungen | Übliche Verwendung |
|---|---|---|
| SD | 640 x 480 | Thumbnails, Vorschauen |
| HD | 1280 x 720 | Webvideo, E-Mail |
| Full HD | 1920 x 1080 | YouTube, Präsentationen |
| 2K | 2560 x 1440 | Hochwertige Displays |
| 4K UHD | 3840 x 2160 | Professionell, Broadcast |
| 8K | 7680 x 4320 | Maximale Auflösung, zukunftssicher |
Bildraten von 1 fps (Diashows) bis 120 fps (Zeitlupe, Gaming-Inhalte) werden unterstützt. Gängige Auswahlmöglichkeiten sind 24 fps (kinematografisch), 30 fps (Web/Social) und 60 fps (flüssige Bewegung).
Hier ist ein vollständiges Rendervid-Template, das die Hauptfunktionen des Template-Systems zusammen demonstriert: dynamische Eingaben, mehrere Szenen mit Übergängen, geschichtete Kompositionen, Animationen mit Easing, Schriftarten und visuelle Effekte.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Produktname",
"required": true,
"default": "ProductX"
},
{
"key": "tagline",
"type": "string",
"label": "Slogan",
"required": true,
"default": "Die Zukunft ist hier."
},
{
"key": "heroImage",
"type": "url",
"label": "Hero-Bild",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Primärfarbe",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Call-to-Action",
"default": "Mehr erfahren"
}
],
"fonts": {
"google": [
{ "family": "Inter", "weights": [400, 600, 800] },
{ "family": "JetBrains Mono", "weights": [400] }
]
},
"composition": {
"scenes": [
{
"name": "intro",
"duration": 6,
"layers": [
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 540 },
"size": { "width": 1920, "height": 1080 },
"style": {
"fill": "{{primaryColor}}",
"opacity": 0.1
}
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 960, "y": 400 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 96,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 15,
"easing": "easeOutCubic"
}
]
},
{
"type": "text",
"text": "{{tagline}}",
"position": { "x": 960, "y": 520 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 400,
"fontSize": 36,
"color": "{{primaryColor}}",
"textAlign": "center",
"letterSpacing": 4
},
"animations": [
{
"type": "entrance",
"effect": "fadeIn",
"duration": 25,
"delay": 40,
"easing": "easeOutSine"
}
]
},
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 600 },
"size": { "width": 80, "height": 3 },
"style": {
"fill": "{{primaryColor}}"
},
"animations": [
{
"type": "entrance",
"effect": "scaleIn",
"duration": 20,
"delay": 60,
"easing": "easeOutQuart"
}
]
}
]
},
{
"name": "product-showcase",
"duration": 8,
"transition": {
"type": "slide",
"duration": 0.8,
"direction": "left"
},
"layers": [
{
"type": "image",
"src": "{{heroImage}}",
"position": { "x": 1200, "y": 540 },
"size": { "width": 800, "height": 800 },
"anchor": { "x": 0.5, "y": 0.5 },
"filters": [
{ "type": "brightness", "value": 1.1 },
{ "type": "contrast", "value": 1.05 }
],
"animations": [
{
"type": "entrance",
"effect": "zoomIn",
"duration": 40,
"easing": "easeOutBack"
},
{
"type": "emphasis",
"effect": "float",
"duration": 120,
"delay": 40,
"loop": -1,
"alternate": true
}
]
},
{
"type": "text",
"text": "Introducing",
"position": { "x": 400, "y": 350 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "JetBrains Mono",
"fontSize": 18,
"color": "{{primaryColor}}",
"textTransform": "uppercase",
"letterSpacing": 6
},
"animations": [
{
"type": "entrance",
"effect": "typewriter",
"duration": 30,
"delay": 10,
"easing": "linear"
}
]
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 400, "y": 430 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 72,
"color": "#FFFFFF"
},
"animations": [
{
"type": "entrance",
"effect": "revealLeft",
"duration": 25,
"delay": 20,
"easing": "easeOutQuart"
}
]
},
{
"type": "text",
"text": "{{tagline}}",
"position": { "x": 400, "y": 520 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 400,
"fontSize": 24,
"color": "#CCCCCC",
"lineHeight": 1.6
},
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 20,
"delay": 40,
"easing": "easeOutCubic"
}
]
}
]
},
{
"name": "cta",
"duration": 6,
"transition": {
"type": "fade",
"duration": 1.2
},
"layers": [
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 540 },
"size": { "width": 1920, "height": 1080 },
"style": {
"fill": "{{primaryColor}}",
"opacity": 0.15
}
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 960, "y": 380 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 80,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "bounceIn",
"duration": 35,
"easing": "easeOutElastic"
}
]
},
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 550 },
"size": { "width": 280, "height": 60 },
"style": {
"fill": "{{primaryColor}}",
"borderRadius": 30
},
"animations": [
{
"type": "entrance",
"effect": "scaleIn",
"duration": 25,
"delay": 30,
"easing": "easeOutBack"
},
{
"type": "emphasis",
"effect": "pulse",
"duration": 60,
"delay": 60,
"loop": -1,
"alternate": true
}
]
},
{
"type": "text",
"text": "{{ctaText}}",
"position": { "x": 960, "y": 550 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 600,
"fontSize": 22,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "fadeIn",
"duration": 20,
"delay": 40,
"easing": "easeOutSine"
}
]
}
]
}
]
}
}
Dieses Template erstellt ein 20-sekündiges Produkteinführungsvideo mit drei Szenen: ein typografisches Intro mit gestaffelten Textanimationen, eine Produkt-Präsentation mit schwebendem Bild und Schreibmaschinen-Effekt sowie eine abschließende Call-to-Action-Szene mit pulsierendem Button. Alle Texte, Farben und Bilder werden durch Template-Variablen gesteuert, was es vollständig wiederverwendbar macht.
Rendervid-Templates sind JSON-Dateien, die die Struktur, den Inhalt, die Animationen und die Ausgabeeinstellungen eines Videos oder Bildes definieren. Jedes Template enthält eine Ausgabekonfiguration (Abmessungen, fps, Dauer), Eingabedefinitionen für dynamische Variablen, eine Komposition mit Szenen und Ebenen sowie optionale Schriftarten- und benutzerdefinierte Komponentenkonfigurationen.
Template-Variablen verwenden die {{variableName}}-Syntax. Sie definieren Eingaben im inputs-Array des Templates mit einem Schlüssel, Typ (string, number, boolean, color, url, array), Label, Beschreibung und Standardwert. Zur Render-Zeit werden diese Variablen durch tatsächliche Werte ersetzt, was Templates wiederverwendbar und dynamisch macht.
Rendervid enthält über 40 integrierte Animationsvorlagen, die in vier Kategorien organisiert sind: Eingangsanimationen (fadeIn, slideIn, scaleIn, bounceIn, etc.), Ausgangsanimationen (fadeOut, slideOut, zoomOut, etc.), Hervorhebungsanimationen (pulse, shake, bounce, swing, heartbeat, etc.) und vollständig anpassbare Keyframe-Animationen mit über 30 Easing-Funktionen.
Rendervid bietet 17 Szenenübergangstypen: cut, fade, zoom, slide, wipe, push, rotate, flip (3D), blur, circle, glitch, dissolve, cube (3D), swirl, diagonal-wipe, iris und crosszoom. Jeder Übergang kann mit Dauer- und Richtungsparametern konfiguriert werden.
Rendervid unterstützt mehrere Ausgabeformate, darunter MP4 (H.264), WebM (VP8/VP9), MOV (ProRes), GIF für Video sowie PNG, JPEG, WebP für Bilder. Erweiterte Codecs wie H.265/HEVC und AV1 werden ebenfalls unterstützt. Die Auflösung geht bis zu 8K (7680x4320) mit Bildraten von 1 bis 120 fps.
Ja, Rendervid unterstützt über 100 integrierte Google Fonts und das Laden benutzerdefinierter Schriftarten von URLs in den Formaten WOFF2, WOFF, TTF und OTF. Sie können Schriftgewichte von 100-900 angeben und plattformspezifische Fallbacks für plattformübergreifende Kompatibilität konfigurieren.
Wir helfen Unternehmen wie Ihrem, intelligente Chatbots, MCP-Server, KI-Tools oder andere Arten von KI-Automatisierungen zu entwickeln, um Menschen bei sich wiederholenden Aufgaben in Ihrer Organisation zu ersetzen.
Entdecken Sie alle Rendervid-Komponenten: 8 integrierte Ebenentypen (Text, Bild, Video, Form, Audio, Gruppe, Lottie, benutzerdefiniert), vorgefertigte React-Kom...
Deployen Sie Rendervid überall: Browser-basiertes Rendering für Vorschauen, Node.js für serverseitige Stapelverarbeitung oder Cloud-Rendering auf AWS Lambda, Az...
Integrieren Sie FlowHunt mit dem json2video-mcp-Server, um die programmgesteuerte Videogenerierung zu automatisieren, benutzerdefinierte Vorlagen zu verwalten u...