Rendervid Komponenty - Typy Vrstiev, React Komponenty a Vizuálny Editor

Rendervid je postavený na komponentovej architektúre, ktorá robí tvorbu videa modulárnou, rozšíriteľnou a priateľskou pre vývojárov. Každý prvok v Rendervid šablóne je vrstva a každá vrstva má špecifický typ, ktorý určuje, ako sa renderuje. S 8 vstavaných typov vrstiev, rastúcou knižnicou predpripravených React komponentov, vizuálnym editorom šablón a samostatným prehrávačom vám Rendervid poskytuje všetko, co potrebujete na programovú produkciu profesionálneho video obsahu.

Táto stránka pokrýva celý komponentový ekosystém: od primitívnych typov vrstiev ako text a tvar, cez prehrávanie audia a videa, až po plne vlastné React komponenty, ktoré odomykajú neobmedzené kreatívne možnosti. Či už vytvárate jednoduchú titulkovú kartu alebo komplexnú animáciu riadenú dátami, pochopenie týchto komponentov je základom.

Vstavané Typy Vrstiev

Každá vrstva v Rendervid šablóne je definovaná ako JSON objekt s poľom type. Typ určuje dostupné vlastnosti a správanie renderovania. Nižšie je podrobná referencia pre každý z 8 vstavaných typov vrstiev.

Textová Vrstva

Vrstva text je najbohatšia primitíva v Rendervid. Renderuje štylizovaný text s plnou kontrolou nad typografiou, zarovnaním, farbou, efektmi a animáciou.

Vlastnosti typografie:

Rendervid obsahuje viac ako 100 Google Fontov. Môžete použiť ktorýkoľvek z nich zadaním vlastnosti fontFamily bez potreby načítať externé štýly.

Vlastnosti zarovnania:

Štýlovanie a efekty:

• color a backgroundColor pre základné farbenie
• textShadow pre tiene
• textStroke pre obrysový text
• textDecoration pre podčiarknutie, prečiarknutie
• textTransform pre veľké písmená, malé písmená, kapitalizáciu
• maxLines s automatickým skrátením pomocou výpustky
• Vstavaný efekt písacieho stroja pre znak-po-znaku odhalenie textu

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

Pre pokročilé textové animácie ako efekt písacieho stroja kombinujte textovú vrstvu s keyframe animáciami alebo použite vyhradený komponent TypewriterEffect .

Vrstva Obrázka

Vrstva image zobrazuje rastrové a vektorové obrázky s flexibilnými možnosťami veľkosti a orezania.

Kľúč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"
}

Vlastnosť fit funguje ako CSS object-fit:

• cover – škáluje obrázok tak, aby vyplnil vrstvu, orezanie prebytku
• contain – škáluje tak, aby sa celý zmestil do vrstvy, s možným letterboxingom
• fill – natiahne obrázok tak, aby presne zodpovedal rozmerom vrstvy
• none – renderuje obrázok v jeho natívnom rozlíšení

Vrstva Videa

Vrstva video vkladá video klipy do vašej kompozície s plnou kontrolou prehrávania.

Kľúč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žite startTime na preskočenie úvodov alebo skok na konkrétny bod v zdrojovom zábere. Kombinujte s playbackRate pre slow-motion (0.5) alebo časozberné (2.0) efekty.

Vrstva Tvaru

Vrstva shape kreslí vektorové tvary s výplňami, obrysmi, prechodmi a zaoblenými rohmi.

Typy tvarov:

Vlastnosti štýlovania:

• fill – jednoliatá farba alebo prechod
• stroke – farba okraja
• strokeWidth – hrúbka okraja
• borderRadius – zaoblené rohy pre obdĺžniky
• Prechody: lineárne aj radiálne výplne prechodov

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

Pre vlastné tvary použite typ path so štandardnými SVG path dátami:

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

Vrstva Audia

Vrstva audio pridáva audio stopy do vašej kompozície s kontrolou hlasitosti, prelínaním a plným reťazcom efektov.

Kľúčové vlastnosti:

Reťazec audio efektov:

Rendervid obsahuje vstavaný pipeline spracovania efektov. Dostupné efekty:

• EQ – ekvalizácia pre tvarovanie tónu
• Compressor – kompresia dynamického rozsahu
• Reverb – priestorový reverb
• Delay – efekt ozveny/delay
• Gain – zosilnenie alebo zoslabenie hlasitosti
• High-pass filter – odstránenie nízkych frekvencií
• Low-pass filter – odstránenie vysokých frekvencií
• Panning – stereo pozicovanie (vľavo/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 sa spracúvajú v poradí, čo vám umožňuje vytvárať sofistikované reťazce spracovania audia. Použite hodnoty pan od -1 (úplne vľavo) po 1 (úplne vpravo) pre stereo pozicovanie.

Vrstva Skupiny

Vrstva group je kontajner, ktorý obsahuje podradené vrstvy. Transformácie aplikované na skupinu ovplyvňujú všetky deti, čo uľahčuje pohyb, škálovanie, rotáciu alebo animáciu komplexných viacvrstvových kompozícií ako jednej jednotky.

Kľúč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": "Názov Karty",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Podporný popisný text ide sem.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

Skupiny sú neoceniteľné pre organizáciu komplexných šablón. Použite ich na vytvorenie opakovane použiteľných rozložení kariet, lower-thirds, prekryvov a iných zložených prvkov. Súradnice detí sú relatívne k pozícii skupiny.

Vrstva Lottie

Vrstva lottie renderuje Lottie animácie exportované z After Effects, Figma alebo iných animačných nástrojov.

Kľúč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
}

Vrstvy Lottie sú ideálne na pridanie vyleštených motion grafík, ikon, indikátorov načítavania a značkových animácií bez písania kódu snímka-po-snímke. Vlastnosti startFrame a endFrame vám umožňujú orezať animáciu tak, aby sa prehrával iba konkrétny segment.

Vlastná Vrstva

Vrstva custom je najvýkonnejší typ vrstvy v Rendervid. Umožňuje vám písať ľubovoľné React komponenty, ktoré renderujú snímku-po-snímke, čo vám dáva úplnú kontrolu nad vizuálnym výstupom.

Existujú tri typy nasadenia pre vlastné komponenty:

Inline Nasadenie

Vložte JavaScript kód priamo do vašej JSON šablóny. Najlepšie pre 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 Nasadenie

Načítajte komponent z externej URL ako je CDN. Najlepšie pre opakovane použiteľné komponenty zdieľané medzi šablónami.

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

Referenčné Nasadenie

Použite predregistrovaný komponent podľa názvu. Najlepšie pre komponenty z balíčka @rendervid/components alebo vlastných registrov.

{
  "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ý komponent dostáva štandardnú sadu props:

Vlastné komponenty tiež podporujú validáciu schémy pre props, čo zabezpečuje, že šablóny odovzdávajú správne typy dát a povinné polia každému komponentu.

Predpripravené React Komponenty

Balíček @rendervid/components obsahuje sadu produkčne pripravených komponentov, ktoré môžete okamžite použiť vo vašich šablónach.

AnimatedLineChart

Renderuje animované čiarové grafy s plynulými prechodovými výplňami, konfigurovateľnými dátovými bodmi, označeniami osí a animovanými efektmi vykresľovania. Ideálne pre video obsah riadený dátami ako sú správy, dashboardy a prezentácie.

Kľúčové props: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Vytvára fascinujúci efekt polárnej žiary (aurora borealis) pomocou vrstvených prechodov a plynulého pohybu. Perfektné pre atmosférické pozadia, úvodné sekvencie a ambientné vizuály.

Kľúčové props: colors, speed, intensity, blur

WaveBackground

Generuje animácie plynulých vĺn s konfigurovateľnými farbami, amplitúdami a frekvenciami. Použite ho pre štýlové pozadia, vizualizéry hudby alebo obsah s oceánskou tematikou.

Kľúčové props: waveCount, colors, amplitude, frequency, speed

SceneTransition

Poskytuje 17 profesionálnych typov prechodov pre prechod medzi scénami. Zahŕňa wipes, fades, zooms, slides a viac. Každý prechod je presný na snímku a konfigurovateľný.

Kľúčové props: transitionType, duration, direction, easing

TypewriterEffect

Renderuje znak-po-znaku odhalenie textu s blikajúcim kurzorom. Podporuje konfigurovateľnú rýchlosť písania, štýl kurzora a oneskorenie medzi slovami. Skvelé pre demo kódu, simulácie chatu a dramatické odhalenia textu.

Kľúčové props: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Vývoj Vlastných Komponentov

Vytváranie vlastných komponentov je miesto, kde Rendervid skutočne vyniká. Akýkoľvek vizuálny efekt, ktorý môžete vytvoriť pomocou JavaScript a CSS, sa môže stať Rendervid komponentom.

Štruktúra Komponentu

Vlastný komponent Rendervid je štandardná JavaScript funkcia, ktorá prijíma props a vracia React element. Kľúčový rozdiel od typických React komponentov je, že renderovanie je riadené snímkami namiesto udalostí.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Vypočítať priebeh animácie (0 až 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Použiť priebeh na riadenie animácií
  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ý komponent dostáva tieto štandardné props:

• frame – Aktuálne číslo snímky, začínajúc od 0. Toto je váš primárny ovládač animácie.
• fps – Snímok za sekundu (bežne 30 alebo 60). Použite ho na prevod snímok na sekundy.
• sceneDuration – Trvanie aktuálnej scény v sekundách. Vynásobte fps pre celkový počet snímok.
• layerSize – Objekt s width a height v pixeloch, zodpovedajúci rozmerom vrstvy definovaným v šablóne.
• props – Objekt obsahujúci akékoľvek vlastné vlastnosti definované v JSON šablóne.

Vzor React.createElement()

Keďže Rendervid komponenty bežia v renderovacom prostredí, používajú React.createElement() namiesto JSX. Vzor je jednoduchý:

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

Validácia Schémy Props

Môžete definovať schému pre props vášho komponentu na validáciu dát pri načítaní šablóny:

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

Príklad: Systém Častíc

Komponent systému častíc, ktorý simuluje viac ako 150 častíc 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);
}

Príklad: Animované Počítadlo

Animácia počítania čísel, ktorá interpoluje medzi počiatočnými a koncovými hodnotami:

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

Pre viac informácií o tom, ako sa vlastné komponenty začleňujú do širšej štruktúry šablón, pozrite si dokumentáciu Systému Šablón .

Editor Šablón

Balíček @rendervid/editor poskytuje plnohodnotný vizuálny editor šablón, ktorý umožňuje nevývojárom aj vývojárom vytvárať Rendervid šablóny bez ručného písania JSON.

Úpravy Založené na Časovej Osi

Editor obsahuje viacstopovú časovú os, kde je každá vrstva reprezentovaná ako blok, ktorý možno presúvať, meniť jeho veľkosť a preusporiadať. Vizuálne upravujte časy začiatku, trvanie a poradie vrstiev. Priblížte pre presnosť na úrovni snímky alebo oddiaľte pre prehľad na vysokej úrovni.

Panel Správy Vrstiev

Vyhradený panel zobrazuje všetky vrstvy v kompozícii s preusporiadaním pomocou drag-and-drop, prepínačmi viditeľnosti, ovládaním uzamknutia a zoskupovaním. Pridajte nové vrstvy z palety komponentov, ktorá zahŕňa všetkých 8 vstavaných typov a akékoľvek registrované vlastné komponenty.

Panel Vlastností

Vyberte ľubovoľnú vrstvu na zobrazenie a úpravu jej vlastností v štruktúrovanom formulári. Panel vlastností sa prispôsobuje typu vrstvy a zobrazuje iba relevantné polia. Výbery farieb, posuvníky, rozbaľovacie ponuky a textové vstupy uľahčujú doladenie každého detailu. Zmeny sa okamžite odzrkadľujú v náhľade.

História Undo/Redo

Každá zmena je zaznamenaná v zásobníku histórie s plnou podporou undo a redo. Prechádzajte históriou úprav s istotou, vediac, že sa vždy môžete vrátiť k predchádzajúcemu stavu.

Náhľad v Reálnom Čase

Editor obsahuje vložený komponent Prehrávača , ktorý renderuje šablónu v reálnom čase pri vykonávaní zmien. Zobrazujte celú kompozíciu v ktoromkoľvek bode počas úpravy bez potreby exportovať alebo renderovať.

Komponent Prehrávača

Balíček @rendervid/player poskytuje samostatný React komponent na zobrazenie Rendervid šablón v prehliadači.

Integrácia s React

Nainštalujte a vložte prehrávač do akejkoľvek React aplikácie:

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

function Preview({ template }) {
  return (
    <Player
      template={template}
      width={1920}
      height={1080}
      onComplete={() => console.log("Prehrávanie dokončené")}
    />
  );
}

Klávesové Skratky

Prehrávač podporuje vstavané klávesové ovládanie pre efektívne zobrazovanie:

Ovládanie Rýchlosti

Upravte rýchlosť prehrávania od 0.25x (štvrťová rýchlosť) po 4x (štvor násobná rýchlosť). Spomalené prehrávanie je užitočné pre kontrolu animácií snímka-po-snímke, zatiaľ čo rýchly posun pomáha skenovať dlhšie kompozície.

Callbacky a Udalosti

Prehrávač vystavuje callbacky pre programové ovládanie:

Použite tieto callbacky na synchronizáciu prehrávača s externými prvkami UI, analytiky alebo interaktívnych zážitkov.

Galéria Komponentov

Tieto príklady vlastných komponentov demonštrujú rozsah toho, čo je možné s vlastným typom vrstvy Rendervid. Každý je postavený pomocou rovnakého vzoru React.createElement() popísaného vyššie.

Explózia Častíc

Systém častíc založený na fyzike s viac ako 150 časticami, konfigurovateľnou gravitáciou, farbou a polomerom explózie. Častice sa objavujú z centrálneho bodu a oblúkom sa pohybujú von s realistickým pohybom.

Vizualizácia Vĺn

Audio-reaktívne vlnové vzory, ktoré reagujú na frekvenčné dáta. Viacero vrstiev vĺn s konfigurovateľnou amplitúdou, frekvenciou a farbou vytvárajú dynamický, organický vizuál.

Neonové Textové Efekty

Svietiaci text s animovanými efektmi neonového svetla, vrátane blikania, pulzovania a cyklovania farieb. Prispôsobiteľný polomer žiary, farby a rýchlosť animácie.

Holografické Rozhranie

Sci-fi inšpirované holografické UI so skenovaním čiar, výpismi dát, mriežkovými prekryvmi a animovanými prvkami UI. Ideálne pre technologicky zamerané videá a futuristické úvody.

3D Rotácia Kocky

Hardvérovo akcelerovaná CSS 3D kocka s texturovanými stranami a plynulou rotáciou. Používa CSS perspective a transform3d pre výkonné 3D renderovanie bez WebGL.

Dashboard Vizualizácie Dát

Komponent dashboardu s viacerými grafmi obsahujúci animované stĺpcové grafy, čiarové grafy a počítadlá štatistík. Riadený dátami a konfigurovateľný pre správy, prezentácie a rozprávanie príbehov pomocou dát.

Ďalšie príklady vlastných komponentov zahŕňajú:

• Animované Počítadlo – animácia počítania čísel s easingovými funkciami
• Kruhový Ukazovateľ Priebehu – kruhový indikátor priebehu s konfigurovateľným oblúkom a farbami
• Písací Stroj – animácia písania textu s kurzorom a premenlivou rýchlosťou

Ďalšie Kroky

• Dozviete sa o Rendervid Systéme Šablón pre štruktúrovanie scén a kompozícií
• Preskúmajte AI Integráciu na generovanie šablón pomocou prirodzeného jazyka
• Pozrite si Príručku Nasadenia pre renderovanie a export finálnych videí
• Vráťte sa k Rendervid prehľadu pre úvod na vysokej úrovni