Componente Rendervid - Tipuri de straturi, componente React și editor vizual

Rendervid este construit pe o arhitectură bazată pe componente care face crearea de videoclipuri modulară, extensibilă și prietenoasă pentru dezvoltatori. Fiecare element dintr-un șablon Rendervid este un strat, iar fiecare strat are un tip specific care determină modul în care se randează. Cu 8 tipuri de straturi încorporate, o bibliotecă în creștere de componente React pre-construite, un editor vizual de șabloane și un player standalone, Rendervid vă oferă tot ce aveți nevoie pentru a produce conținut video profesional în mod programatic.

Această pagină acoperă întregul ecosistem de componente: de la tipuri primitive de straturi precum text și formă, prin redare audio și video, până la componente React complet personalizate care deblochează posibilități creative nelimitate. Indiferent dacă construiți un card de titlu simplu sau o animație complexă bazată pe date, înțelegerea acestor componente este fundamentul.

Tipuri de straturi încorporate

Fiecare strat dintr-un șablon Rendervid este definit ca un obiect JSON cu un câmp type. Tipul determină proprietățile disponibile și comportamentul de randare. Mai jos este o referință detaliată pentru fiecare dintre cele 8 tipuri de straturi încorporate.

Strat text

Stratul text este primitiva cea mai bogată în funcționalități din Rendervid. Randează text stilizat cu control complet asupra tipografiei, alinierii, culorii, efectelor și animației.

Proprietăți tipografie:

Rendervid vine cu peste 100 de fonturi Google încorporate. Le puteți folosi pe oricare dintre ele specificând proprietatea fontFamily fără a fi nevoie să încărcați foi de stil externe.

Proprietăți aliniere:

Stilizare și efecte:

• color și backgroundColor pentru colorare de bază
• textShadow pentru umbre
• textStroke pentru text contur
• textDecoration pentru subliniere, linie prin mijloc
• textTransform pentru majuscule, minuscule, capitalizare
• maxLines cu trunchierea automată prin elipsă
• Efect typewriter încorporat pentru afișare text caracter cu caracter

{
  "type": "text",
  "text": "Bine ați venit la 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)"
}

Pentru animații text avansate precum efectul typewriter, combinați stratul text cu animații keyframe sau folosiți componenta TypewriterEffect dedicată.

Strat imagine

Stratul image afișează imagini raster și vectoriale cu opțiuni flexibile de dimensionare și decupare.

Proprietăți cheie:

Formate suportate: 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"
}

Proprietatea fit funcționează ca CSS object-fit:

• cover – scalează imaginea pentru a umple stratul, decupând excesul
• contain – scalează pentru a încăpea complet în strat, cu posibil letterboxing
• fill – întinde imaginea pentru a se potrivi exact cu dimensiunile stratului
• none – randează imaginea la rezoluția sa nativă

Strat video

Stratul video încorporează clipuri video în compoziția dvs. cu control complet al redării.

Proprietăți cheie:

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

Folosiți startTime pentru a sări peste introduceri sau pentru a sări la un punct specific din materialul sursă. Combinați cu playbackRate pentru efecte slow-motion (0.5) sau time-lapse (2.0).

Strat formă

Stratul shape desenează forme vectoriale cu umpleri, contururi, gradienți și colțuri rotunjite.

Tipuri de forme:

Proprietăți stilizare:

• fill – culoare solidă sau gradient
• stroke – culoare contur
• strokeWidth – grosime contur
• borderRadius – colțuri rotunjite pentru dreptunghiuri
• Gradienți: umpleri gradient atât linear cât și radial

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

Pentru forme personalizate, folosiți tipul path cu date cale SVG standard:

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

Strat audio

Stratul audio adaugă piste audio compoziției dvs. cu control volum, estompare și un lanț complet de efecte.

Proprietăți cheie:

Lanț efecte audio:

Rendervid include un pipeline de procesare efecte încorporat. Efecte disponibile:

• EQ – egalizare pentru modelarea tonului
• Compressor – compresie interval dinamic
• Reverb – reverberație spațială
• Delay – efect ecou/întârziere
• Gain – amplificare sau atenuare volum
• High-pass filter – elimină frecvențele joase
• Low-pass filter – elimină frecvențele înalte
• Panning – poziționare stereo (stânga/dreapta)

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

Efectele sunt procesate în ordine, permițându-vă să construiți lanțuri sofisticate de procesare audio. Folosiți valori pan de la -1 (complet stânga) la 1 (complet dreapta) pentru poziționare stereo.

Strat grup

Stratul group este un container care conține straturi copil. Transformările aplicate grupului afectează toți copiii, facilitând mutarea, scalarea, rotirea sau animarea compoziții complexe cu mai multe straturi ca o singură unitate.

Proprietăți cheie:

{
  "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": "Titlu card",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Textul descriptiv de suport merge aici.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

Grupurile sunt neprețuite pentru organizarea șabloanelor complexe. Folosiți-le pentru a crea layout-uri de carduri reutilizabile, lower-thirds, overlay-uri și alte elemente compozite. Coordonatele copiilor sunt relative la poziția grupului.

Strat Lottie

Stratul lottie randează animații Lottie exportate din After Effects, Figma sau alte instrumente de animație.

Proprietăți cheie:

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

Straturile Lottie sunt ideale pentru adăugarea de grafică de mișcare lustruită, pictograme, indicatori de încărcare și animații de brand fără a scrie cod cadru cu cadru. Proprietățile startFrame și endFrame vă permit să tăiați animația pentru a reda doar un segment specific.

Strat personalizat

Stratul custom este cel mai puternic tip de strat din Rendervid. Vă permite să scrieți componente React arbitrare care randează cadru cu cadru, oferindu-vă control complet asupra ieșirii vizuale.

Există trei tipuri de implementare pentru componentele personalizate:

Implementare Inline

Încorporați codul JavaScript direct în șablonul dvs. JSON. Cel mai bun pentru componente mici, autonome.

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

Implementare URL

Încărcați o componentă de la un URL extern precum un CDN. Cel mai bun pentru componente reutilizabile partajate între șabloane.

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

Implementare prin referință

Folosiți o componentă pre-înregistrată după nume. Cel mai bun pentru componente din pachetul @rendervid/components sau registre personalizate.

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

Fiecare componentă personalizată primește un set standard de props:

Componentele personalizate suportă de asemenea validare schemă pentru props, asigurându-se că șabloanele transmit tipurile de date corecte și câmpurile necesare fiecărei componente.

Componente React pre-construite

Pachetul @rendervid/components vine cu un set de componente gata de producție pe care le puteți folosi imediat în șabloanele dvs.

AnimatedLineChart

Randează diagrame liniare animate cu umpleri gradient netede, puncte de date configurabile, etichete axe și efecte de desenare animată. Ideal pentru conținut video bazat pe date precum rapoarte, tablouri de bord și prezentări.

Props cheie: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Creează un efect hipnotizant de aurore boreale folosind gradienți stratificați și mișcare fluidă. Perfect pentru fundaluri atmosferice, secvențe intro și vizuale ambientale.

Props cheie: colors, speed, intensity, blur

WaveBackground

Generează animații de unde fluide cu culori, amplitudini și frecvențe configurabile. Folosiți-l pentru fundaluri elegante, vizualizatoare muzicale sau conținut cu temă oceanică.

Props cheie: waveCount, colors, amplitude, frequency, speed

SceneTransition

Oferă 17 tipuri de tranziții profesionale pentru trecerea între scene. Include wipes, fades, zooms, slides și multe altele. Fiecare tranziție este precisă la cadru și configurabilă.

Props cheie: transitionType, duration, direction, easing

TypewriterEffect

Randează afișare text caracter cu caracter cu un cursor clipitor. Suportă viteză de tastare configurabilă, stil cursor și întârziere între cuvinte. Grozav pentru demo-uri cod, simulări chat și afișări text dramatice.

Props cheie: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Dezvoltare componente personalizate

Construirea propriilor componente personalizate este locul unde Rendervid strălucește cu adevărat. Orice efect vizual pe care îl puteți crea cu JavaScript și CSS poate deveni o componentă Rendervid.

Structura componentei

O componentă personalizată Rendervid este o funcție JavaScript standard care primește props și returnează un element React. Diferența cheie față de componentele React tipice este că randarea este bazată pe cadre mai degrabă decât bazată pe evenimente.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Calculează progresul animației (0 la 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Folosește progresul pentru a conduce animațiile
  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 || "Salut, Rendervid!");
}

Props disponibile

Fiecare componentă personalizată primește aceste props standard:

• frame – Numărul cadrului curent, începând de la 0. Acesta este principalul dvs. motor de animație.
• fps – Cadre pe secundă (de obicei 30 sau 60). Folosiți-l pentru a converti cadrele în secunde.
• sceneDuration – Durata scenei curente în secunde. Înmulțiți cu fps pentru numărul total de cadre.
• layerSize – Un obiect cu width și height în pixeli, potrivit cu dimensiunile stratului definite în șablon.
• props – Un obiect care conține orice proprietăți personalizate definite în JSON-ul șablonului.

Modelul React.createElement()

Deoarece componentele Rendervid rulează într-un mediu de randare, ele folosesc React.createElement() mai degrabă decât JSX. Modelul este simplu:

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

Validare schemă Props

Puteți defini o schemă pentru props-urile componentei dvs. pentru a valida datele la momentul încărcării șablonului:

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

Exemplu: Sistem de particule

O componentă sistem de particule care simulează peste 150 de particule cu fizică:

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

Exemplu: Contor animat

O animație de numărare care interpolează între valorile de start și sfârșit:

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

Pentru mai multe despre cum se încadrează componentele personalizate în structura mai largă a șablonului, consultați documentația Sistem șabloane .

Editor șabloane

Pachetul @rendervid/editor oferă un editor vizual complet de șabloane, permițând atât non-dezvoltatorilor cât și dezvoltatorilor să construiască șabloane Rendervid fără a scrie JSON manual.

Editare bazată pe Timeline

Editorul prezintă un timeline multi-pistă unde fiecare strat este reprezentat ca un bloc care poate fi tras, redimensionat și repoziționat. Ajustați vizual timpii de start, durațiile și ordinea straturilor. Măriți pentru precizie la nivel de cadru sau micșorați pentru o privire de ansamblu de nivel înalt.

Panou gestionare straturi

Un panou dedicat listează toate straturile din compoziție cu reordonare drag-and-drop, comutatoare de vizibilitate, controale de blocare și grupare. Adăugați straturi noi dintr-o paletă de componente care include toate cele 8 tipuri încorporate și orice componente personalizate înregistrate.

Panou proprietăți

Selectați orice strat pentru a vizualiza și edita proprietățile sale într-un formular structurat. Panoul de proprietăți se adaptează la tipul de strat, afișând doar câmpurile relevante. Selectoarele de culori, glisorele, meniurile dropdown și câmpurile text facilitează ajustarea fiecărui detaliu. Modificările se reflectă imediat în previzualizare.

Istoric Undo/Redo

Fiecare modificare este înregistrată într-o stivă de istoric cu suport complet undo și redo. Navigați prin istoricul editărilor cu încredere, știind că puteți întotdeauna reveni la o stare anterioară.

Previzualizare în timp real

Editorul include o componentă Player încorporată care randează șablonul în timp real pe măsură ce faceți modificări. Previzualizați compoziția completă în orice moment în timpul editării fără a fi nevoie să exportați sau să randați.

Componentă Player

Pachetul @rendervid/player oferă o componentă React standalone pentru previzualizarea șabloanelor Rendervid în browser.

Integrare React

Instalați și încorporați playerul în orice aplicație React:

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

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

Comenzi rapide tastatură

Playerul suportă controale tastatură încorporate pentru previzualizare eficientă:

Control viteză

Ajustați viteza de redare de la 0.25x (un sfert viteză) la 4x (viteză cvadruplu). Redarea slow-motion este utilă pentru revizuirea animațiilor cadru cu cadru, în timp ce derularea rapidă ajută la scanarea compoziiilor mai lungi.

Callback-uri și evenimente

Playerul expune callback-uri pentru control programatic:

Folosiți aceste callback-uri pentru a sincroniza playerul cu elemente UI externe, analize sau experiențe interactive.

Galerie componente

Aceste exemple de componente personalizate demonstrează gama a ceea ce este posibil cu tipul de strat personalizat Rendervid. Fiecare este construită folosind același model React.createElement() descris mai sus.

Explozie particule

Un sistem de particule bazat pe fizică cu peste 150 de particule, gravitație configurabilă, culoare și rază de explozie. Particulele apar dintr-un punct central și arcuiesc în afară cu mișcare realistă.

Vizualizare unde

Modele de unde reactive la audio care răspund la datele de frecvență. Mai multe straturi de unde cu amplitudine, frecvență și culoare configurabile creează un vizual dinamic, organic.

Efecte text neon

Text strălucitor cu efecte de lumină neon animate, incluzând pâlpâire, pulsare și ciclare culori. Rază de strălucire, culori și viteză animație personalizabile.

Interfață holografică

O interfață UI holografică inspirată de sci-fi cu linii de scanare, afișaje date, suprapuneri grilă și elemente UI animate. Ideal pentru videoclipuri cu temă tehnologică și introduceri futuriste.

Rotație cub 3D

Un cub 3D CSS accelerat hardware cu fețe texturate și rotație netedă. Folosește CSS perspective și transform3d pentru randare 3D performantă fără WebGL.

Tablou de bord vizualizare date

O componentă tablou de bord multi-grafic cu diagrame cu bare animate, grafice liniare și contoare statistici. Bazată pe date și configurabilă pentru rapoarte, prezentări și povestiri cu date.

Exemple suplimentare de componente personalizate includ:

• Contor animat – animație numărare cu funcții de easing
• Inel progres – indicator progres circular cu arc și culori configurabile
• Typewriter – animație tastare text cu cursor și viteză variabilă

Pași următori

• Aflați despre Sistemul șabloane Rendervid pentru structurarea scenelor și compozițiilor
• Explorați Integrarea AI pentru a genera șabloane cu limbaj natural
• Consultați ghidul Implementare pentru randarea și exportarea videoclipurilor finale
• Reveniți la prezentarea generală Rendervid pentru o introducere de nivel înalt