Rendervid Komponenter - Lagtyper, React-komponenter og Visuell Editor

Rendervid er bygget på en komponentbasert arkitektur som gjør videoskapelse modulær, utvidbar og utviklervennlig. Hvert element i en Rendervid-mal er et lag, og hvert lag har en spesifikk type som bestemmer hvordan det rendres. Med 8 innebygde lagtyper, et voksende bibliotek av ferdigbygde React-komponenter, en visuell malredigerer og en frittstående spiller, gir Rendervid deg alt du trenger for å produsere profesjonelt videoinnhold programmatisk.

Denne siden dekker hele komponentøkosystemet: fra primitive lagtyper som tekst og form, gjennom lyd- og videoavspilling, til fullstendig tilpassede React-komponenter som låser opp ubegrensede kreative muligheter. Enten du bygger et enkelt tittelkort eller en kompleks datadrevet animasjon, er forståelse av disse komponentene grunnlaget.

Innebygde Lagtyper

Hvert lag i en Rendervid-mal er definert som et JSON-objekt med et type-felt. Typen bestemmer tilgjengelige egenskaper og renderingsadferd. Nedenfor er en detaljert referanse for hver av de 8 innebygde lagtypene.

Tekstlag

text-laget er den mest funksjonsrike primitiven i Rendervid. Det rendrer stilisert tekst med full kontroll over typografi, justering, farge, effekter og animasjon.

Typografiегenskaper:

Rendervid leveres med 100+ Google Fonts innebygd. Du kan bruke hvilken som helst av dem ved å spesifisere fontFamily-egenskapen uten å måtte laste eksterne stilark.

Justeringsegenskaper:

Styling og effekter:

• color og backgroundColor for grunnleggende farging
• textShadow for skygger
• textStroke for omrisset tekst
• textDecoration for understreking, gjennomstreking
• textTransform for store bokstaver, små bokstaver, kapitalisering
• maxLines med automatisk ellipse-avkorting
• Innebygd skrivemaskineffekt for tegn-for-tegn tekstavdekking

{
  "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 avanserte tekstanimasjoner som skrivemaskineffekten, kombiner tekstlaget med nøkkelbilde-animasjoner eller bruk den dedikerte TypewriterEffect-komponenten .

Bildelag

image-laget viser raster- og vektorbilder med fleksible størrelsesanpassings- og beskjæringsalternativer.

Nøkkelегenskaper:

Stø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-egenskapen fungerer som CSS object-fit:

• cover – skalerer bildet for å fylle laget, beskjærer overskudd
• contain – skalerer for å passe helt innenfor laget, med mulig letterboxing
• fill – strekker bildet for å matche lagdimensjonene nøyaktig
• none – rendrer bildet i sin opprinnelige oppløsning

Videolag

video-laget bygger inn videoklipp i komposisjonen din med full avspillingskontroll.

Nøkkelегenskaper:

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

Bruk startTime for å hoppe over introer eller gå til et spesifikt punkt i kildematerialet. Kombiner med playbackRate for sakte film (0.5) eller tidslapse (2.0) effekter.

Formlag

shape-laget tegner vektorformer med fyllinger, streker, gradienter og avrundede hjørner.

Formtyper:

Stylingegenskaper:

• fill – ensfarget eller gradient
• stroke – kantfarge
• strokeWidth – kanttykkelse
• borderRadius – avrundede hjørner for rektangler
• Gradienter: både linear og radial gradientfyllinger

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

Lydlag

audio-laget legger til lydspor i komposisjonen din med volumkontroll, fading og en full effektkjede.

Nøkkelегenskaper:

Lydeffektkjede:

Rendervid inkluderer en innebygd effektbehandlingspipeline. Tilgjengelige effekter:

• EQ – equalisering for toneforming
• Compressor – dynamisk områdekompresjon
• Reverb – romklang
• Delay – ekko/forsinkelseseffekt
• Gain – volumøkning eller dempning
• High-pass filter – fjern lave frekvenser
• Low-pass filter – fjern høye frekvenser
• Panning – stereoposisjonering (venstre/høyre)

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

Effektene behandles i rekkefølge, slik at du kan bygge sofistikerte lydbehandlingskjeder. Bruk pan-verdier fra -1 (helt til venstre) til 1 (helt til høyre) for stereoposisjonering.

Gruppelag

group-laget er en beholder som inneholder underordnede lag. Transformasjoner som brukes på gruppen påvirker alle barn, noe som gjør det enkelt å flytte, skalere, rotere eller animere komplekse flerlagskomposisjoner som en enkelt enhet.

Nøkkelегenskaper:

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

Grupper er uvurderlige for å organisere komplekse maler. Bruk dem til å lage gjenbrukbare kortoppsett, lower-thirds, overlegg og andre sammensatte elementer. Barnkoordinatene er relative til gruppens posisjon.

Lottie-lag

lottie-laget rendrer Lottie-animasjoner eksportert fra After Effects, Figma eller andre animasjonsverktøy.

Nøkkelегenskaper:

{
  "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 for å legge til polerte bevegelsesgrafikk, ikoner, lasteindikatorer og merkevareanimasjoner uten å skrive bilde-for-bilde kode. startFrame- og endFrame-egenskapene lar deg trimme animasjonen til å spille bare et spesifikt segment.

Tilpasset Lag

custom-laget er den kraftigste lagtypen i Rendervid. Det lar deg skrive vilkårlige React-komponenter som rendrer bilde-for-bilde, og gir deg full kontroll over den visuelle utdataen.

Det finnes tre distribusjonstyper for tilpassede komponenter:

Inline Distribusjon

Bygg inn JavaScript-kode direkte i JSON-malen din. Best for små, selvstendige 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-distribusjon

Last en komponent fra en ekstern URL som en CDN. Best for gjenbrukbare komponenter delt på tvers av maler.

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

Referansedistribusjon

Bruk en forhåndsregistrert komponent etter navn. Best for 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 mottar et standard sett med props:

Tilpassede komponenter støtter også skjemavalidering for props, for å sikre at maler sender riktige datatyper og påkrevde felt til hver komponent.

Ferdigbygde React-komponenter

@rendervid/components-pakken leveres med et sett produksjonsklare komponenter du kan bruke umiddelbart i malene dine.

AnimatedLineChart

Rendrer animerte linjediagrammer med glatte gradientfyllinger, konfigurerbare datapunkter, akseetiketter og animerte inntegneffekter. Ideell for datadrevet videoinnhold som rapporter, dashbord og presentasjoner.

Nøkkel-props: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Skaper en fascinerende nordlys (aurora borealis) effekt ved bruk av lagdelte gradienter og flytende bevegelse. Perfekt for atmosfæriske bakgrunner, introsekvenser og omgivende visuelle elementer.

Nøkkel-props: colors, speed, intensity, blur

WaveBackground

Genererer flytende bølgeanimasjoner med konfigurerbare farger, amplituder og frekvenser. Bruk den til stilige bakgrunner, musikkvisualisatorer eller havatematisk innhold.

Nøkkel-props: waveCount, colors, amplitude, frequency, speed

SceneTransition

Tilbyr 17 profesjonelle overgangstyper for å bevege seg mellom scener. Inkluderer wipes, fades, zooms, slides og mer. Hver overgang er bildenøyaktig og konfigurerbar.

Nøkkel-props: transitionType, duration, direction, easing

TypewriterEffect

Rendrer tegn-for-tegn tekstavdekking med blinkende markør. Støtter konfigurerbar skrivehastighet, markørstil og forsinkelse mellom ord. Flott for kodedemoer, chatsimulasjoner og dramatiske tekstavdekninger.

Nøkkel-props: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Tilpasset Komponentutvikling

Å bygge dine egne tilpassede komponenter er der Rendervid virkelig skinner. Enhver visuell effekt du kan lage med JavaScript og CSS kan bli en Rendervid-komponent.

Komponentstruktur

En Rendervid tilpasset komponent er en standard JavaScript-funksjon som mottar props og returnerer et React-element. Nøkkelforskjellen fra typiske React-komponenter er at rendering er bildestyrt i stedet for hendelsesstyrt.

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

  // Bruk fremgang til å drive animasjoner
  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 || "Hei, Rendervid!");
}

Tilgjengelige Props

Hver tilpasset komponent mottar disse standard props:

• frame – Gjeldende bildenummer, starter på 0. Dette er din primære animasjonsdrivere.
• fps – Bilder per sekund (vanligvis 30 eller 60). Bruk den til å konvertere bilder til sekunder.
• sceneDuration – Varighet av gjeldende scene i sekunder. Multipliser med fps for totalt bildeantall.
• layerSize – Et objekt med width og height i piksler, som matcher lagdimensjonene definert i malen.
• props – Et objekt som inneholder eventuelle tilpassede egenskaper definert i mal-JSONen.

React.createElement() Mønsteret

Siden Rendervid-komponenter kjører i et renderingsmiljø, bruker de React.createElement() i stedet for JSX. Mønsteret er enkelt:

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

Props Skjemavalidering

Du kan definere et skjema for komponentens props for å validere data ved mallastingstid:

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: Partikkelsystem

En partikkelsystemkomponent som simulerer 150+ partikler med fysikk:

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: Animert Teller

En talltellingsanimasjon som interpolerer mellom start- og sluttverdier:

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 mer om hvordan tilpassede komponenter passer inn i den bredere malstrukturen, se Malsystem-dokumentasjonen .

Malredigerer

@rendervid/editor-pakken tilbyr en fullverdig visuell malredigerer, som gjør det mulig for både ikke-utviklere og utviklere å bygge Rendervid-maler uten å skrive JSON for hånd.

Tidslinjebasert Redigering

Editoren har en flersporet tidslinje der hvert lag er representert som en blokk som kan dras, endres i størrelse og reposisjoneres. Juster starttider, varigheter og lagrekkefølge visuelt. Zoom inn for bildenivå-presisjon eller zoom ut for en oversikt på høyt nivå.

Lagstyringspanel

Et dedikert panel lister alle lag i komposisjonen med dra-og-slipp omorganisering, synlighetsvekslinger, låsekontroller og gruppering. Legg til nye lag fra en komponentpalett som inkluderer alle 8 innebygde typer og eventuelle registrerte tilpassede komponenter.

Egenskapspanel

Velg et hvilket som helst lag for å se og redigere egenskapene i et strukturert skjema. Egenskapspanelet tilpasser seg lagtypen og viser bare relevante felt. Fargevelgere, glidebrytere, rullegardinmenyer og tekstinntastinger gjør det enkelt å justere hver detalj. Endringer reflekteres umiddelbart i forhåndsvisningen.

Angre/Gjør Om-historikk

Hver endring registreres i en historikkstabel med full angre- og gjør om-støtte. Naviger gjennom redigeringshistorikken din med selvtillit, vel vitende om at du alltid kan gå tilbake til en tidligere tilstand.

Sanntids Forhåndsvisning

Editoren inkluderer en innebygd Player-komponent som rendrer malen i sanntid mens du gjør endringer. Forhåndsvis hele komposisjonen når som helst under redigering uten å måtte eksportere eller rendre.

Player-komponent

@rendervid/player-pakken tilbyr en frittstående React-komponent for forhåndsvisning av Rendervid-maler i nettleseren.

React-integrasjon

Installer og bygg inn spilleren i hvilken som helst React-applikasjon:

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

function Preview({ template }) {
  return (
    <Player
      template={template}
      width={1920}
      height={1080}
      onComplete={() => console.log("Avspilling fullført")}
    />
  );
}

Tastatursnarveier

Spilleren støtter innebygde tastaturkontroller for effektiv forhåndsvisning:

Hastighetskontroll

Juster avspillingshastighet fra 0.25x (kvart hastighet) til 4x (firedobbel hastighet). Sakte film-avspilling er nyttig for å gjennomgå animasjoner bilde for bilde, mens hurtigspol hjelper med å skanne gjennom lengre komposisjoner.

Callbacks og Hendelser

Spilleren eksponerer callbacks for programmatisk kontroll:

Bruk disse callbacks til å synkronisere spilleren med eksterne UI-elementer, analyser eller interaktive opplevelser.

Komponentgalleri

Disse eksempel tilpassede komponentene demonstrerer rekkevidden av hva som er mulig med Renderivids tilpassede lagtype. Hver enkelt er bygget ved bruk av samme React.createElement()-mønster beskrevet ovenfor.

Partikkeleksplosjon

Et fysikkbasert partikkelsystem med 150+ partikler, konfigurerbar tyngdekraft, farge og eksplosjonsradius. Partikler spawner fra et sentralt punkt og buer utover med realistisk bevegelse.

Bølgevisualisering

Lydreaktive bølgemønstre som reagerer på frekvensdata. Flere bølgelag med konfigurerbar amplitude, frekvens og farge skaper en dynamisk, organisk visuell.

Neon Teksteffekter

Lysende tekst med animerte neonlyseffekter, inkludert flimring, puls og fargesykling. Tilpassbar glød-radius, farger og animasjonshastighet.

Holografisk Grensesnitt

Et sci-fi-inspirert holografisk brukergrensesnitt med skannelinjer, datautlesninger, rutenettoverlegg og animerte UI-elementer. Ideell for teknologitematiske videoer og futuristiske introer.

3D Kuberotasjon

En maskinvareakselerert CSS 3D-kube med teksturerte flater og jevn rotasjon. Bruker CSS perspective og transform3d for effektiv 3D-rendering uten WebGL.

Datavisualiseringsdashbord

En flerkartdashbord-komponent med animerte stolpediagrammer, linjediagrammer og statistikktellere. Datadrevet og konfigurerbar for rapporter, presentasjoner og datafortelling.

Ytterligere tilpassede komponenteksempler inkluderer:

• Animert Teller – talltellingsanimasjon med easing-funksjoner
• Fremdriftsring – sirkulær fremdriftsindikator med konfigurerbar bue og farger
• Skrivemaskin – tekstskrivingsanimasjon med markør og variabel hastighet

Neste Steg

• Lær om Rendervid Malsystem for strukturering av scener og komposisjoner
• Utforsk AI-integrasjon for å generere maler med naturlig språk
• Se Distribusjonsveiledningen for rendering og eksport av ferdige videoer
• Gå tilbake til Rendervid-oversikten for en introduksjon på høyt nivå