Rendervid-Komponenten - Ebenentypen, React-Komponenten & Visueller Editor

Rendervid basiert auf einer komponentenbasierten Architektur, die Videoerstellung modular, erweiterbar und entwicklerfreundlich macht. Jedes Element in einer Rendervid-Vorlage ist eine Ebene, und jede Ebene hat einen spezifischen Typ, der bestimmt, wie sie gerendert wird. Mit 8 integrierten Ebenentypen, einer wachsenden Bibliothek vorgefertigter React-Komponenten, einem visuellen Vorlagen-Editor und einem eigenständigen Player bietet Ihnen Rendervid alles, was Sie benötigen, um professionelle Videoinhalte programmatisch zu erstellen.

Diese Seite behandelt das gesamte Komponenten-Ökosystem: von primitiven Ebenentypen wie Text und Form über Audio- und Videowiedergabe bis hin zu vollständig benutzerdefinierten React-Komponenten, die unbegrenzte kreative Möglichkeiten eröffnen. Ob Sie eine einfache Titelkarte oder eine komplexe datengesteuerte Animation erstellen, das Verständnis dieser Komponenten ist die Grundlage.

Integrierte Ebenentypen

Jede Ebene in einer Rendervid-Vorlage wird als JSON-Objekt mit einem type-Feld definiert. Der Typ bestimmt die verfügbaren Eigenschaften und das Rendering-Verhalten. Nachfolgend finden Sie eine detaillierte Referenz für jeden der 8 integrierten Ebenentypen.

Text-Ebene

Die text-Ebene ist die funktionsreichste Primitive in Rendervid. Sie rendert gestylten Text mit vollständiger Kontrolle über Typografie, Ausrichtung, Farbe, Effekte und Animation.

Typografie-Eigenschaften:

Rendervid wird mit über 100 Google Fonts ausgeliefert. Sie können jede davon verwenden, indem Sie die fontFamily-Eigenschaft angeben, ohne externe Stylesheets laden zu müssen.

Ausrichtungs-Eigenschaften:

Styling und Effekte:

• color und backgroundColor für grundlegende Färbung
• textShadow für Schlagschatten
• textStroke für umrandeten Text
• textDecoration für Unterstreichung, Durchstreichung
• textTransform für Großbuchstaben, Kleinbuchstaben, Großschreibung
• maxLines mit automatischer Ellipsen-Kürzung
• Integrierter Schreibmaschineneffekt für zeichenweise Textanzeige

{
  "type": "text",
  "text": "Willkommen bei Rendervid",
  "x": 100,
  "y": 200,
  "width": 800,
  "height": 100,
  "fontSize": 64,
  "fontFamily": "Montserrat",
  "fontWeight": 700,
  "color": "#FFFFFF",
  "textAlign": "center",
  "verticalAlign": "middle",
  "textShadow": "2px 2px 8px rgba(0,0,0,0.5)"
}

Für erweiterte Textanimationen wie den Schreibmaschineneffekt kombinieren Sie die Text-Ebene mit Keyframe-Animationen oder verwenden Sie die dedizierte TypewriterEffect-Komponente .

Bild-Ebene

Die image-Ebene zeigt Raster- und Vektorbilder mit flexiblen Größen- und Zuschnittoptionen an.

Wichtige Eigenschaften:

Unterstützte Formate: PNG, JPEG, WebP, SVG, GIF

{
  "type": "image",
  "source": "https://example.com/hero-banner.png",
  "x": 0,
  "y": 0,
  "width": 1920,
  "height": 1080,
  "fit": "cover",
  "position": "center center"
}

Die fit-Eigenschaft funktioniert wie CSS object-fit:

• cover – skaliert das Bild, um die Ebene zu füllen, überschüssige Bereiche werden abgeschnitten
• contain – skaliert, um vollständig in die Ebene zu passen, mit möglichen Letterboxing
• fill – streckt das Bild, um exakt den Ebenenabmessungen zu entsprechen
• none – rendert das Bild in seiner nativen Auflösung

Video-Ebene

Die video-Ebene bettet Videoclips in Ihre Komposition mit vollständiger Wiedergabesteuerung ein.

Wichtige Eigenschaften:

{
  "type": "video",
  "source": "https://cdn.example.com/background-clip.mp4",
  "x": 0,
  "y": 0,
  "width": 1920,
  "height": 1080,
  "startTime": 5.0,
  "playbackRate": 1.0,
  "muted": true,
  "loop": true
}

Verwenden Sie startTime, um Intros zu überspringen oder zu einem bestimmten Punkt im Quellmaterial zu springen. Kombinieren Sie mit playbackRate für Zeitlupen- (0.5) oder Zeitraffer-Effekte (2.0).

Form-Ebene

Die shape-Ebene zeichnet Vektorformen mit Füllungen, Strichen, Verläufen und abgerundeten Ecken.

Formtypen:

Styling-Eigenschaften:

• fill – Volltonfarbe oder Verlauf
• stroke – Rahmenfarbe
• strokeWidth – Rahmenstärke
• borderRadius – abgerundete Ecken für Rechtecke
• Verläufe: sowohl linear als auch radial Verlaufsfüllungen

{
  "type": "shape",
  "shapeType": "rectangle",
  "x": 100,
  "y": 100,
  "width": 400,
  "height": 300,
  "borderRadius": 16,
  "fill": {
    "type": "linear",
    "colors": ["#6366F1", "#8B5CF6"],
    "angle": 135
  },
  "stroke": "#FFFFFF",
  "strokeWidth": 2
}

Für benutzerdefinierte Formen verwenden Sie den path-Typ mit Standard-SVG-Pfaddaten:

{
  "type": "shape",
  "shapeType": "path",
  "path": "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80",
  "fill": "#EC4899",
  "stroke": "none"
}

Audio-Ebene

Die audio-Ebene fügt Ihrer Komposition Audiospuren mit Lautstärkeregelung, Überblendung und einer vollständigen Effektkette hinzu.

Wichtige Eigenschaften:

Audio-Effektkette:

Rendervid enthält eine integrierte Effektverarbeitungs-Pipeline. Verfügbare Effekte:

• EQ – Entzerrung für Klangformung
• Compressor – Dynamikbereichskompression
• Reverb – räumlicher Hall
• Delay – Echo/Delay-Effekt
• Gain – Lautstärkeverstärkung oder -dämpfung
• High-pass filter – tiefe Frequenzen entfernen
• Low-pass filter – hohe Frequenzen entfernen
• Panning – Stereopositionierung (links/rechts)

{
  "type": "audio",
  "source": "https://cdn.example.com/background-music.mp3",
  "volume": 0.7,
  "fadeIn": 2.0,
  "fadeOut": 3.0,
  "effects": [
    { "type": "highpass", "frequency": 200 },
    { "type": "compressor", "threshold": -24, "ratio": 4 },
    { "type": "reverb", "wet": 0.3, "decay": 2.5 },
    { "type": "gain", "value": 0.8 }
  ],
  "pan": -0.3
}

Die Effekte werden der Reihe nach verarbeitet, sodass Sie anspruchsvolle Audioverarbeitungsketten erstellen können. Verwenden Sie pan-Werte von -1 (ganz links) bis 1 (ganz rechts) für die Stereopositionierung.

Gruppen-Ebene

Die group-Ebene ist ein Container, der untergeordnete Ebenen enthält. Auf die Gruppe angewendete Transformationen wirken sich auf alle untergeordneten Elemente aus, wodurch es einfach wird, komplexe mehrstufige Kompositionen als einzelne Einheit zu verschieben, zu skalieren, zu drehen oder zu animieren.

Wichtige Eigenschaften:

{
  "type": "group",
  "x": 200,
  "y": 150,
  "rotation": 5,
  "opacity": 0.9,
  "children": [
    {
      "type": "shape",
      "shapeType": "rectangle",
      "x": 0,
      "y": 0,
      "width": 500,
      "height": 300,
      "fill": "#1E293B",
      "borderRadius": 12
    },
    {
      "type": "text",
      "text": "Kartentitel",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Unterstützender Beschreibungstext steht hier.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

Gruppen sind von unschätzbarem Wert für die Organisation komplexer Vorlagen. Verwenden Sie sie, um wiederverwendbare Kartenlayouts, Lower-Thirds, Overlays und andere zusammengesetzte Elemente zu erstellen. Die untergeordneten Koordinaten sind relativ zur Position der Gruppe.

Lottie-Ebene

Die lottie-Ebene rendert Lottie-Animationen, die aus After Effects, Figma oder anderen Animationstools exportiert wurden.

Wichtige Eigenschaften:

{
  "type": "lottie",
  "source": "https://cdn.example.com/loading-spinner.json",
  "x": 860,
  "y": 440,
  "width": 200,
  "height": 200,
  "speed": 1.5,
  "loop": true,
  "startFrame": 0,
  "endFrame": 60
}

Lottie-Ebenen sind ideal, um polierte Motion Graphics, Icons, Ladeindikatoren und Markenanimationen hinzuzufügen, ohne Frame-für-Frame-Code zu schreiben. Die Eigenschaften startFrame und endFrame ermöglichen es Ihnen, die Animation zu trimmen, um nur ein bestimmtes Segment abzuspielen.

Benutzerdefinierte Ebene

Die custom-Ebene ist der leistungsstärkste Ebenentyp in Rendervid. Sie ermöglicht es Ihnen, beliebige React-Komponenten zu schreiben, die Frame-für-Frame rendern, und gibt Ihnen vollständige Kontrolle über die visuelle Ausgabe.

Es gibt drei Bereitstellungstypen für benutzerdefinierte Komponenten:

Inline-Bereitstellung

Betten Sie JavaScript-Code direkt in Ihre JSON-Vorlage ein. Am besten für kleine, in sich geschlossene Komponenten.

{
  "type": "custom",
  "deployment": {
    "type": "inline",
    "code": "function Component({ frame, fps, sceneDuration, layerSize, props }) { const progress = frame / (fps * sceneDuration); const size = 50 + progress * 100; return React.createElement('div', { style: { width: size, height: size, borderRadius: '50%', backgroundColor: props.color || '#6366F1', display: 'flex', alignItems: 'center', justifyContent: 'center' } }); }"
  },
  "props": {
    "color": "#EC4899"
  }
}

URL-Bereitstellung

Laden Sie eine Komponente von einer externen URL wie einem CDN. Am besten für wiederverwendbare Komponenten, die über Vorlagen hinweg geteilt werden.

{
  "type": "custom",
  "deployment": {
    "type": "url",
    "url": "https://cdn.example.com/components/animated-counter.js"
  },
  "props": {
    "startValue": 0,
    "endValue": 1000,
    "prefix": "$",
    "color": "#10B981"
  }
}

Referenz-Bereitstellung

Verwenden Sie eine vorab registrierte Komponente nach Namen. Am besten für Komponenten aus dem @rendervid/components-Paket oder benutzerdefinierten Registries.

{
  "type": "custom",
  "deployment": {
    "type": "reference",
    "name": "AnimatedLineChart"
  },
  "props": {
    "data": [10, 25, 40, 35, 60, 80, 72, 95],
    "lineColor": "#6366F1",
    "gradientOpacity": 0.3
  }
}

Jede benutzerdefinierte Komponente erhält einen Standardsatz von Props:

Benutzerdefinierte Komponenten unterstützen auch Schema-Validierung für Props, um sicherzustellen, dass Vorlagen die richtigen Datentypen und erforderlichen Felder an jede Komponente übergeben.

Vorgefertigte React-Komponenten

Das @rendervid/components-Paket wird mit einer Reihe produktionsbereiter Komponenten ausgeliefert, die Sie sofort in Ihren Vorlagen verwenden können.

AnimatedLineChart

Rendert animierte Liniendiagramme mit glatten Verlaufsfüllungen, konfigurierbaren Datenpunkten, Achsenbeschriftungen und animierten Einzeichnungseffekten. Ideal für datengesteuerte Videoinhalte wie Berichte, Dashboards und Präsentationen.

Wichtige Props: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Erzeugt einen faszinierenden Nordlicht-Effekt (Aurora Borealis) unter Verwendung geschichteter Verläufe und flüssiger Bewegung. Perfekt für atmosphärische Hintergründe, Intro-Sequenzen und Ambient-Visuals.

Wichtige Props: colors, speed, intensity, blur

WaveBackground

Erzeugt flüssige Wellenanimationen mit konfigurierbaren Farben, Amplituden und Frequenzen. Verwenden Sie es für stilvolle Hintergründe, Musikvisualisierer oder ozeanische Inhalte.

Wichtige Props: waveCount, colors, amplitude, frequency, speed

SceneTransition

Bietet 17 professionelle Übergangstypen für den Wechsel zwischen Szenen. Umfasst Wipes, Fades, Zooms, Slides und mehr. Jeder Übergang ist frame-genau und konfigurierbar.

Wichtige Props: transitionType, duration, direction, easing

TypewriterEffect

Rendert zeichenweise Textanzeige mit blinkendem Cursor. Unterstützt konfigurierbare Tippgeschwindigkeit, Cursorstil und Verzögerung zwischen Wörtern. Großartig für Code-Demos, Chat-Simulationen und dramatische Textoffenbarungen.

Wichtige Props: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Entwicklung benutzerdefinierter Komponenten

Das Erstellen eigener benutzerdefinierter Komponenten ist der Bereich, in dem Rendervid wirklich glänzt. Jeder visuelle Effekt, den Sie mit JavaScript und CSS erstellen können, kann zu einer Rendervid-Komponente werden.

Komponentenstruktur

Eine benutzerdefinierte Rendervid-Komponente ist eine Standard-JavaScript-Funktion, die Props empfängt und ein React-Element zurückgibt. Der Hauptunterschied zu typischen React-Komponenten besteht darin, dass das Rendering frame-gesteuert statt ereignisgesteuert ist.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Animationsfortschritt berechnen (0 bis 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Fortschritt verwenden, um Animationen zu steuern
  const opacity = Math.min(progress * 2, 1);
  const scale = 0.5 + progress * 0.5;

  return React.createElement("div", {
    style: {
      width: layerSize.width,
      height: layerSize.height,
      opacity: opacity,
      transform: `scale(${scale})`,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      color: props.color || "#FFFFFF",
      fontSize: props.fontSize || 48,
      fontWeight: 700,
    },
  }, props.text || "Hallo, Rendervid!");
}

Verfügbare Props

Jede benutzerdefinierte Komponente erhält diese Standard-Props:

• frame – Die aktuelle Frame-Nummer, beginnend bei 0. Dies ist Ihr primärer Animationstreiber.
• fps – Frames pro Sekunde (üblicherweise 30 oder 60). Verwenden Sie es, um Frames in Sekunden umzurechnen.
• sceneDuration – Dauer der aktuellen Szene in Sekunden. Multiplizieren Sie mit fps für die Gesamtanzahl der Frames.
• layerSize – Ein Objekt mit width und height in Pixeln, das den in der Vorlage definierten Ebenenabmessungen entspricht.
• props – Ein Objekt, das alle in der Vorlagen-JSON definierten benutzerdefinierten Eigenschaften enthält.

Das React.createElement()-Muster

Da Rendervid-Komponenten in einer Rendering-Umgebung laufen, verwenden sie React.createElement() anstelle von JSX. Das Muster ist unkompliziert:

// JSX-Äquivalent: <div className="container"><span>Hallo</span></div>
React.createElement("div", { className: "container" },
  React.createElement("span", null, "Hallo")
);

Props-Schema-Validierung

Sie können ein Schema für die Props Ihrer Komponente definieren, um Daten beim Laden der Vorlage zu validieren:

MyComponent.schema = {
  text: { type: "string", required: true },
  color: { type: "string", default: "#FFFFFF" },
  fontSize: { type: "number", default: 48, min: 8, max: 200 },
  animate: { type: "boolean", default: true },
};

Beispiel: Partikelsystem

Eine Partikelsystem-Komponente, die über 150 Partikel mit Physik simuliert:

function ParticleExplosion({ frame, fps, sceneDuration, layerSize, props }) {
  const particleCount = props.particleCount || 150;
  const gravity = props.gravity || 0.5;
  const time = frame / fps;

  const particles = [];
  for (let i = 0; i < particleCount; i++) {
    const angle = (i / particleCount) * Math.PI * 2;
    const speed = 2 + Math.random() * 4;
    const x = layerSize.width / 2 + Math.cos(angle) * speed * time * 60;
    const y = layerSize.height / 2 + Math.sin(angle) * speed * time * 60
              + gravity * time * time * 100;
    const opacity = Math.max(0, 1 - time / sceneDuration);
    const size = 3 + Math.random() * 5;

    particles.push(
      React.createElement("div", {
        key: i,
        style: {
          position: "absolute",
          left: x,
          top: y,
          width: size,
          height: size,
          borderRadius: "50%",
          backgroundColor: props.color || "#F59E0B",
          opacity: opacity,
        },
      })
    );
  }

  return React.createElement("div", {
    style: {
      position: "relative",
      width: layerSize.width,
      height: layerSize.height,
      overflow: "hidden",
    },
  }, ...particles);
}

Beispiel: Animierter Zähler

Eine Nummernzählanimation, die zwischen Start- und Endwerten interpoliert:

function AnimatedCounter({ frame, fps, sceneDuration, layerSize, props }) {
  const progress = Math.min(frame / (fps * sceneDuration), 1);
  const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
  const value = Math.round(
    props.startValue + (props.endValue - props.startValue) * eased
  );
  const formatted = value.toLocaleString();

  return React.createElement("div", {
    style: {
      width: layerSize.width,
      height: layerSize.height,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      fontSize: props.fontSize || 72,
      fontWeight: 800,
      color: props.color || "#FFFFFF",
      fontFamily: "Inter, sans-serif",
    },
  }, (props.prefix || "") + formatted + (props.suffix || ""));
}

Weitere Informationen darüber, wie benutzerdefinierte Komponenten in die breitere Vorlagenstruktur passen, finden Sie in der Template System-Dokumentation .

Vorlagen-Editor

Das @rendervid/editor-Paket bietet einen voll ausgestatteten visuellen Vorlagen-Editor, der es Nicht-Entwicklern und Entwicklern gleichermaßen ermöglicht, Rendervid-Vorlagen zu erstellen, ohne JSON von Hand zu schreiben.

Zeitlinienbasierte Bearbeitung

Der Editor verfügt über eine mehrstufige Zeitleiste, auf der jede Ebene als Block dargestellt wird, der gezogen, in der Größe verändert und neu positioniert werden kann. Passen Sie Startzeiten, Dauern und Ebenenreihenfolge visuell an. Zoomen Sie für Frame-genaue Präzision hinein oder für einen Überblick auf hoher Ebene heraus.

Ebenenverwaltungs-Panel

Ein dediziertes Panel listet alle Ebenen in der Komposition mit Drag-and-Drop-Neuordnung, Sichtbarkeitsschaltern, Sperrsteuerungen und Gruppierung auf. Fügen Sie neue Ebenen aus einer Komponentenpalette hinzu, die alle 8 integrierten Typen und alle registrierten benutzerdefinierten Komponenten enthält.

Eigenschaften-Panel

Wählen Sie eine beliebige Ebene aus, um ihre Eigenschaften in einem strukturierten Formular anzuzeigen und zu bearbeiten. Das Eigenschaften-Panel passt sich dem Ebenentyp an und zeigt nur relevante Felder an. Farbwähler, Schieberegler, Dropdown-Menüs und Texteingaben machen es einfach, jedes Detail anzupassen. Änderungen werden sofort in der Vorschau angezeigt.

Rückgängig/Wiederherstellen-Verlauf

Jede Änderung wird in einem Verlaufsstapel mit vollständiger Rückgängig- und Wiederherstellungsunterstützung aufgezeichnet. Navigieren Sie selbstbewusst durch Ihren Bearbeitungsverlauf, in dem Wissen, dass Sie immer zu einem vorherigen Zustand zurückkehren können.

Echtzeit-Vorschau

Der Editor enthält eine eingebettete Player-Komponente , die die Vorlage in Echtzeit rendert, während Sie Änderungen vornehmen. Zeigen Sie die vollständige Komposition an jedem Punkt während der Bearbeitung in der Vorschau an, ohne exportieren oder rendern zu müssen.

Player-Komponente

Das @rendervid/player-Paket bietet eine eigenständige React-Komponente zur Vorschau von Rendervid-Vorlagen im Browser.

React-Integration

Installieren und betten Sie den Player in jede React-Anwendung ein:

import { Player } from "@rendervid/player";

function Preview({ template }) {
  return (
    <Player
      template={template}
      width={1920}
      height={1080}
      onComplete={() => console.log("Wiedergabe beendet")}
    />
  );
}

Tastaturkürzel

Der Player unterstützt integrierte Tastatursteuerungen für eine effiziente Vorschau:

Geschwindigkeitssteuerung

Passen Sie die Wiedergabegeschwindigkeit von 0.25x (Viertelgeschwindigkeit) bis 4x (vierfache Geschwindigkeit) an. Zeitlupenwiedergabe ist nützlich, um Animationen Frame für Frame zu überprüfen, während Schnellvorlauf hilft, längere Kompositionen zu durchsuchen.

Callbacks und Ereignisse

Der Player stellt Callbacks für programmatische Steuerung bereit:

Verwenden Sie diese Callbacks, um den Player mit externen UI-Elementen, Analysen oder interaktiven Erlebnissen zu synchronisieren.

Komponenten-Galerie

Diese beispielhaften benutzerdefinierten Komponenten demonstrieren die Bandbreite dessen, was mit Rendervids benutzerdefiniertem Ebenentyp möglich ist. Jede ist mit demselben oben beschriebenen React.createElement()-Muster erstellt.

Partikelexplosion

Ein physikbasiertes Partikelsystem mit über 150 Partikeln, konfigurierbarer Schwerkraft, Farbe und Explosionsradius. Partikel spawnen von einem zentralen Punkt und bewegen sich mit realistischer Bewegung nach außen.

Wellenvisualisierung

Audio-reaktive Wellenmuster, die auf Frequenzdaten reagieren. Mehrere Wellenschichten mit konfigurierbarer Amplitude, Frequenz und Farbe erzeugen eine dynamische, organische Visualisierung.

Neon-Texteffekte

Leuchtender Text mit animierten Neonlichteffekten, einschließlich Flackern, Pulsieren und Farbwechsel. Anpassbarer Leuchtradius, Farben und Animationsgeschwindigkeit.

Holografische Benutzeroberfläche

Eine von Science-Fiction inspirierte holografische Benutzeroberfläche mit Scan-Linien, Datenanzeigen, Gitterüberlagerungen und animierten UI-Elementen. Ideal für technisch orientierte Videos und futuristische Intros.

3D-Würfelrotation

Ein hardwarebeschleunigter CSS-3D-Würfel mit texturierten Flächen und sanfter Rotation. Verwendet CSS perspective und transform3d für performantes 3D-Rendering ohne WebGL.

Datenvisualisierungs-Dashboard

Eine Multi-Chart-Dashboard-Komponente mit animierten Balkendiagrammen, Liniendiagrammen und Statistikzählern. Datengesteuert und konfigurierbar für Berichte, Präsentationen und Data Storytelling.

Zusätzliche Beispiele für benutzerdefinierte Komponenten umfassen:

• Animierter Zähler – Nummernzählanimation mit Easing-Funktionen
• Fortschrittsring – kreisförmiger Fortschrittsindikator mit konfigurierbarem Bogen und Farben
• Schreibmaschine – Texttippanimation mit Cursor und variabler Geschwindigkeit

Nächste Schritte

• Erfahren Sie mehr über das Rendervid Template System zur Strukturierung von Szenen und Kompositionen
• Erkunden Sie die AI-Integration , um Vorlagen mit natürlicher Sprache zu generieren
• Sehen Sie sich den Deployment-Leitfaden zum Rendern und Exportieren finaler Videos an
• Kehren Sie zur Rendervid-Übersicht zurück für eine allgemeine Einführung