Rendervid Bileşenleri - Katman Tipleri, React Bileşenleri ve Görsel Editör

Rendervid, video oluşturmayı modüler, genişletilebilir ve geliştirici dostu yapan bileşen tabanlı bir mimari üzerine kuruludur. Bir Rendervid şablonundaki her öğe bir katmandır ve her katmanın nasıl render edileceğini belirleyen belirli bir tipi vardır. 8 yerleşik katman tipi, büyüyen bir önceden hazırlanmış React bileşenleri kütüphanesi, görsel bir şablon editörü ve bağımsız bir oynatıcı ile Rendervid, programatik olarak profesyonel video içeriği üretmek için ihtiyacınız olan her şeyi sunar.

Bu sayfa tam bileşen ekosistemini kapsar: metin ve şekil gibi temel katman tiplerinden, ses ve video oynatmaya, sınırsız yaratıcı olasılıkların kilidini açan tamamen özel React bileşenlerine kadar. İster basit bir başlık kartı, ister karmaşık veri odaklı bir animasyon oluşturuyor olun, bu bileşenleri anlamak temeldir.

Yerleşik Katman Tipleri

Bir Rendervid şablonundaki her katman, type alanına sahip bir JSON nesnesi olarak tanımlanır. Tip, kullanılabilir özellikleri ve render davranışını belirler. Aşağıda 8 yerleşik katman tipinin her biri için ayrıntılı bir referans bulunmaktadır.

Metin Katmanı

text katmanı, Rendervid’deki en özellik açısından zengin ilkeldir. Tipografi, hizalama, renk, efektler ve animasyon üzerinde tam kontrol ile stilize metin render eder.

Tipografi özellikleri:

Rendervid, yerleşik olarak 100+ Google Yazı Tipi ile birlikte gelir. Harici stil sayfaları yüklemeye gerek kalmadan fontFamily özelliğini belirterek bunlardan herhangi birini kullanabilirsiniz.

Hizalama özellikleri:

Stil ve efektler:

• Temel renklendirme için color ve backgroundColor
• Gölge efektleri için textShadow
• Çerçeveli metin için textStroke
• Alt çizgi, üstü çizili için textDecoration
• Büyük harf, küçük harf, baş harfleri büyük için textTransform
• Otomatik üç nokta kısaltma ile maxLines
• Karakter karakter metin gösterimi için yerleşik daktilo efekti

{
  "type": "text",
  "text": "Rendervid'e Hoş Geldiniz",
  "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)"
}

Daktilo efekti gibi gelişmiş metin animasyonları için, metin katmanını anahtar kare animasyonları ile birleştirin veya özel TypewriterEffect bileşenini kullanın.

Resim Katmanı

image katmanı, esnek boyutlandırma ve kırpma seçenekleri ile raster ve vektör görüntüler görüntüler.

Ana özellikler:

Desteklenen formatlar: 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 özelliği CSS object-fit gibi çalışır:

• cover – resmi katmanı dolduracak şekilde ölçeklendirir, fazlalığı kırpar
• contain – resmi tamamen katman içine sığacak şekilde ölçeklendirir, olası letterbox ile
• fill – resmi katman boyutlarına tam olarak eşleşecek şekilde uzatır
• none – resmi yerel çözünürlüğünde render eder

Video Katmanı

video katmanı, tam oynatma kontrolü ile video kliplerini kompozisyonunuza gömer.

Ana özellikler:

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

Giriş kısımlarını atlamak veya kaynak görüntüdeki belirli bir noktaya atlamak için startTime kullanın. Ağır çekim (0.5) veya hızlandırılmış (2.0) efektler için playbackRate ile birleştirin.

Şekil Katmanı

shape katmanı, dolgular, konturlar, degradeler ve yuvarlatılmış köşeler ile vektör şekiller çizer.

Şekil tipleri:

Stil özellikleri:

• fill – düz renk veya degrade
• stroke – kenarlık rengi
• strokeWidth – kenarlık kalınlığı
• borderRadius – dikdörtgenler için yuvarlatılmış köşeler
• Degradeler: hem linear hem de radial degrade dolguları

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

Özel şekiller için, standart SVG yol verisi ile path tipini kullanın:

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

Ses Katmanı

audio katmanı, ses kontrolü, solma ve tam bir efekt zinciri ile kompozisyonunuza ses parçaları ekler.

Ana özellikler:

Ses efekt zinciri:

Rendervid, yerleşik bir efekt işleme hattı içerir. Mevcut efektler:

• EQ – ton şekillendirme için ekolayzasyon
• Compressor – dinamik aralık sıkıştırması
• Reverb – mekansal yankılanma
• Delay – yankı/gecikme efekti
• Gain – ses artırma veya azaltma
• High-pass filter – düşük frekansları kaldır
• Low-pass filter – yüksek frekansları kaldır
• Panning – stereo konumlandırma (sol/sağ)

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

Efektler sırayla işlenir, karmaşık ses işleme zincirleri oluşturmanıza olanak tanır. Stereo konumlandırma için -1 (tam sol) ile 1 (tam sağ) arasında pan değerleri kullanın.

Grup Katmanı

group katmanı, alt katmanları tutan bir kaptır. Gruba uygulanan dönüşümler tüm çocukları etkiler, karmaşık çok katmanlı kompozisyonları tek bir birim olarak taşımayı, ölçeklendirmeyi, döndürmeyi veya canlandırmayı kolaylaştırır.

Ana özellikler:

{
  "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": "Kart Başlığı",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Destekleyici açıklama metni buraya gelir.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

Gruplar, karmaşık şablonları düzenlemek için paha biçilmezdir. Yeniden kullanılabilir kart düzenleri, alt üçte birler, bindirmeler ve diğer bileşik öğeler oluşturmak için bunları kullanın. Alt koordinatlar grubun konumuna göredir.

Lottie Katmanı

lottie katmanı, After Effects, Figma veya diğer animasyon araçlarından dışa aktarılan Lottie animasyonlarını render eder.

Ana özellikler:

{
  "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 katmanları, kare kare kod yazmadan cilalı hareketli grafikler, simgeler, yükleme göstergeleri ve markalı animasyonlar eklemek için idealdir. startFrame ve endFrame özellikleri, animasyonu yalnızca belirli bir segmenti oynatacak şekilde kırpmanıza olanak tanır.

Özel Katman

custom katmanı, Rendervid’deki en güçlü katman tipidir. Kare kare render eden rastgele React bileşenleri yazmanıza izin vererek görsel çıktı üzerinde tam kontrol sağlar.

Özel bileşenler için üç dağıtım tipi vardır:

Satır İçi Dağıtım

JavaScript kodunu doğrudan JSON şablonunuza gömün. Küçük, bağımsız bileşenler için en iyisidir.

{
  "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 Dağıtımı

Bir bileşeni CDN gibi harici bir URL’den yükleyin. Şablonlar arasında paylaşılan yeniden kullanılabilir bileşenler için en iyisidir.

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

Referans Dağıtımı

Önceden kaydedilmiş bir bileşeni ada göre kullanın. @rendervid/components paketinden veya özel kayıt defterlerinden bileşenler için en iyisidir.

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

Her özel bileşen standart bir prop seti alır:

Özel bileşenler ayrıca prop’lar için şema doğrulamasını destekler, şablonların her bileşene doğru veri tiplerini ve gerekli alanları geçirmesini sağlar.

Önceden Hazırlanmış React Bileşenleri

@rendervid/components paketi, şablonlarınızda hemen kullanabileceğiniz bir dizi üretime hazır bileşen ile birlikte gelir.

AnimatedLineChart

Pürüzsüz degrade dolgular, yapılandırılabilir veri noktaları, eksen etiketleri ve animasyonlu çizim efektleri ile animasyonlu çizgi grafikler render eder. Raporlar, panolar ve sunumlar gibi veri odaklı video içeriği için idealdir.

Ana prop’lar: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Katmanlı degradeler ve akışkan hareket kullanarak büyüleyici kuzey ışıkları (aurora borealis) efekti oluşturur. Atmosferik arka planlar, giriş sekansları ve ortam görselleri için mükemmeldir.

Ana prop’lar: colors, speed, intensity, blur

WaveBackground

Yapılandırılabilir renkler, genlikler ve frekanslar ile akışkan dalga animasyonları üretir. Şık arka planlar, müzik görselleştiricileri veya okyanus temalı içerik için kullanın.

Ana prop’lar: waveCount, colors, amplitude, frequency, speed

SceneTransition

Sahneler arasında geçiş yapmak için 17 profesyonel geçiş tipi sağlar. Silme, solma, yakınlaştırma, kaydırma ve daha fazlasını içerir. Her geçiş kare doğruluğundadır ve yapılandırılabilirdir.

Ana prop’lar: transitionType, duration, direction, easing

TypewriterEffect

Yanıp sönen bir imleç ile karakter karakter metin gösterimi render eder. Yapılandırılabilir yazma hızını, imleç stilini ve kelimeler arasındaki gecikmeyi destekler. Kod demoları, sohbet simülasyonları ve dramatik metin gösterimleri için harikadır.

Ana prop’lar: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Özel Bileşen Geliştirme

Kendi özel bileşenlerinizi oluşturmak, Rendervid’in gerçekten parladığı yerdir. JavaScript ve CSS ile oluşturabileceğiniz herhangi bir görsel efekt bir Rendervid bileşeni haline gelebilir.

Bileşen Yapısı

Bir Rendervid özel bileşeni, prop’ları alan ve bir React öğesi döndüren standart bir JavaScript fonksiyonudur. Tipik React bileşenlerinden temel fark, render’ın olay odaklı değil kare odaklı olmasıdır.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Animasyon ilerlemesini hesapla (0 ile 1 arası)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Animasyonları yönlendirmek için ilerleme kullan
  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 || "Merhaba, Rendervid!");
}

Mevcut Prop’lar

Her özel bileşen bu standart prop’ları alır:

• frame – 0’dan başlayan mevcut kare numarası. Bu, birincil animasyon sürücünüzdür.
• fps – Saniyedeki kareler (genellikle 30 veya 60). Kareleri saniyelere dönüştürmek için kullanın.
• sceneDuration – Mevcut sahnenin saniye cinsinden süresi. Toplam kare sayısı için fps ile çarpın.
• layerSize – Şablonda tanımlanan katman boyutlarıyla eşleşen piksel cinsinden width ve height içeren bir nesne.
• props – Şablon JSON’unda tanımlanan herhangi bir özel özelliği içeren bir nesne.

React.createElement() Modeli

Rendervid bileşenleri bir render ortamında çalıştığından, JSX yerine React.createElement() kullanırlar. Model basittir:

// JSX eşdeğeri: <div className="container"><span>Merhaba</span></div>
React.createElement("div", { className: "container" },
  React.createElement("span", null, "Merhaba")
);

Prop’lar Şema Doğrulaması

Şablon yükleme zamanında verileri doğrulamak için bileşeninizin prop’ları için bir şema tanımlayabilirsiniz:

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

Örnek: Parçacık Sistemi

Fizik ile 150+ parçacık simüle eden bir parçacık sistemi bileşeni:

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

Örnek: Animasyonlu Sayaç

Başlangıç ve bitiş değerleri arasında enterpolasyon yapan bir sayı sayma animasyonu:

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

Özel bileşenlerin daha geniş şablon yapısına nasıl uyduğu hakkında daha fazla bilgi için Şablon Sistemi belgelerine bakın.

Şablon Editörü

@rendervid/editor paketi, geliştiricilerin ve geliştirici olmayanların JSON’u elle yazmadan Rendervid şablonları oluşturmasını sağlayan tam özellikli bir görsel şablon editörü sağlar.

Zaman Çizelgesi Tabanlı Düzenleme

Editör, her katmanın sürüklenebilir, yeniden boyutlandırılabilir ve yeniden konumlandırılabilir bir blok olarak temsil edildiği çok parçalı bir zaman çizelgesine sahiptir. Başlangıç zamanlarını, süreleri ve katman sıralamasını görsel olarak ayarlayın. Kare düzeyinde hassasiyet için yakınlaştırın veya üst düzey bir genel bakış için uzaklaştırın.

Katman Yönetimi Paneli

Özel bir panel, kompozisyondaki tüm katmanları sürükle bırak yeniden sıralama, görünürlük geçişleri, kilit kontrolleri ve gruplama ile listeler. Tüm 8 yerleşik tipi ve kayıtlı özel bileşenleri içeren bir bileşen paletinden yeni katmanlar ekleyin.

Özellik Paneli

Özelliklerini yapılandırılmış bir formda görüntülemek ve düzenlemek için herhangi bir katmanı seçin. Özellik paneli katman tipine uyum sağlar, yalnızca ilgili alanları gösterir. Renk seçiciler, kaydırıcılar, açılır menüler ve metin girişleri her ayrıntıyı ayarlamayı kolaylaştırır. Değişiklikler önizlemede hemen yansıtılır.

Geri Al/Yinele Geçmişi

Her değişiklik, tam geri alma ve yineleme desteği ile bir geçmiş yığınında kaydedilir. Düzenleme geçmişinizde güvenle gezinin, her zaman önceki bir duruma geri dönebileceğinizi bilerek.

Gerçek Zamanlı Önizleme

Editör, değişiklik yaparken şablonu gerçek zamanlı olarak render eden gömülü bir Oynatıcı bileşeni içerir. Düzenleme sırasında herhangi bir noktada dışa aktarmaya veya render etmeye gerek kalmadan tam kompozisyonu önizleyin.

Oynatıcı Bileşeni

@rendervid/player paketi, tarayıcıda Rendervid şablonlarını önizlemek için bağımsız bir React bileşeni sağlar.

React Entegrasyonu

Herhangi bir React uygulamasına oynatıcıyı kurun ve gömün:

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

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

Klavye Kısayolları

Oynatıcı, verimli önizleme için yerleşik klavye kontrolleri destekler:

Hız Kontrolü

Oynatma hızını 0.25x (çeyrek hız) ile 4x (dört kat hız) arasında ayarlayın. Ağır çekim oynatma, animasyonları kare kare incelemek için kullanışlıdır, hızlı ileri sarma ise daha uzun kompozisyonları taramaya yardımcı olur.

Geri Çağrılar ve Olaylar

Oynatıcı, programatik kontrol için geri çağrılar sunar:

Oynatıcıyı harici UI öğeleri, analitik veya etkileşimli deneyimlerle senkronize etmek için bu geri çağrıları kullanın.

Bileşen Galerisi

Bu örnek özel bileşenler, Rendervid’in özel katman tipi ile mümkün olanın aralığını gösterir. Her biri yukarıda açıklanan aynı React.createElement() modeli kullanılarak oluşturulmuştur.

Parçacık Patlaması

Yapılandırılabilir yerçekimi, renk ve patlama yarıçapı ile 150+ parçacık içeren fizik tabanlı parçacık sistemi. Parçacıklar merkezi bir noktadan doğar ve gerçekçi hareketle dışa doğru yay çizer.

Dalga Görselleştirmesi

Frekans verilerine tepki veren ses reaktif dalga desenleri. Yapılandırılabilir genlik, frekans ve renk ile birden fazla dalga katmanı dinamik, organik bir görsel oluşturur.

Neon Metin Efektleri

Titreme, nabız ve renk döngüsü dahil olmak üzere animasyonlu neon ışık efektleri ile parlayan metin. Özelleştirilebilir parıltı yarıçapı, renkler ve animasyon hızı.

Holografik Arayüz

Tarama çizgileri, veri okumaları, ızgara bindirmeleri ve animasyonlu UI öğeleri ile bilim kurgu esinli holografik UI. Teknoloji temalı videolar ve fütüristik girişler için idealdir.

3D Küp Döndürme

Dokulu yüzler ve pürüzsüz döndürme ile donanım hızlandırmalı CSS 3D küp. WebGL olmadan performanslı 3D render için CSS perspective ve transform3d kullanır.

Veri Görselleştirme Panosu

Animasyonlu çubuk grafikler, çizgi grafikler ve istatistik sayaçları içeren çok grafikli pano bileşeni. Raporlar, sunumlar ve veri hikaye anlatımı için veri odaklı ve yapılandırılabilir.

Ek özel bileşen örnekleri şunları içerir:

• Animasyonlu Sayaç – yumuşatma fonksiyonları ile sayı sayma animasyonu
• İlerleme Halkası – yapılandırılabilir yay ve renkler ile dairesel ilerleme göstergesi
• Daktilo – imleç ve değişken hız ile metin yazma animasyonu

Sonraki Adımlar

• Sahneleri ve kompozisyonları yapılandırmak için Rendervid Şablon Sistemi hakkında bilgi edinin
• Doğal dil ile şablonlar oluşturmak için Yapay Zeka Entegrasyonu keşfedin
• Son videoları render etmek ve dışa aktarmak için Dağıtım kılavuzuna bakın
• Üst düzey bir giriş için Rendervid’e genel bakışa dönün