Componenti Rendervid - Tipi di Layer, Componenti React ed Editor Visuale

Rendervid è costruito su un’architettura basata su componenti che rende la creazione di video modulare, estensibile e user-friendly per gli sviluppatori. Ogni elemento in un template Rendervid è un layer, e ogni layer ha un tipo specifico che determina come viene renderizzato. Con 8 tipi di layer integrati, una libreria crescente di componenti React predefiniti, un editor visuale di template e un player autonomo, Rendervid ti offre tutto ciò di cui hai bisogno per produrre contenuti video professionali in modo programmatico.

Questa pagina copre l’intero ecosistema dei componenti: dai tipi di layer primitivi come testo e forma, passando per la riproduzione audio e video, fino ai componenti React completamente personalizzati che sbloccano possibilità creative illimitate. Che tu stia costruendo una semplice scheda titolo o un’animazione complessa basata sui dati, comprendere questi componenti è il fondamento.

Tipi di Layer Integrati

Ogni layer in un template Rendervid è definito come un oggetto JSON con un campo type. Il tipo determina le proprietà disponibili e il comportamento di rendering. Di seguito è riportato un riferimento dettagliato per ciascuno degli 8 tipi di layer integrati.

Layer Testo

Il layer text è la primitiva più ricca di funzionalità in Rendervid. Renderizza testo stilizzato con pieno controllo su tipografia, allineamento, colore, effetti e animazione.

Proprietà tipografiche:

Rendervid include oltre 100 Google Fonts integrati. Puoi utilizzare qualsiasi di essi specificando la proprietà fontFamily senza dover caricare fogli di stile esterni.

Proprietà di allineamento:

Stile ed effetti:

• color e backgroundColor per la colorazione di base
• textShadow per ombre proiettate
• textStroke per testo con contorno
• textDecoration per sottolineato, barrato
• textTransform per maiuscolo, minuscolo, capitalizza
• maxLines con troncamento automatico con ellissi
• Effetto macchina da scrivere integrato per la rivelazione del testo carattere per carattere

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

Per animazioni di testo avanzate come l’effetto macchina da scrivere, combina il layer testo con animazioni keyframe o utilizza il componente TypewriterEffect dedicato.

Layer Immagine

Il layer image visualizza immagini raster e vettoriali con opzioni flessibili di ridimensionamento e ritaglio.

Proprietà principali:

Formati supportati: 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"
}

La proprietà fit funziona come object-fit CSS:

• cover – ridimensiona l’immagine per riempire il layer, ritagliando l’eccesso
• contain – ridimensiona per adattarsi interamente all’interno del layer, con possibile letterboxing
• fill – allunga l’immagine per corrispondere esattamente alle dimensioni del layer
• none – renderizza l’immagine alla sua risoluzione native

Layer Video

Il layer video incorpora clip video nella tua composizione con pieno controllo della riproduzione.

Proprietà principali:

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

Usa startTime per saltare le intro o passare a un punto specifico nel filmato sorgente. Combina con playbackRate per effetti al rallentatore (0.5) o time-lapse (2.0).

Layer Forma

Il layer shape disegna forme vettoriali con riempimenti, contorni, gradienti e angoli arrotondati.

Tipi di forma:

Proprietà di stile:

• fill – colore solido o gradiente
• stroke – colore del bordo
• strokeWidth – spessore del bordo
• borderRadius – angoli arrotondati per i rettangoli
• Gradienti: riempimenti con gradiente sia linear che 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
}

Per forme personalizzate, usa il tipo path con dati percorso 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"
}

Layer Audio

Il layer audio aggiunge tracce audio alla tua composizione con controllo del volume, dissolvenza e una catena di effetti completa.

Proprietà principali:

Catena di effetti audio:

Rendervid include una pipeline di elaborazione degli effetti integrata. Effetti disponibili:

• EQ – equalizzazione per la modellazione del tono
• Compressor – compressione della gamma dinamica
• Reverb – riverbero spaziale
• Delay – effetto eco/delay
• Gain – aumento o attenuazione del volume
• High-pass filter – rimuove le frequenze basse
• Low-pass filter – rimuove le frequenze alte
• Panning – posizionamento stereo (sinistra/destra)

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

Gli effetti vengono elaborati in ordine, consentendoti di costruire sofisticate catene di elaborazione audio. Usa valori pan da -1 (completamente a sinistra) a 1 (completamente a destra) per il posizionamento stereo.

Layer Gruppo

Il layer group è un contenitore che contiene layer figlio. Le trasformazioni applicate al gruppo influenzano tutti i figli, rendendo facile spostare, scalare, ruotare o animare composizioni complesse multi-layer come una singola unità.

Proprietà principali:

{
  "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": "Titolo Scheda",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Il testo descrittivo di supporto va qui.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

I gruppi sono inestimabili per organizzare template complessi. Usali per creare layout di schede riutilizzabili, lower-thirds, overlay e altri elementi compositi. Le coordinate dei figli sono relative alla posizione del gruppo.

Layer Lottie

Il layer lottie renderizza animazioni Lottie esportate da After Effects, Figma o altri strumenti di animazione.

Proprietà principali:

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

I layer Lottie sono ideali per aggiungere motion graphics raffinati, icone, indicatori di caricamento e animazioni brandizzate senza scrivere codice frame per frame. Le proprietà startFrame e endFrame ti permettono di tagliare l’animazione per riprodurre solo un segmento specifico.

Layer Personalizzato

Il layer custom è il tipo di layer più potente in Rendervid. Ti permette di scrivere componenti React arbitrari che renderizzano frame per frame, dandoti il pieno controllo sull’output visuale.

Ci sono tre tipi di distribuzione per i componenti personalizzati:

Distribuzione Inline

Incorpora il codice JavaScript direttamente nel tuo template JSON. Ideale per componenti piccoli e autonomi.

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

Distribuzione URL

Carica un componente da un URL esterno come una CDN. Ideale per componenti riutilizzabili condivisi tra template.

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

Distribuzione per Riferimento

Usa un componente pre-registrato per nome. Ideale per componenti dal pacchetto @rendervid/components o registri personalizzati.

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

Ogni componente personalizzato riceve un set standard di props:

I componenti personalizzati supportano anche la validazione dello schema per le props, assicurando che i template passino i tipi di dati corretti e i campi richiesti a ciascun componente.

Componenti React Predefiniti

Il pacchetto @rendervid/components include un set di componenti pronti per la produzione che puoi utilizzare immediatamente nei tuoi template.

AnimatedLineChart

Renderizza grafici a linee animati con riempimenti a gradiente fluidi, punti dati configurabili, etichette degli assi ed effetti di disegno animati. Ideale per contenuti video basati sui dati come report, dashboard e presentazioni.

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

AuroraBackground

Crea un affascinante effetto di aurora boreale usando gradienti stratificati e movimento fluido. Perfetto per sfondi atmosferici, sequenze di intro e visual ambientali.

Props principali: colors, speed, intensity, blur

WaveBackground

Genera animazioni di onde fluide con colori, ampiezze e frequenze configurabili. Usalo per sfondi eleganti, visualizzatori musicali o contenuti a tema oceanico.

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

SceneTransition

Fornisce 17 tipi di transizione professionali per passare tra le scene. Include wipe, fade, zoom, slide e altro. Ogni transizione è precisa al frame e configurabile.

Props principali: transitionType, duration, direction, easing

TypewriterEffect

Renderizza la rivelazione del testo carattere per carattere con un cursore lampeggiante. Supporta velocità di digitazione configurabile, stile del cursore e ritardo tra le parole. Ottimo per demo di codice, simulazioni di chat e rivelazioni di testo drammatiche.

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

Sviluppo di Componenti Personalizzati

Costruire i tuoi componenti personalizzati è dove Rendervid brilla davvero. Qualsiasi effetto visuale che puoi creare con JavaScript e CSS può diventare un componente Rendervid.

Struttura del Componente

Un componente personalizzato Rendervid è una funzione JavaScript standard che riceve props e restituisce un elemento React. La differenza chiave dai tipici componenti React è che il rendering è guidato dal frame piuttosto che dagli eventi.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Calcola il progresso dell'animazione (da 0 a 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Usa il progresso per guidare le animazioni
  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 || "Ciao, Rendervid!");
}

Props Disponibili

Ogni componente personalizzato riceve queste props standard:

• frame – Il numero del frame corrente, partendo da 0. Questo è il tuo driver di animazione principale.
• fps – Frame al secondo (comunemente 30 o 60). Usalo per convertire i frame in secondi.
• sceneDuration – Durata della scena corrente in secondi. Moltiplica per fps per il conteggio totale dei frame.
• layerSize – Un oggetto con width e height in pixel, corrispondente alle dimensioni del layer definite nel template.
• props – Un oggetto contenente eventuali proprietà personalizzate definite nel template JSON.

Il Pattern React.createElement()

Poiché i componenti Rendervid vengono eseguiti in un ambiente di rendering, utilizzano React.createElement() anziché JSX. Il pattern è semplice:

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

Validazione dello Schema delle Props

Puoi definire uno schema per le props del tuo componente per validare i dati al momento del caricamento del template:

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

Esempio: Sistema di Particelle

Un componente di sistema di particelle che simula oltre 150 particelle con fisica:

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

Esempio: Contatore Animato

Un’animazione di conteggio numerico che interpola tra valori di inizio e fine:

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

Per maggiori informazioni su come i componenti personalizzati si inseriscono nella struttura più ampia del template, consulta la documentazione del Sistema di Template .

Editor di Template

Il pacchetto @rendervid/editor fornisce un editor visuale di template completo, consentendo sia a non sviluppatori che a sviluppatori di costruire template Rendervid senza scrivere JSON manualmente.

Editing Basato su Timeline

L’editor presenta una timeline multi-traccia dove ogni layer è rappresentato come un blocco che può essere trascinato, ridimensionato e riposizionato. Regola i tempi di inizio, le durate e l’ordinamento dei layer visivamente. Ingrandisci per la precisione a livello di frame o riduci per una panoramica ad alto livello.

Pannello di Gestione dei Layer

Un pannello dedicato elenca tutti i layer nella composizione con riordinamento drag-and-drop, interruttori di visibilità, controlli di blocco e raggruppamento. Aggiungi nuovi layer da una palette di componenti che include tutti gli 8 tipi integrati e qualsiasi componente personalizzato registrato.

Pannello delle Proprietà

Seleziona qualsiasi layer per visualizzare e modificare le sue proprietà in un modulo strutturato. Il pannello delle proprietà si adatta al tipo di layer, mostrando solo i campi rilevanti. Selettori di colore, slider, menu a tendina e campi di testo rendono facile modificare ogni dettaglio. Le modifiche si riflettono immediatamente nell’anteprima.

Cronologia Annulla/Ripristina

Ogni modifica viene registrata in uno stack di cronologia con pieno supporto per annulla e ripristina. Naviga attraverso la tua cronologia di modifica con fiducia, sapendo che puoi sempre tornare a uno stato precedente.

Anteprima in Tempo Reale

L’editor include un componente Player incorporato che renderizza il template in tempo reale mentre apporti modifiche. Visualizza in anteprima la composizione completa in qualsiasi momento durante la modifica senza dover esportare o renderizzare.

Componente Player

Il pacchetto @rendervid/player fornisce un componente React autonomo per visualizzare in anteprima i template Rendervid nel browser.

Integrazione React

Installa e incorpora il player in qualsiasi applicazione React:

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

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

Scorciatoie da Tastiera

Il player supporta controlli da tastiera integrati per un’anteprima efficiente:

Controllo della Velocità

Regola la velocità di riproduzione da 0.25x (un quarto di velocità) a 4x (velocità quadrupla). La riproduzione al rallentatore è utile per rivedere le animazioni frame per frame, mentre l’avanzamento rapido aiuta a scansionare composizioni più lunghe.

Callback ed Eventi

Il player espone callback per il controllo programmatico:

Usa questi callback per sincronizzare il player con elementi UI esterni, analytics o esperienze interattive.

Galleria dei Componenti

Questi componenti personalizzati di esempio dimostrano la gamma di ciò che è possibile con il tipo di layer personalizzato di Rendervid. Ognuno è costruito usando lo stesso pattern React.createElement() descritto sopra.

Esplosione di Particelle

Un sistema di particelle basato sulla fisica con oltre 150 particelle, gravità configurabile, colore e raggio di esplosione. Le particelle si generano da un punto centrale e si muovono verso l’esterno con movimento realistico.

Visualizzazione di Onde

Pattern di onde reattivi all’audio che rispondono ai dati di frequenza. Più layer di onde con ampiezza, frequenza e colore configurabili creano un visual dinamico e organico.

Effetti Testo Neon

Testo luminoso con effetti di luce neon animati, inclusi sfarfallio, pulsazione e ciclo di colori. Raggio di bagliore, colori e velocità di animazione personalizzabili.

Interfaccia Olografica

Un’interfaccia olografica ispirata alla fantascienza con linee di scansione, letture di dati, overlay a griglia ed elementi UI animati. Ideale per video a tema tecnologico e intro futuristiche.

Rotazione Cubo 3D

Un cubo CSS 3D accelerato hardware con facce testurizzate e rotazione fluida. Utilizza CSS perspective e transform3d per rendering 3D performante senza WebGL.

Dashboard di Visualizzazione Dati

Un componente dashboard multi-grafico con grafici a barre animati, grafici a linee e contatori di statistiche. Basato sui dati e configurabile per report, presentazioni e storytelling dei dati.

Esempi aggiuntivi di componenti personalizzati includono:

• Contatore Animato – animazione di conteggio numerico con funzioni di easing
• Anello di Progresso – indicatore di progresso circolare con arco e colori configurabili
• Macchina da Scrivere – animazione di digitazione del testo con cursore e velocità variabile

Prossimi Passi

• Scopri il Sistema di Template Rendervid per strutturare scene e composizioni
• Esplora l’Integrazione AI per generare template con linguaggio naturale
• Consulta la guida al Deployment per renderizzare ed esportare video finali
• Torna alla panoramica di Rendervid per un’introduzione ad alto livello