Rendervid Componenten - Laagtypen, React Componenten & Visuele Editor

Rendervid is gebouwd op een component-gebaseerde architectuur die videocreatie modulair, uitbreidbaar en ontwikkelaarsvriendelijk maakt. Elk element in een Rendervid sjabloon is een laag, en elke laag heeft een specifiek type dat bepaalt hoe deze wordt gerenderd. Met 8 ingebouwde laagtypen, een groeiende bibliotheek van kant-en-klare React componenten, een visuele sjabloon editor en een standalone player, geeft Rendervid u alles wat u nodig heeft om professionele video-inhoud programmatisch te produceren.

Deze pagina behandelt het volledige component ecosysteem: van primitieve laagtypen zoals tekst en vorm, via audio en video afspelen, tot volledig aangepaste React componenten die onbeperkte creatieve mogelijkheden ontsluiten. Of u nu een eenvoudige titelkaart of een complexe datagestuurde animatie maakt, het begrijpen van deze componenten is de basis.

Ingebouwde Laagtypen

Elke laag in een Rendervid sjabloon wordt gedefinieerd als een JSON object met een type veld. Het type bepaalt de beschikbare eigenschappen en rendergedrag. Hieronder vindt u een gedetailleerde referentie voor elk van de 8 ingebouwde laagtypen.

Tekstlaag

De text laag is de meest feature-rijke primitieve in Rendervid. Het rendert gestileerde tekst met volledige controle over typografie, uitlijning, kleur, effecten en animatie.

Typografie eigenschappen:

Rendervid wordt geleverd met 100+ Google Fonts ingebouwd. U kunt elk van hen gebruiken door de fontFamily eigenschap op te geven zonder externe stylesheets te hoeven laden.

Uitlijning eigenschappen:

Styling en effecten:

• color en backgroundColor voor basis kleuring
• textShadow voor slagschaduwen
• textStroke voor omlijnd tekst
• textDecoration voor onderstreping, doorhaling
• textTransform voor hoofdletters, kleine letters, kapitaliseren
• maxLines met automatische ellipsis afkapping
• Ingebouwd typewriter effect voor karakter-voor-karakter tekst onthulling

{
  "type": "text",
  "text": "Welkom bij 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)"
}

Voor geavanceerde tekstanimaties zoals het typewriter effect, combineer de tekstlaag met keyframe animaties of gebruik de speciale TypewriterEffect component .

Afbeeldingslaag

De image laag toont raster- en vectorafbeeldingen met flexibele grootte- en bijsnijdopties.

Belangrijkste eigenschappen:

Ondersteunde formaten: 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"
}

De fit eigenschap werkt zoals CSS object-fit:

• cover – schaalt de afbeelding om de laag te vullen, overtollige delen worden bijgesneden
• contain – schaalt om volledig binnen de laag te passen, met mogelijke letterboxing
• fill – rekt de afbeelding uit om exact overeen te komen met de laagdimensies
• none – rendert de afbeelding in zijn oorspronkelijke resolutie

Videolaag

De video laag embedt videoclips in uw compositie met volledige afspeelbesturing.

Belangrijkste eigenschappen:

{
  "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
}

Gebruik startTime om intro’s over te slaan of naar een specifiek punt in de bronopname te springen. Combineer met playbackRate voor slow-motion (0.5) of time-lapse (2.0) effecten.

Vormlaag

De shape laag tekent vectorvormen met vullingen, streken, gradiënten en afgeronde hoeken.

Vormtypen:

Styling eigenschappen:

• fill – effen kleur of gradiënt
• stroke – randkleur
• strokeWidth – randdikte
• borderRadius – afgeronde hoeken voor rechthoeken
• Gradiënten: zowel linear als radial gradiëntvullingen

{
  "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
}

Voor aangepaste vormen, gebruik het path type met standaard SVG pad data:

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

Audiolaag

De audio laag voegt audiotracks toe aan uw compositie met volumebesturing, fading en een volledige effectenketen.

Belangrijkste eigenschappen:

Audio effectenketen:

Rendervid bevat een ingebouwde effectenverwerkingspijplijn. Beschikbare effecten:

• EQ – equalisatie voor toonvorming
• Compressor – dynamisch bereik compressie
• Reverb – ruimtelijke galm
• Delay – echo/delay effect
• Gain – volumeversterking of verzwakking
• High-pass filter – verwijder lage frequenties
• Low-pass filter – verwijder hoge frequenties
• Panning – stereopositionering (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
}

De effecten worden op volgorde verwerkt, waardoor u geavanceerde audioverwerkingsketens kunt bouwen. Gebruik pan waarden van -1 (volledig links) tot 1 (volledig rechts) voor stereopositionering.

Groeplaag

De group laag is een container die onderliggende lagen bevat. Transformaties die op de groep worden toegepast, beïnvloeden alle kinderen, waardoor het gemakkelijk is om complexe meerlaagse composities als één geheel te verplaatsen, schalen, roteren of animeren.

Belangrijkste eigenschappen:

{
  "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": "Kaart Titel",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Ondersteunende beschrijvingstekst komt hier.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

Groepen zijn van onschatbare waarde voor het organiseren van complexe sjablonen. Gebruik ze om herbruikbare kaartlay-outs, lower-thirds, overlays en andere samengestelde elementen te creëren. De coördinaten van de kinderen zijn relatief ten opzichte van de positie van de groep.

Lottie Laag

De lottie laag rendert Lottie animaties geëxporteerd vanuit After Effects, Figma of andere animatietools.

Belangrijkste eigenschappen:

{
  "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 lagen zijn ideaal voor het toevoegen van gepolijste motion graphics, iconen, laadindicatoren en merkanimaties zonder frame-voor-frame code te schrijven. De startFrame en endFrame eigenschappen laten u de animatie knippen om alleen een specifiek segment af te spelen.

Aangepaste Laag

De custom laag is het krachtigste laagtype in Rendervid. Het laat u willekeurige React componenten schrijven die frame-voor-frame renderen, waardoor u volledige controle heeft over de visuele uitvoer.

Er zijn drie implementatietypen voor aangepaste componenten:

Inline Implementatie

Embed JavaScript code direct in uw JSON sjabloon. Het beste voor kleine, op zichzelf staande componenten.

{
  "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 Implementatie

Laad een component vanaf een externe URL zoals een CDN. Het beste voor herbruikbare componenten die worden gedeeld tussen sjablonen.

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

Referentie Implementatie

Gebruik een vooraf geregistreerd component op naam. Het beste voor componenten uit het @rendervid/components pakket of aangepaste registers.

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

Elke aangepaste component ontvangt een standaardset props:

Aangepaste componenten ondersteunen ook schema validatie voor props, wat ervoor zorgt dat sjablonen de juiste datatypes en verplichte velden aan elke component doorgeven.

Kant-en-klare React Componenten

Het @rendervid/components pakket wordt geleverd met een set productie-klare componenten die u onmiddellijk in uw sjablonen kunt gebruiken.

AnimatedLineChart

Rendert geanimeerde lijngrafieken met vloeiende gradiëntvullingen, configureerbare datapunten, aslabels en geanimeerde inteken-effecten. Ideaal voor datagestuurde video-inhoud zoals rapporten, dashboards en presentaties.

Belangrijkste props: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Creëert een betoverend noorderlicht (aurora borealis) effect met gelaagde gradiënten en vloeiende beweging. Perfect voor sfeervolle achtergronden, intro sequenties en ambient visuals.

Belangrijkste props: colors, speed, intensity, blur

WaveBackground

Genereert vloeiende golfanimaties met configureerbare kleuren, amplitudes en frequenties. Gebruik het voor stijlvolle achtergronden, muziek visualizers of oceaan-thema inhoud.

Belangrijkste props: waveCount, colors, amplitude, frequency, speed

SceneTransition

Biedt 17 professionele overgangstypen voor beweging tussen scènes. Omvat wipes, fades, zooms, slides en meer. Elke overgang is frame-nauwkeurig en configureerbaar.

Belangrijkste props: transitionType, duration, direction, easing

TypewriterEffect

Rendert karakter-voor-karakter tekst onthulling met een knipperende cursor. Ondersteunt configureerbare typsnelheid, cursorstijl en vertraging tussen woorden. Geweldig voor code demo’s, chat simulaties en dramatische tekst onthullingen.

Belangrijkste props: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Aangepaste Component Ontwikkeling

Het bouwen van uw eigen aangepaste componenten is waar Rendervid echt schittert. Elk visueel effect dat u kunt creëren met JavaScript en CSS kan een Rendervid component worden.

Component Structuur

Een Rendervid aangepaste component is een standaard JavaScript functie die props ontvangt en een React element retourneert. Het belangrijkste verschil met typische React componenten is dat rendering frame-gedreven is in plaats van event-gedreven.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Bereken animatievoortgang (0 tot 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Gebruik voortgang om animaties aan te sturen
  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!");
}

Beschikbare Props

Elke aangepaste component ontvangt deze standaard props:

• frame – Het huidige framenummer, beginnend bij 0. Dit is uw primaire animatie driver.
• fps – Frames per seconde (gewoonlijk 30 of 60). Gebruik het om frames naar seconden om te zetten.
• sceneDuration – Duur van de huidige scène in seconden. Vermenigvuldig met fps voor totaal aantal frames.
• layerSize – Een object met width en height in pixels, overeenkomend met de laagdimensies gedefinieerd in de sjabloon.
• props – Een object met eventuele aangepaste eigenschappen gedefinieerd in de sjabloon JSON.

Het React.createElement() Patroon

Omdat Rendervid componenten in een renderomgeving draaien, gebruiken ze React.createElement() in plaats van JSX. Het patroon is eenvoudig:

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

Props Schema Validatie

U kunt een schema definiëren voor de props van uw component om data te valideren bij het laden van de sjabloon:

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 },
};

Voorbeeld: Deeltjessysteem

Een deeltjessysteem component dat 150+ deeltjes simuleert met fysica:

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);
}

Voorbeeld: Geanimeerde Teller

Een nummer tel animatie die interpoleert tussen start- en eindwaarden:

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 || ""));
}

Voor meer over hoe aangepaste componenten passen in de bredere sjabloonstructuur, zie de Template System documentatie .

Sjabloon Editor

Het @rendervid/editor pakket biedt een volledig uitgeruste visuele sjabloon editor, waardoor zowel niet-ontwikkelaars als ontwikkelaars Rendervid sjablonen kunnen bouwen zonder handmatig JSON te schrijven.

Tijdlijn-gebaseerde Bewerking

De editor beschikt over een multi-track tijdlijn waar elke laag wordt weergegeven als een blok dat kan worden gesleept, vergroot/verkleind en geherpositioneerd. Pas starttijden, duur en laagvolgorde visueel aan. Zoom in voor frame-niveau precisie of zoom uit voor een overzicht op hoog niveau.

Laagbeheer Paneel

Een speciaal paneel toont alle lagen in de compositie met drag-and-drop herschikking, zichtbaarheidsschakelaars, vergrendelingsbesturingen en groepering. Voeg nieuwe lagen toe vanuit een componentpalet dat alle 8 ingebouwde typen en eventuele geregistreerde aangepaste componenten bevat.

Eigenschappen Paneel

Selecteer een laag om zijn eigenschappen te bekijken en bewerken in een gestructureerd formulier. Het eigenschappenpaneel past zich aan het laagtype aan en toont alleen relevante velden. Kleurkiezers, schuifregelaars, dropdowns en tekstinvoer maken het gemakkelijk om elk detail aan te passen. Wijzigingen worden onmiddellijk weergegeven in het voorbeeld.

Ongedaan maken/Opnieuw doen Geschiedenis

Elke wijziging wordt opgenomen in een geschiedenisstapel met volledige ondersteuning voor ongedaan maken en opnieuw doen. Navigeer vol vertrouwen door uw bewerkingsgeschiedenis, wetende dat u altijd kunt terugkeren naar een eerdere staat.

Realtime Voorbeeld

De editor bevat een ingebedde Player component die de sjabloon in realtime rendert terwijl u wijzigingen aanbrengt. Bekijk een voorbeeld van de volledige compositie op elk moment tijdens het bewerken zonder te hoeven exporteren of renderen.

Player Component

Het @rendervid/player pakket biedt een standalone React component voor het voorvertonen van Rendervid sjablonen in de browser.

React Integratie

Installeer en embed de player in elke React applicatie:

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

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

Toetsenbord Sneltoetsen

De player ondersteunt ingebouwde toetsenbordbesturingen voor efficiënt voorvertonen:

Snelheidsbesturing

Pas de afspeelsnelheid aan van 0.25x (kwart snelheid) tot 4x (viervoudige snelheid). Slow-motion afspelen is nuttig voor het frame voor frame beoordelen van animaties, terwijl vooruit spoelen helpt bij het scannen door langere composities.

Callbacks en Events

De player biedt callbacks voor programmatische besturing:

Gebruik deze callbacks om de player te synchroniseren met externe UI elementen, analytics of interactieve ervaringen.

Component Galerij

Deze voorbeeld aangepaste componenten demonstreren de reikwijdte van wat mogelijk is met Rendervid’s aangepaste laagtype. Elk is gebouwd met hetzelfde React.createElement() patroon zoals hierboven beschreven.

Deeltjes Explosie

Een fysica-gebaseerd deeltjessysteem met 150+ deeltjes, configureerbare zwaartekracht, kleur en explosieradius. Deeltjes spawnen vanaf een centraal punt en bogen naar buiten met realistische beweging.

Golf Visualisatie

Audio-reactieve golfpatronen die reageren op frequentiedata. Meerdere golflagen met configureerbare amplitude, frequentie en kleur creëren een dynamische, organische visual.

Neon Tekst Effecten

Gloeiende tekst met geanimeerde neonlicht effecten, inclusief flikkering, pulseren en kleur cycling. Aanpasbare gloed radius, kleuren en animatiesnelheid.

Holografische Interface

Een sci-fi geïnspireerde holografische UI met scanlijnen, data uitlezingen, raster overlays en geanimeerde UI elementen. Ideaal voor tech-thema video’s en futuristische intro’s.

3D Kubus Rotatie

Een hardware-versnelde CSS 3D kubus met getextureerde vlakken en vloeiende rotatie. Gebruikt CSS perspective en transform3d voor performante 3D rendering zonder WebGL.

Data Visualisatie Dashboard

Een multi-chart dashboard component met geanimeerde staafdiagrammen, lijngrafieken en statistiek tellers. Data-gedreven en configureerbaar voor rapporten, presentaties en data storytelling.

Aanvullende aangepaste component voorbeelden omvatten:

• Geanimeerde Teller – nummer tel animatie met easing functies
• Voortgangsring – circulaire voortgangsindicator met configureerbare boog en kleuren
• Typemachine – tekst typ animatie met cursor en variabele snelheid

Volgende Stappen

• Leer over het Rendervid Template System voor het structureren van scènes en composities
• Ontdek AI Integratie om sjablonen te genereren met natuurlijke taal
• Zie de Deployment gids voor het renderen en exporteren van definitieve video’s
• Keer terug naar het Rendervid overzicht voor een introductie op hoog niveau