Rendervid Komponenter - Lagtyper, React Komponenter & Visuel Editor

Rendervid er bygget på en komponentbaseret arkitektur, der gør videooprettelse modulær, udvidelig og udviklervenlig. Hvert element i en Rendervid skabelon er et lag, og hvert lag har en specifik type, der bestemmer hvordan det renderes. Med 8 indbyggede lagtyper, et voksende bibliotek af færdigbyggede React komponenter, en visuel skabeloneditor og en selvstændig afspiller, giver Rendervid dig alt hvad du behøver for at producere professionelt videoindhold programmatisk.

Denne side dækker hele komponentøkosystemet: fra primitive lagtyper som tekst og form, gennem lyd- og videoafspilning, til fuldt tilpassede React komponenter der åbner ubegrænsede kreative muligheder. Uanset om du bygger et simpelt titelkort eller en kompleks datadrevet animation, er forståelse af disse komponenter fundamentet.

Indbyggede Lagtyper

Hvert lag i en Rendervid skabelon er defineret som et JSON objekt med et type felt. Typen bestemmer de tilgængelige egenskaber og renderingsadfærd. Nedenfor er en detaljeret reference for hver af de 8 indbyggede lagtyper.

Tekst Lag

text laget er den mest funktionsrige primitiv i Rendervid. Det renderer styliseret tekst med fuld kontrol over typografi, justering, farve, effekter og animation.

Typografi egenskaber:

Rendervid leveres med 100+ Google Fonts indbygget. Du kan bruge enhver af dem ved at specificere fontFamily egenskaben uden at skulle indlæse eksterne stylesheets.

Justeringsegenskaber:

Styling og effekter:

• color og backgroundColor til basal farvning
• textShadow til skyggeeffekter
• textStroke til kontureret tekst
• textDecoration til understreget, gennemstreget
• textTransform til store bogstaver, små bogstaver, stort begyndelsesbogstav
• maxLines med automatisk ellipse afkortning
• Indbygget skrivemaskineeffekt til tegn-for-tegn tekstafsløring

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

For avancerede tekstanimationer som skrivemaskineeffekten, kombiner tekstlaget med keyframe animationer eller brug den dedikerede TypewriterEffect komponent .

Billede Lag

image laget viser raster- og vektorbilleder med fleksible størrelses- og beskæringsmuligheder.

Nøgleegenskaber:

Understøttede formater: 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"
}

fit egenskaben fungerer som CSS object-fit:

• cover – skalerer billedet til at fylde laget, beskærer overskud
• contain – skalerer til at passe helt inden i laget, med mulig letterboxing
• fill – strækker billedet til at matche lagdimensionerne præcist
• none – renderer billedet i dets native opløsning

Video Lag

video laget indlejrer videoklip i din komposition med fuld afspilningskontrol.

Nøgleegenskaber:

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

Brug startTime til at springe introer over eller hoppe til et specifikt punkt i kildematerialet. Kombiner med playbackRate for slowmotion (0.5) eller timelapse (2.0) effekter.

Form Lag

shape laget tegner vektorformer med fyld, streger, gradienter og afrundede hjørner.

Formtyper:

Stylingegenskaber:

• fill – ensfarvet eller gradient
• stroke – kantfarve
• strokeWidth – kanttykkelse
• borderRadius – afrundede hjørner til rektangler
• Gradienter: både linear og radial gradientfyld

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

For tilpassede former, brug path typen med standard SVG stidata:

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

Lyd Lag

audio laget tilføjer lydspor til din komposition med volumenkontrol, fading og en komplet effektkæde.

Nøgleegenskaber:

Lyd effektkæde:

Rendervid inkluderer en indbygget effektbehandlingspipeline. Tilgængelige effekter:

• EQ – equalisering til tonekontrol
• Compressor – dynamisk områdekompression
• Reverb – spatial rumklang
• Delay – ekko/forsinkelseseffekt
• Gain – volumenboost eller dæmpning
• High-pass filter – fjern lave frekvenser
• Low-pass filter – fjern høje frekvenser
• Panning – stereopositionering (venstre/højre)

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

Effekterne behandles i rækkefølge, hvilket giver dig mulighed for at bygge sofistikerede lydbehandlingskæder. Brug pan værdier fra -1 (fuld venstre) til 1 (fuld højre) for stereopositionering.

Gruppe Lag

group laget er en container der indeholder underordnede lag. Transformationer anvendt på gruppen påvirker alle børn, hvilket gør det nemt at flytte, skalere, rotere eller animere komplekse flerlagskompositioner som en enkelt enhed.

Nøgleegenskaber:

{
  "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": "Kort Titel",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Understøttende beskrivelsestekst kommer her.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

Grupper er uvurderlige til at organisere komplekse skabeloner. Brug dem til at oprette genanvendelige kortlayouts, lower-thirds, overlays og andre sammensatte elementer. De underordnede koordinater er relative til gruppens position.

Lottie Lag

lottie laget renderer Lottie animationer eksporteret fra After Effects, Figma eller andre animationsværktøjer.

Nøgleegenskaber:

{
  "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 lag er ideelle til at tilføje polerede bevægelsesgrafik, ikoner, indlæsningsindikatorer og brandede animationer uden at skrive frame-for-frame kode. startFrame og endFrame egenskaberne lader dig trimme animationen til kun at afspille et specifikt segment.

Tilpasset Lag

custom laget er den mest kraftfulde lagtype i Rendervid. Det lader dig skrive arbitrære React komponenter der renderer frame-for-frame, hvilket giver dig komplet kontrol over det visuelle output.

Der er tre implementeringstyper for tilpassede komponenter:

Inline Implementering

Indlejr JavaScript kode direkte i din JSON skabelon. Bedst til små, selvstændige komponenter.

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

Indlæs en komponent fra en ekstern URL såsom en CDN. Bedst til genanvendelige komponenter delt på tværs af skabeloner.

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

Reference Implementering

Brug en præ-registreret komponent ved navn. Bedst til komponenter fra @rendervid/components pakken eller tilpassede registre.

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

Hver tilpasset komponent modtager et standardsæt af props:

Tilpassede komponenter understøtter også skemavalidering for props, hvilket sikrer at skabeloner overfører de korrekte datatyper og påkrævede felter til hver komponent.

Færdigbyggede React Komponenter

@rendervid/components pakken leveres med et sæt produktionsklare komponenter du kan bruge med det samme i dine skabeloner.

AnimatedLineChart

Renderer animerede linjediagrammer med glatte gradientfyld, konfigurerbare datapunkter, aksemærkater og animerede indtegningseffekter. Ideel til datadrevet videoindhold som rapporter, dashboards og præsentationer.

Nøgle props: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Skaber en fascinerende nordlyseffekt (aurora borealis) ved hjælp af lagdelte gradienter og flydende bevægelse. Perfekt til atmosfæriske baggrunde, introsekvenser og ambient visuals.

Nøgle props: colors, speed, intensity, blur

WaveBackground

Genererer flydende bølgeanimationer med konfigurerbare farver, amplituder og frekvenser. Brug den til stilfulde baggrunde, musikvisualisatorer eller hav-tematiseret indhold.

Nøgle props: waveCount, colors, amplitude, frequency, speed

SceneTransition

Leverer 17 professionelle overgangstyper til bevægelse mellem scener. Inkluderer wipes, fades, zooms, slides og mere. Hver overgang er frame-nøjagtig og konfigurerbar.

Nøgle props: transitionType, duration, direction, easing

TypewriterEffect

Renderer tegn-for-tegn tekstafsløring med en blinkende markør. Understøtter konfigurerbar skrivehastighed, markørstil og forsinkelse mellem ord. Fantastisk til kodedemoer, chatsimuleringer og dramatiske tekstafsløringer.

Nøgle props: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Tilpasset Komponentudvikling

At bygge dine egne tilpassede komponenter er hvor Rendervid virkelig skinner. Enhver visuel effekt du kan skabe med JavaScript og CSS kan blive en Rendervid komponent.

Komponentstruktur

En Rendervid tilpasset komponent er en standard JavaScript funktion der modtager props og returnerer et React element. Nøgleforskellen fra typiske React komponenter er at rendering er frame-drevet snarere end event-drevet.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Beregn animationsfremskridt (0 til 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Brug fremskridt til at drive animationer
  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 || "Hej, Rendervid!");
}

Tilgængelige Props

Hver tilpasset komponent modtager disse standard props:

• frame – Det aktuelle framenummer, startende ved 0. Dette er din primære animationsdriver.
• fps – Frames per sekund (almindeligvis 30 eller 60). Brug det til at konvertere frames til sekunder.
• sceneDuration – Varighed af den aktuelle scene i sekunder. Multiplicer med fps for samlet frameantal.
• layerSize – Et objekt med width og height i pixels, matchende lagdimensionerne defineret i skabelonen.
• props – Et objekt indeholdende eventuelle tilpassede egenskaber defineret i skabelon JSON’en.

React.createElement() Mønsteret

Da Rendervid komponenter kører i et renderingsmiljø, bruger de React.createElement() snarere end JSX. Mønsteret er ligetil:

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

Props Skemavalidering

Du kan definere et skema for din komponents props for at validere data ved skabelonindlæsningstidspunktet:

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

Eksempel: Partikelsystem

En partikelsystemkomponent der simulerer 150+ partikler med fysik:

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

Eksempel: Animeret Tæller

En talletællingsanimation der interpolerer mellem start- og slutværdier:

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

For mere om hvordan tilpassede komponenter passer ind i den bredere skabelonstruktur, se Template System dokumentationen .

Skabeloneditor

@rendervid/editor pakken leverer en fuldt udstyret visuel skabeloneditor, der gør det muligt for både ikke-udviklere og udviklere at bygge Rendervid skabeloner uden at skrive JSON i hånden.

Tidslinjebaseret Redigering

Editoren har en multi-track tidslinje hvor hvert lag er repræsenteret som en blok der kan trækkes, ændres i størrelse og ompositioneres. Juster starttider, varigheder og lagrækkefølge visuelt. Zoom ind for frame-niveau præcision eller zoom ud for et overordnet overblik.

Lagstyringspanel

Et dedikeret panel lister alle lag i kompositionen med træk-og-slip omordning, synlighedsskift, låsekontroller og gruppering. Tilføj nye lag fra en komponentpalet der inkluderer alle 8 indbyggede typer og eventuelle registrerede tilpassede komponenter.

Egenskabspanel

Vælg et hvilket som helst lag for at se og redigere dets egenskaber i en struktureret formular. Egenskabspanelet tilpasser sig lagtypen og viser kun relevante felter. Farvevælgere, skydere, dropdowns og tekstinput gør det nemt at justere hver detalje. Ændringer afspejles øjeblikkeligt i forhåndsvisningen.

Fortryd/Gentag Historik

Hver ændring registreres i en historik stak med fuld fortryd og gentag support. Naviger gennem din redigeringshistorik selvsikkert, vel vidende at du altid kan vende tilbage til en tidligere tilstand.

Realtidsforhåndsvisning

Editoren inkluderer en indlejret Player komponent der renderer skabelonen i realtid mens du foretager ændringer. Forhåndsvis hele kompositionen på et hvilket som helst tidspunkt under redigering uden at skulle eksportere eller rendere.

Player Komponent

@rendervid/player pakken leverer en selvstændig React komponent til forhåndsvisning af Rendervid skabeloner i browseren.

React Integration

Installer og indlejr afspilleren i enhver React applikation:

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

function Preview({ template }) {
  return (
    <Player
      template={template}
      width={1920}
      height={1080}
      onComplete={() => console.log("Afspilning færdig")}
    />
  );
}

Tastaturgenveje

Afspilleren understøtter indbyggede tastaturkontroller til effektiv forhåndsvisning:

Hastighedskontrol

Juster afspilningshastighed fra 0.25x (kvart hastighed) til 4x (firedobbelt hastighed). Slowmotion afspilning er nyttig til gennemgang af animationer frame for frame, mens hurtig fremad hjælper med at scanne gennem længere kompositioner.

Callbacks og Events

Afspilleren eksponerer callbacks til programmatisk kontrol:

Brug disse callbacks til at synkronisere afspilleren med eksterne UI elementer, analytik eller interaktive oplevelser.

Komponentgalleri

Disse eksempel tilpassede komponenter demonstrerer rækkevidden af hvad der er muligt med Rendervids tilpassede lagtype. Hver enkelt er bygget ved hjælp af det samme React.createElement() mønster beskrevet ovenfor.

Partikel Eksplosion

Et fysikbaseret partikelsystem med 150+ partikler, konfigurerbar tyngdekraft, farve og eksplosionsradius. Partikler spawner fra et centralt punkt og buet udad med realistisk bevægelse.

Bølge Visualisering

Lydreaktive bølgemønstre der reagerer på frekvensdata. Flere bølgelag med konfigurerbar amplitude, frekvens og farve skaber en dynamisk, organisk visuel.

Neon Teksteffekter

Glødende tekst med animerede neonlyseffekter, inklusiv flimmer, puls og farvecykling. Konfigurerbar glødradius, farver og animationshastighed.

Holografisk Interface

En sci-fi inspireret holografisk UI med scanningslinjer, dataudlæsninger, gitteroverlays og animerede UI elementer. Ideel til tech-tematiserede videoer og futuristiske introer.

3D Terning Rotation

En hardwareaccelereret CSS 3D terning med teksturerede flader og glat rotation. Bruger CSS perspective og transform3d til performant 3D rendering uden WebGL.

Datavisualiseringsdashboard

En multi-diagram dashboardkomponent med animerede søjlediagrammer, linjediagrammer og stat tællere. Datadrevet og konfigurerbar til rapporter, præsentationer og data storytelling.

Yderligere tilpassede komponenteksempler inkluderer:

• Animeret Tæller – talletællingsanimation med easing funktioner
• Fremskridtsring – cirkulær fremskridtsindikator med konfigurerbar bue og farver
• Skrivemaskine – tekstskrivningsanimation med markør og variabel hastighed

Næste Skridt

• Lær om Rendervid Template System til strukturering af scener og kompositioner
• Udforsk AI Integration til at generere skabeloner med naturligt sprog
• Se Deployment guiden til rendering og eksport af endelige videoer
• Vend tilbage til Rendervid oversigten for en overordnet introduktion