Rendervid Komponenty - Typy vrstev, React komponenty a vizuální editor

Rendervid je postaven na komponentové architektuře, která činí tvorbu videa modulární, rozšiřitelnou a přátelskou k vývojářům. Každý prvek v Rendervid šabloně je vrstva a každá vrstva má specifický typ, který určuje, jak se renderuje. S 8 vestavěnými typy vrstev, rostoucí knihovnou předpřipravených React komponent, vizuálním editorem šablon a samostatným přehrávačem vám Rendervid dává vše, co potřebujete k programové produkci profesionálního video obsahu.

Tato stránka pokrývá celý ekosystém komponent: od primitivních typů vrstev jako text a tvar, přes přehrávání audia a videa, až po plně vlastní React komponenty, které odemykají neomezené kreativní možnosti. Ať už vytváříte jednoduchou titulkovou kartu nebo komplexní datově řízenou animaci, pochopení těchto komponent je základem.

Vestavěné typy vrstev

Každá vrstva v Rendervid šabloně je definována jako JSON objekt s polem type. Typ určuje dostupné vlastnosti a chování renderování. Níže je podrobná reference pro každý z 8 vestavěných typů vrstev.

Textová vrstva

Vrstva text je nejbohatší primitivum v Rendervid. Renderuje stylizovaný text s plnou kontrolou nad typografií, zarovnáním, barvou, efekty a animací.

Vlastnosti typografie:

Rendervid je dodáván s více než 100 Google fonty vestavěnými. Můžete použít kterýkoli z nich zadáním vlastnosti fontFamily bez nutnosti načítat externí styly.

Vlastnosti zarovnání:

Stylování a efekty:

• color a backgroundColor pro základní barvení
• textShadow pro stínování
• textStroke pro obrysový text
• textDecoration pro podtržení, přeškrtnutí
• textTransform pro velká písmena, malá písmena, kapitálky
• maxLines s automatickým zkrácením pomocí trojtečky
• Vestavěný efekt psacího stroje pro odhalování textu znak po znaku

{
  "type": "text",
  "text": "Vítejte v 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)"
}

Pro pokročilé textové animace jako efekt psacího stroje zkombinujte textovou vrstvu s klíčovými snímky animace nebo použijte dedikovanou komponentu TypewriterEffect .

Vrstva obrázku

Vrstva image zobrazuje rastrové a vektorové obrázky s flexibilními možnostmi velikosti a ořezu.

Klíčové vlastnosti:

Podporované formáty: 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"
}

Vlastnost fit funguje jako CSS object-fit:

• cover – škáluje obrázek tak, aby vyplnil vrstvu, ořízne přebytek
• contain – škáluje tak, aby se vešel celý do vrstvy, s možným letterboxingem
• fill – roztáhne obrázek tak, aby přesně odpovídal rozměrům vrstvy
• none – renderuje obrázek v jeho nativním rozlišení

Video vrstva

Vrstva video vkládá video klipy do vaší kompozice s plnou kontrolou přehrávání.

Klíčové vlastnosti:

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

Použijte startTime k přeskočení úvodů nebo skoku na konkrétní místo ve zdrojovém záznamu. Zkombinujte s playbackRate pro efekty zpomalení (0.5) nebo časosběru (2.0).

Vrstva tvaru

Vrstva shape kreslí vektorové tvary s výplněmi, obrysem, gradienty a zaoblenými rohy.

Typy tvarů:

Vlastnosti stylování:

• fill – plná barva nebo gradient
• stroke – barva okraje
• strokeWidth – tloušťka okraje
• borderRadius – zaoblené rohy pro obdélníky
• Gradienty: výplně jak linear, tak radial gradientem

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

Pro vlastní tvary použijte typ path se standardními SVG path daty:

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

Audio vrstva

Vrstva audio přidává audio stopy do vaší kompozice s ovládáním hlasitosti, prolínáním a plným řetězcem efektů.

Klíčové vlastnosti:

Řetězec audio efektů:

Rendervid obsahuje vestavěný pipeline pro zpracování efektů. Dostupné efekty:

• EQ – ekvalizace pro tvarování tónu
• Compressor – komprese dynamického rozsahu
• Reverb – prostorový reverb
• Delay – efekt echa/zpoždění
• Gain – zesílení nebo zeslabení hlasitosti
• High-pass filter – odstranění nízkých frekvencí
• Low-pass filter – odstranění vysokých frekvencí
• Panning – stereo pozicování (vlevo/vpravo)

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

Efekty jsou zpracovávány v pořadí, což vám umožňuje vytvářet sofistikované řetězce zpracování audia. Použijte hodnoty pan od -1 (úplně vlevo) do 1 (úplně vpravo) pro stereo pozicování.

Vrstva skupiny

Vrstva group je kontejner, který obsahuje podřízené vrstvy. Transformace aplikované na skupinu ovlivňují všechny potomky, což usnadňuje pohyb, škálování, rotaci nebo animaci komplexních vícevrstvých kompozic jako jediné jednotky.

Klíčové vlastnosti:

{
  "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": "Nadpis karty",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Podpůrný popisný text je zde.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

Skupiny jsou neocenitelné pro organizaci komplexních šablon. Použijte je k vytváření opakovaně použitelných rozložení karet, dolních třetin, překryvů a dalších kompozitních prvků. Souřadnice potomků jsou relativní k pozici skupiny.

Lottie vrstva

Vrstva lottie renderuje Lottie animace exportované z After Effects, Figma nebo jiných animačních nástrojů.

Klíčové vlastnosti:

{
  "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 vrstvy jsou ideální pro přidávání vybroušené motion grafiky, ikon, indikátorů načítání a značkových animací bez psaní kódu snímek po snímku. Vlastnosti startFrame a endFrame vám umožňují oříznout animaci tak, aby přehrávala pouze konkrétní segment.

Vlastní vrstva

Vrstva custom je nejsilnější typ vrstvy v Rendervid. Umožňuje vám psát libovolné React komponenty, které renderují snímek po snímku, což vám dává úplnou kontrolu nad vizuálním výstupem.

Existují tři typy nasazení pro vlastní komponenty:

Inline nasazení

Vložte JavaScript kód přímo do vaší JSON šablony. Nejlepší pro malé, samostatné komponenty.

{
  "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 nasazení

Načtěte komponentu z externí URL, jako je CDN. Nejlepší pro opakovaně použitelné komponenty sdílené napříč šablonami.

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

Reference nasazení

Použijte předregistrovanou komponentu podle názvu. Nejlepší pro komponenty z balíčku @rendervid/components nebo vlastních registrů.

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

Každá vlastní komponenta dostává standardní sadu props:

Vlastní komponenty také podporují validaci schématu pro props, což zajišťuje, že šablony předávají správné datové typy a povinná pole každé komponentě.

Předpřipravené React komponenty

Balíček @rendervid/components je dodáván se sadou produkčně připravených komponent, které můžete okamžitě použít ve svých šablonách.

AnimatedLineChart

Renderuje animované čárové grafy s hladkými gradientovými výplněmi, konfigurovatelné datové body, popisky os a animované efekty vykreslování. Ideální pro datově řízený video obsah jako zprávy, dashboardy a prezentace.

Klíčové props: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Vytváří fascinující efekt polární záře (aurora borealis) pomocí vrstvených gradientů a plynulého pohybu. Perfektní pro atmosférická pozadí, úvodní sekvence a ambientní vizuály.

Klíčové props: colors, speed, intensity, blur

WaveBackground

Generuje fluidní vlnové animace s konfigurovatelné barvy, amplitudy a frekvence. Použijte je pro stylová pozadí, hudební vizualizéry nebo obsah s oceánskou tématikou.

Klíčové props: waveCount, colors, amplitude, frequency, speed

SceneTransition

Poskytuje 17 profesionálních typů přechodů pro přechody mezi scénami. Zahrnuje wipes, fades, zoomy, slides a další. Každý přechod je snímkově přesný a konfigurovatelný.

Klíčové props: transitionType, duration, direction, easing

TypewriterEffect

Renderuje odhalování textu znak po znaku s blikajícím kurzorem. Podporuje konfigurovatelnou rychlost psaní, styl kurzoru a zpoždění mezi slovy. Skvělé pro ukázky kódu, simulace chatu a dramatická odhalení textu.

Klíčové props: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Vývoj vlastních komponent

Vytváření vlastních komponent je místo, kde Rendervid skutečně vyniká. Jakýkoli vizuální efekt, který můžete vytvořit pomocí JavaScriptu a CSS, se může stát Rendervid komponentou.

Struktura komponenty

Vlastní komponenta Rendervid je standardní JavaScriptová funkce, která přijímá props a vrací React element. Klíčový rozdíl oproti typickým React komponentám je, že renderování je řízeno snímky spíše než událostmi.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Vypočítat pokrok animace (0 až 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Použít pokrok k řízení animací
  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 || "Ahoj, Rendervid!");
}

Dostupné Props

Každá vlastní komponenta dostává tyto standardní props:

• frame – Aktuální číslo snímku, začínající od 0. Toto je váš primární ovladač animace.
• fps – Snímků za sekundu (běžně 30 nebo 60). Použijte ho k převodu snímků na sekundy.
• sceneDuration – Délka aktuální scény v sekundách. Vynásobte fps pro celkový počet snímků.
• layerSize – Objekt s width a height v pixelech, odpovídající rozměrům vrstvy definovaným v šabloně.
• props – Objekt obsahující jakékoli vlastní vlastnosti definované v JSON šabloně.

Vzor React.createElement()

Protože Rendervid komponenty běží v renderovacím prostředí, používají React.createElement() spíše než JSX. Vzor je přímočarý:

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

Validace schématu Props

Můžete definovat schéma pro props vaší komponenty k validaci dat při načítání šablony:

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

Příklad: Částicový systém

Komponenta částicového systému, která simuluje více než 150 částic s fyzikou:

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

Příklad: Animované počítadlo

Animace počítání čísel, která interpoluje mezi počáteční a koncovou hodnotou:

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

Pro více informací o tom, jak vlastní komponenty zapadají do širší struktury šablony, viz dokumentace systému šablon .

Editor šablon

Balíček @rendervid/editor poskytuje plně vybavený vizuální editor šablon, který umožňuje nevývojářům i vývojářům vytvářet Rendervid šablony bez ručního psaní JSON.

Editace založená na časové ose

Editor obsahuje vícekanálovou časovou osu, kde je každá vrstva reprezentována jako blok, který lze přetahovat, měnit velikost a přemísťovat. Upravujte časy začátku, délky a pořadí vrstev vizuálně. Přibližte pro přesnost na úrovni snímků nebo oddalte pro přehled na vysoké úrovni.

Panel správy vrstev

Dedikovaný panel uvádí všechny vrstvy v kompozici s přeuspořádáním přetažením, přepínači viditelnosti, ovládáním zamčení a seskupováním. Přidávejte nové vrstvy z palety komponent, která zahrnuje všech 8 vestavěných typů a jakékoli registrované vlastní komponenty.

Panel vlastností

Vyberte jakoukoli vrstvu pro zobrazení a úpravu jejích vlastností ve strukturovaném formuláři. Panel vlastností se přizpůsobuje typu vrstvy a zobrazuje pouze relevantní pole. Výběry barev, posuvníky, rozbalovací seznamy a textová pole usnadňují úpravu každého detailu. Změny se okamžitě projeví v náhledu.

Historie zpět/vpřed

Každá změna je zaznamenána v historickém zásobníku s plnou podporou zpět a vpřed. Procházejte historii úprav s jistotou, že se vždy můžete vrátit k předchozímu stavu.

Náhled v reálném čase

Editor obsahuje vestavěnou komponentu přehrávače , která renderuje šablonu v reálném čase při provádění změn. Náhled celé kompozice v jakémkoli bodě během editace bez nutnosti exportu nebo renderování.

Komponenta přehrávače

Balíček @rendervid/player poskytuje samostatnou React komponentu pro náhled Rendervid šablon v prohlížeči.

React integrace

Nainstalujte a vložte přehrávač do jakékoli React aplikace:

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

function Preview({ template }) {
  return (
    <Player
      template={template}
      width={1920}
      height={1080}
      onComplete={() => console.log("Přehrávání dokončeno")}
    />
  );
}

Klávesové zkratky

Přehrávač podporuje vestavěné klávesové ovládání pro efektivní náhled:

Ovládání rychlosti

Upravte rychlost přehrávání od 0.25x (čtvrtinová rychlost) do 4x (čtyřnásobná rychlost). Zpomalené přehrávání je užitečné pro kontrolu animací snímek po snímku, zatímco rychlý posun vpřed pomáhá prohlížet delší kompozice.

Callbacky a události

Přehrávač vystavuje callbacky pro programové ovládání:

Použijte tyto callbacky k synchronizaci přehrávače s externími prvky UI, analytikou nebo interaktivními zkušenostmi.

Galerie komponent

Tyto ukázkové vlastní komponenty demonstrují rozsah toho, co je možné s vlastním typem vrstvy Rendervid. Každá je postavena pomocí stejného vzoru React.createElement() popsaného výše.

Výbuch částic

Fyzikálně založený částicový systém s více než 150 částicemi, konfigurovatelná gravitace, barva a poloměr výbuchu. Částice se objevují z centrálního bodu a obloukem se rozlétají s realistickým pohybem.

Vizualizace vln

Audio-reaktivní vlnové vzory, které reagují na frekvenční data. Více vlnových vrstev s konfigurovatelnou amplitudou, frekvencí a barvou vytváří dynamický, organický vizuál.

Neonové textové efekty

Zářící text s animovanými neonovými světelnými efekty, včetně blikání, pulzování a cyklování barev. Konfigurovatelný poloměr záře, barvy a rychlost animace.

Holografické rozhraní

Sci-fi inspirované holografické UI se skenujícími liniemi, datovými výpisy, mřížkovými překryvy a animovanými UI prvky. Ideální pro technologicky zaměřená videa a futuristická intra.

3D rotace kostky

Hardwarově akcelerovaná CSS 3D kostka s texturovanými stranami a hladkou rotací. Používá CSS perspective a transform3d pro výkonné 3D renderování bez WebGL.

Dashboard vizualizace dat

Vícegrafoví dashboardová komponenta obsahující animované sloupcové grafy, čárové grafy a počítadla statistik. Datově řízená a konfigurovatelná pro zprávy, prezentace a datové vyprávění příběhů.

Další příklady vlastních komponent zahrnují:

• Animované počítadlo – animace počítání čísel s easing funkcemi
• Kruhový ukazatel postupu – kruhový indikátor postupu s konfigurovatelným obloukem a barvami
• Psací stroj – animace psaní textu s kurzorem a proměnnou rychlostí

Další kroky

• Zjistěte více o systému šablon Rendervid pro strukturování scén a kompozic
• Prozkoumejte AI integraci pro generování šablon pomocí přirozeného jazyka
• Podívejte se na průvodce nasazením pro renderování a export finálních videí
• Vraťte se na přehled Rendervid pro úvod na vysoké úrovni