Rendervid-komponenter - Lagertyper, React-komponenter & Visuell redigerare

Rendervid är byggt på en komponentbaserad arkitektur som gör videoskapande modulärt, utbyggbart och utvecklarvänligt. Varje element i en Rendervid-mall är ett lager, och varje lager har en specifik typ som bestämmer hur det renderas. Med 8 inbyggda lagertyper, ett växande bibliotek av färdiga React-komponenter, en visuell mallredigerare och en fristående spelare ger Rendervid dig allt du behöver för att producera professionellt videoinnehåll programmatiskt.

Den här sidan täcker hela komponentekosystemet: från primitiva lagertyper som text och form, genom ljud- och videouppspelning, till helt anpassade React-komponenter som låser upp obegränsade kreativa möjligheter. Oavsett om du bygger ett enkelt titelkort eller en komplex datadriven animering är förståelsen av dessa komponenter grunden.

Inbyggda lagertyper

Varje lager i en Rendervid-mall definieras som ett JSON-objekt med ett type-fält. Typen bestämmer tillgängliga egenskaper och renderingsbeteende. Nedan finns en detaljerad referens för var och en av de 8 inbyggda lagertyperna.

Textlager

text-lagret är den mest funktionsrika primitiven i Rendervid. Det renderar stilad text med full kontroll över typografi, justering, färg, effekter och animering.

Typografiegenskaper:

Rendervid levereras med 100+ Google Fonts inbyggda. Du kan använda vilket som helst av dem genom att ange egenskapen fontFamily utan att behöva ladda externa stilmallar.

Justeringsegenskaper:

Styling och effekter:

• color och backgroundColor för grundläggande färgläggning
• textShadow för skuggor
• textStroke för konturerad text
• textDecoration för understrykning, genomstrykning
• textTransform för versaler, gemener, kapitäler
• maxLines med automatisk ellips-trunkering
• Inbyggd skrivmaskineffekt för tecken-för-tecken textavslöjande

{
  "type": "text",
  "text": "Välkommen till 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 avancerade textanimeringar som skrivmaskineffekten, kombinera textlagret med nyckelbildsanimeringar eller använd den dedikerade TypewriterEffect-komponenten .

Bildlager

image-lagret visar raster- och vektorbilder med flexibla storleks- och beskärningsalternativ.

Nyckelegenskaper:

Format som stöds: 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"
}

Egenskapen fit fungerar som CSS object-fit:

• cover – skalar bilden för att fylla lagret, beskär överskott
• contain – skalar för att passa helt inom lagret, med möjlig letterboxing
• fill – sträcker bilden för att matcha lagerdimensionerna exakt
• none – renderar bilden i sin ursprungliga upplösning

Videolager

video-lagret bäddar in videoklipp i din komposition med full uppspelningskontroll.

Nyckelegenskaper:

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

Använd startTime för att hoppa över intron eller gå till en specifik punkt i källmaterialet. Kombinera med playbackRate för slow-motion (0.5) eller timelapse (2.0) effekter.

Formlager

shape-lagret ritar vektorformer med fyllningar, konturer, gradienter och rundade hörn.

Formtyper:

Stylingegenskaper:

• fill – solid färg eller gradient
• stroke – kantfärg
• strokeWidth – kanttjocklek
• borderRadius – rundade hörn för rektanglar
• Gradienter: både linear och radial gradientfyllningar

{
  "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 anpassade former, använd path-typen med standard SVG-bandata:

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

Ljudlager

audio-lagret lägger till ljudspår i din komposition med volymkontroll, fade och en fullständig effektkedja.

Nyckelegenskaper:

Ljudeffektkedja:

Rendervid inkluderar en inbyggd effektbearbetningspipeline. Tillgängliga effekter:

• EQ – equalisering för tonformning
• Compressor – dynamisk räckviddskompression
• Reverb – rumsligt eko
• Delay – eko/fördröjningseffekt
• Gain – volymökning eller dämpning
• High-pass filter – ta bort låga frekvenser
• Low-pass filter – ta bort höga frekvenser
• Panning – stereopositionering (vänster/höger)

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

Effekterna bearbetas i ordning, vilket gör att du kan bygga sofistikerade ljudbearbetningskedjor. Använd pan-värden från -1 (helt vänster) till 1 (helt höger) för stereopositionering.

Grupplager

group-lagret är en container som innehåller underlager. Transformationer som tillämpas på gruppen påverkar alla barn, vilket gör det enkelt att flytta, skala, rotera eller animera komplexa flerlagers-kompositioner som en enda enhet.

Nyckelegenskaper:

{
  "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": "Korttitel",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Stödjande beskrivningstext kommer här.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

Grupper är ovärderliga för att organisera komplexa mallar. Använd dem för att skapa återanvändbara kortlayouter, lower-thirds, överlagringar och andra sammansatta element. Barnkoordinaterna är relativa till gruppens position.

Lottie-lager

lottie-lagret renderar Lottie-animeringar exporterade från After Effects, Figma eller andra animeringsverktyg.

Nyckelegenskaper:

{
  "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-lager är idealiska för att lägga till polerad rörelsegrafik, ikoner, laddningsindikatorer och varumärkesanimationer utan att skriva bildruta-för-bildruta kod. Egenskaperna startFrame och endFrame låter dig trimma animeringen för att endast spela ett specifikt segment.

Anpassat lager

custom-lagret är den mest kraftfulla lagertypen i Rendervid. Det låter dig skriva godtyckliga React-komponenter som renderar bildruta-för-bildruta, vilket ger dig fullständig kontroll över den visuella utmatningen.

Det finns tre distributionstyper för anpassade komponenter:

Inline-distribution

Bädda in JavaScript-kod direkt i din JSON-mall. Bäst för små, fristående 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-distribution

Ladda en komponent från en extern URL såsom en CDN. Bäst för återanvändbara komponenter som delas mellan mallar.

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

Referensdistribution

Använd en förregistrerad komponent efter namn. Bäst för komponenter från @rendervid/components-paketet eller anpassade register.

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

Varje anpassad komponent tar emot en standarduppsättning props:

Anpassade komponenter stöder också schemavalidering för props, vilket säkerställer att mallar skickar korrekta datatyper och obligatoriska fält till varje komponent.

Färdiga React-komponenter

@rendervid/components-paketet levereras med en uppsättning produktionsklara komponenter du kan använda omedelbart i dina mallar.

AnimatedLineChart

Renderar animerade linjediagram med mjuka gradientfyllningar, konfigurerbara datapunkter, axeletiketter och animerade inritningseffekter. Idealisk för datadriven videoinnehåll som rapporter, dashboards och presentationer.

Nyckel-props: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Skapar en fascinerande norrsken (aurora borealis) effekt med skiktade gradienter och flytande rörelse. Perfekt för atmosfäriska bakgrunder, introsekvenser och ambient visuellt.

Nyckel-props: colors, speed, intensity, blur

WaveBackground

Genererar flytande våganimationer med konfigurerbara färger, amplituder och frekvenser. Använd den för stilfulla bakgrunder, musikvisualiserare eller havstema innehåll.

Nyckel-props: waveCount, colors, amplitude, frequency, speed

SceneTransition

Tillhandahåller 17 professionella övergångstyper för att flytta mellan scener. Inkluderar wipes, fades, zooms, slides och mer. Varje övergång är bildruteexakt och konfigurerbar.

Nyckel-props: transitionType, duration, direction, easing

TypewriterEffect

Renderar tecken-för-tecken textavslöjande med en blinkande markör. Stöder konfigurerbar skrivhastighet, markörstil och fördröjning mellan ord. Bra för koddemos, chattsimulationer och dramatiska textavslöjanden.

Nyckel-props: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Utveckling av anpassade komponenter

Att bygga dina egna anpassade komponenter är där Rendervid verkligen lyser. Vilken visuell effekt du än kan skapa med JavaScript och CSS kan bli en Rendervid-komponent.

Komponentstruktur

En Rendervid-anpassad komponent är en standard JavaScript-funktion som tar emot props och returnerar ett React-element. Nyckelskillnaden från typiska React-komponenter är att rendering är bildrutedriven snarare än händelsedriven.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Beräkna animeringsframsteg (0 till 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Använd framsteg för att driva animeringar
  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!");
}

Tillgängliga Props

Varje anpassad komponent tar emot dessa standard-props:

• frame – Det aktuella bildrutanumret, börjar på 0. Detta är din primära animeringsdrivare.
• fps – Bildrutor per sekund (vanligtvis 30 eller 60). Använd det för att konvertera bildrutor till sekunder.
• sceneDuration – Varaktighet för den aktuella scenen i sekunder. Multiplicera med fps för totalt antal bildrutor.
• layerSize – Ett objekt med width och height i pixlar, som matchar lagerdimensionerna definierade i mallen.
• props – Ett objekt som innehåller eventuella anpassade egenskaper definierade i mall-JSON.

React.createElement()-mönstret

Eftersom Rendervid-komponenter körs i en renderingsmiljö använder de React.createElement() snarare än JSX. Mönstret är enkelt:

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

Props-schemavalidering

Du kan definiera ett schema för din komponents props för att validera data vid mallinläsning:

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

Exempel: Partikelsystem

En partikelsystemkomponent som simulerar 150+ partiklar 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);
}

Exempel: Animerad räknare

En nummerräkningsanimering som interpolerar mellan start- och slutvärden:

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

För mer om hur anpassade komponenter passar in i den bredare mallstrukturen, se Mallsystemdokumentationen .

Mallredigerare

@rendervid/editor-paketet tillhandahåller en fullfjädrad visuell mallredigerare, som gör det möjligt för både icke-utvecklare och utvecklare att bygga Rendervid-mallar utan att skriva JSON för hand.

Tidslinjebaserad redigering

Redigeraren har en flerspårig tidslinje där varje lager representeras som ett block som kan dras, storleksändras och ompositioneras. Justera starttider, varaktigheter och lagerordning visuellt. Zooma in för bildrutenivåprecision eller zooma ut för en överblick på hög nivå.

Lagerhanteringspanel

En dedikerad panel listar alla lager i kompositionen med dra-och-släpp omordning, synlighetsväxlingar, låskontroller och gruppering. Lägg till nya lager från en komponentpalett som inkluderar alla 8 inbyggda typer och eventuella registrerade anpassade komponenter.

Egenskapspanel

Välj vilket lager som helst för att visa och redigera dess egenskaper i ett strukturerat formulär. Egenskapspanelen anpassar sig till lagertypen och visar endast relevanta fält. Färgväljare, skjutreglage, rullgardinsmenyer och textinmatningar gör det enkelt att justera varje detalj. Ändringar återspeglas omedelbart i förhandsvisningen.

Ångra/Gör om-historik

Varje ändring registreras i en historikstack med fullständigt ångra- och gör om-stöd. Navigera genom din redigeringshistorik med förtroende, med vetskap om att du alltid kan återgå till ett tidigare tillstånd.

Realtidsförhandsvisning

Redigeraren inkluderar en inbäddad Player-komponent som renderar mallen i realtid när du gör ändringar. Förhandsgranska hela kompositionen när som helst under redigeringen utan att behöva exportera eller rendera.

Player-komponent

@rendervid/player-paketet tillhandahåller en fristående React-komponent för förhandsvisning av Rendervid-mallar i webbläsaren.

React-integration

Installera och bädda in spelaren i vilken React-applikation som helst:

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

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

Tangentbordsgenvägar

Spelaren stöder inbyggda tangentbordskontroller för effektiv förhandsvisning:

Hastighetskontroll

Justera uppspelningshastigheten från 0.25x (fjärdedels hastighet) till 4x (fyrdubbel hastighet). Slow-motion-uppspelning är användbar för att granska animeringar bildruta för bildruta, medan snabbspolning hjälper till att skanna igenom längre kompositioner.

Callbacks och händelser

Spelaren exponerar callbacks för programmatisk kontroll:

Använd dessa callbacks för att synkronisera spelaren med externa UI-element, analys eller interaktiva upplevelser.

Komponentgalleri

Dessa exempel på anpassade komponenter demonstrerar omfattningen av vad som är möjligt med Renderivds anpassade lagertyp. Var och en är byggd med samma React.createElement()-mönster som beskrivs ovan.

Partikelexplosion

Ett fysikbaserat partikelsystem med 150+ partiklar, konfigurerbar gravitation, färg och explosionsradie. Partiklar spawnar från en central punkt och bågar utåt med realistisk rörelse.

Vågvisualisering

Ljudreaktiva vågmönster som svarar på frekvensdata. Flera våglager med konfigurerbar amplitud, frekvens och färg skapar en dynamisk, organisk visuell upplevelse.

Neontexteffekter

Lysande text med animerade neonljuseffekter, inklusive flimmer, puls och färgcykling. Anpassningsbar glödradie, färger och animeringshastighet.

Holografiskt gränssnitt

Ett sci-fi-inspirerat holografiskt UI med skanningslinjer, datautläsningar, rutnätsöverlagringar och animerade UI-element. Idealiskt för tekniktemade videor och futuristiska intron.

3D-kubrotation

En hårdvaruaccelererad CSS 3D-kub med texturerade ytor och mjuk rotation. Använder CSS perspective och transform3d för prestandakraftig 3D-rendering utan WebGL.

Dashboard för datavisualisering

En flergrafisk dashboardkomponent med animerade stapeldiagram, linjediagram och statistikräknare. Datadriven och konfigurerbar för rapporter, presentationer och databerättande.

Ytterligare exempel på anpassade komponenter inkluderar:

• Animerad räknare – nummerräkningsanimering med easing-funktioner
• Framstegsring – cirkulär framstegsindikator med konfigurerbar båge och färger
• Skrivmaskin – textskrivningsanimering med markör och variabel hastighet

Nästa steg

• Lär dig om Rendervid-mallsystemet för att strukturera scener och kompositioner
• Utforska AI-integration för att generera mallar med naturligt språk
• Se Distributionsguiden för rendering och export av slutgiltiga videor
• Återgå till Rendervid-översikten för en introduktion på hög nivå