Composants Rendervid - Types de calques, composants React et éditeur visuel

Rendervid est construit sur une architecture basée sur des composants qui rend la création vidéo modulaire, extensible et conviviale pour les développeurs. Chaque élément dans un modèle Rendervid est un calque, et chaque calque a un type spécifique qui détermine comment il est rendu. Avec 8 types de calques intégrés, une bibliothèque croissante de composants React prêts à l’emploi, un éditeur de modèles visuel et un lecteur autonome, Rendervid vous donne tout ce dont vous avez besoin pour produire du contenu vidéo professionnel de manière programmatique.

Cette page couvre l’écosystème complet des composants : des types de calques primitifs comme le texte et la forme, en passant par la lecture audio et vidéo, jusqu’aux composants React entièrement personnalisés qui débloquent des possibilités créatives illimitées. Que vous construisiez une simple carte de titre ou une animation complexe pilotée par des données, comprendre ces composants est la base.

Types de calques intégrés

Chaque calque dans un modèle Rendervid est défini comme un objet JSON avec un champ type. Le type détermine les propriétés disponibles et le comportement de rendu. Ci-dessous se trouve une référence détaillée pour chacun des 8 types de calques intégrés.

Calque de texte

Le calque text est la primitive la plus riche en fonctionnalités de Rendervid. Il rend du texte stylisé avec un contrôle total sur la typographie, l’alignement, la couleur, les effets et l’animation.

Propriétés de typographie :

Rendervid est livré avec plus de 100 polices Google Fonts intégrées. Vous pouvez utiliser n’importe laquelle d’entre elles en spécifiant la propriété fontFamily sans avoir besoin de charger des feuilles de style externes.

Propriétés d’alignement :

Stylisation et effets :

• color et backgroundColor pour la coloration de base
• textShadow pour les ombres portées
• textStroke pour le texte contouré
• textDecoration pour souligné, barré
• textTransform pour majuscules, minuscules, capitaliser
• maxLines avec troncature automatique par points de suspension
• Effet machine à écrire intégré pour la révélation de texte caractère par caractère

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

Pour des animations de texte avancées comme l’effet machine à écrire, combinez le calque de texte avec des animations par images clés ou utilisez le composant TypewriterEffect dédié.

Calque d’image

Le calque image affiche des images matricielles et vectorielles avec des options flexibles de dimensionnement et de recadrage.

Propriétés clés :

Formats pris en charge : 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 propriété fit fonctionne comme le CSS object-fit :

• cover – redimensionne l’image pour remplir le calque, en recadrant l’excédent
• contain – redimensionne pour tenir entièrement dans le calque, avec un éventuel letterboxing
• fill – étire l’image pour correspondre exactement aux dimensions du calque
• none – rend l’image à sa résolution native

Calque vidéo

Le calque video intègre des clips vidéo dans votre composition avec un contrôle complet de la lecture.

Propriétés clés :

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

Utilisez startTime pour sauter les introductions ou aller à un point spécifique dans le métrage source. Combinez avec playbackRate pour des effets de ralenti (0.5) ou de time-lapse (2.0).

Calque de forme

Le calque shape dessine des formes vectorielles avec des remplissages, des contours, des dégradés et des coins arrondis.

Types de formes :

Propriétés de stylisation :

• fill – couleur unie ou dégradé
• stroke – couleur de bordure
• strokeWidth – épaisseur de bordure
• borderRadius – coins arrondis pour les rectangles
• Dégradés : remplissages de dégradés linear et 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
}

Pour des formes personnalisées, utilisez le type path avec des données de chemin 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"
}

Calque audio

Le calque audio ajoute des pistes audio à votre composition avec contrôle du volume, fondu et une chaîne d’effets complète.

Propriétés clés :

Chaîne d’effets audio :

Rendervid inclut un pipeline de traitement d’effets intégré. Effets disponibles :

• EQ – égalisation pour le façonnage des tonalités
• Compressor – compression de la plage dynamique
• Reverb – réverbération spatiale
• Delay – effet d’écho/délai
• Gain – boost ou atténuation du volume
• High-pass filter – supprime les basses fréquences
• Low-pass filter – supprime les hautes fréquences
• Panning – positionnement stéréo (gauche/droite)

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

Les effets sont traités dans l’ordre, vous permettant de construire des chaînes de traitement audio sophistiquées. Utilisez des valeurs pan de -1 (complètement à gauche) à 1 (complètement à droite) pour le positionnement stéréo.

Calque de groupe

Le calque group est un conteneur qui contient des calques enfants. Les transformations appliquées au groupe affectent tous les enfants, ce qui facilite le déplacement, la mise à l’échelle, la rotation ou l’animation de compositions multi-calques complexes comme une seule unité.

Propriétés clés :

{
  "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": "Titre de la carte",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Le texte de description de support va ici.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

Les groupes sont inestimables pour organiser des modèles complexes. Utilisez-les pour créer des mises en page de cartes réutilisables, des tiers inférieurs, des superpositions et d’autres éléments composites. Les coordonnées des enfants sont relatives à la position du groupe.

Calque Lottie

Le calque lottie rend des animations Lottie exportées depuis After Effects, Figma ou d’autres outils d’animation.

Propriétés clés :

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

Les calques Lottie sont idéaux pour ajouter des graphiques animés soignés, des icônes, des indicateurs de chargement et des animations de marque sans écrire de code image par image. Les propriétés startFrame et endFrame vous permettent de découper l’animation pour ne jouer qu’un segment spécifique.

Calque personnalisé

Le calque custom est le type de calque le plus puissant de Rendervid. Il vous permet d’écrire des composants React arbitraires qui rendent image par image, vous donnant un contrôle complet sur la sortie visuelle.

Il existe trois types de déploiement pour les composants personnalisés :

Déploiement en ligne

Intégrez du code JavaScript directement dans votre modèle JSON. Idéal pour les petits composants autonomes.

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

Déploiement par URL

Chargez un composant depuis une URL externe comme un CDN. Idéal pour les composants réutilisables partagés entre les modèles.

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

Déploiement par référence

Utilisez un composant pré-enregistré par son nom. Idéal pour les composants du package @rendervid/components ou des registres personnalisés.

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

Chaque composant personnalisé reçoit un ensemble standard de props :

Les composants personnalisés prennent également en charge la validation de schéma pour les props, garantissant que les modèles transmettent les types de données et les champs requis corrects à chaque composant.

Composants React prêts à l’emploi

Le package @rendervid/components est livré avec un ensemble de composants prêts pour la production que vous pouvez utiliser immédiatement dans vos modèles.

AnimatedLineChart

Rend des graphiques linéaires animés avec des remplissages de dégradé lisses, des points de données configurables, des étiquettes d’axes et des effets d’apparition animés. Idéal pour le contenu vidéo piloté par les données comme les rapports, les tableaux de bord et les présentations.

Props clés : data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Crée un effet d’aurores boréales (aurora borealis) fascinant utilisant des dégradés superposés et un mouvement fluide. Parfait pour les arrière-plans atmosphériques, les séquences d’introduction et les visuels ambiants.

Props clés : colors, speed, intensity, blur

WaveBackground

Génère des animations de vagues fluides avec des couleurs, amplitudes et fréquences configurables. Utilisez-le pour des arrière-plans élégants, des visualiseurs de musique ou du contenu sur le thème de l’océan.

Props clés : waveCount, colors, amplitude, frequency, speed

SceneTransition

Fournit 17 types de transitions professionnelles pour passer d’une scène à l’autre. Inclut des balayages, des fondus, des zooms, des glissements et plus encore. Chaque transition est précise au niveau de l’image et configurable.

Props clés : transitionType, duration, direction, easing

TypewriterEffect

Rend une révélation de texte caractère par caractère avec un curseur clignotant. Prend en charge la vitesse de frappe configurable, le style du curseur et le délai entre les mots. Idéal pour les démos de code, les simulations de chat et les révélations de texte dramatiques.

Props clés : text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Développement de composants personnalisés

Construire vos propres composants personnalisés est là où Rendervid brille vraiment. Tout effet visuel que vous pouvez créer avec JavaScript et CSS peut devenir un composant Rendervid.

Structure du composant

Un composant personnalisé Rendervid est une fonction JavaScript standard qui reçoit des props et renvoie un élément React. La différence clé par rapport aux composants React typiques est que le rendu est piloté par image plutôt que par événement.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Calculer la progression de l'animation (0 à 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Utiliser la progression pour piloter les animations
  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 || "Bonjour, Rendervid !");
}

Props disponibles

Chaque composant personnalisé reçoit ces props standards :

• frame – Le numéro d’image actuel, commençant à 0. C’est votre principal moteur d’animation.
• fps – Images par seconde (généralement 30 ou 60). Utilisez-le pour convertir les images en secondes.
• sceneDuration – Durée de la scène actuelle en secondes. Multipliez par fps pour le nombre total d’images.
• layerSize – Un objet avec width et height en pixels, correspondant aux dimensions du calque définies dans le modèle.
• props – Un objet contenant toutes les propriétés personnalisées définies dans le JSON du modèle.

Le modèle React.createElement()

Étant donné que les composants Rendervid s’exécutent dans un environnement de rendu, ils utilisent React.createElement() plutôt que JSX. Le modèle est simple :

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

Validation du schéma des props

Vous pouvez définir un schéma pour les props de votre composant afin de valider les données au moment du chargement du modèle :

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

Exemple : Système de particules

Un composant de système de particules qui simule plus de 150 particules avec physique :

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

Exemple : Compteur animé

Une animation de comptage de nombres qui interpole entre les valeurs de début et de fin :

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

Pour en savoir plus sur la façon dont les composants personnalisés s’intègrent dans la structure de modèle plus large, consultez la documentation du système de modèles .

Éditeur de modèles

Le package @rendervid/editor fournit un éditeur de modèles visuel complet, permettant aux non-développeurs et aux développeurs de créer des modèles Rendervid sans écrire de JSON à la main.

Édition basée sur la timeline

L’éditeur dispose d’une timeline multi-pistes où chaque calque est représenté comme un bloc qui peut être glissé, redimensionné et repositionné. Ajustez les heures de début, les durées et l’ordre des calques visuellement. Zoomez pour une précision au niveau de l’image ou dézoomez pour une vue d’ensemble de haut niveau.

Panneau de gestion des calques

Un panneau dédié répertorie tous les calques de la composition avec réorganisation par glisser-déposer, bascules de visibilité, contrôles de verrouillage et regroupement. Ajoutez de nouveaux calques à partir d’une palette de composants qui inclut les 8 types intégrés et tous les composants personnalisés enregistrés.

Panneau de propriétés

Sélectionnez n’importe quel calque pour afficher et modifier ses propriétés dans un formulaire structuré. Le panneau de propriétés s’adapte au type de calque, n’affichant que les champs pertinents. Les sélecteurs de couleurs, les curseurs, les listes déroulantes et les champs de saisie de texte facilitent le réglage de chaque détail. Les modifications sont reflétées immédiatement dans l’aperçu.

Historique d’annulation/rétablissement

Chaque modification est enregistrée dans une pile d’historique avec un support complet d’annulation et de rétablissement. Naviguez dans votre historique d’édition en toute confiance, sachant que vous pouvez toujours revenir à un état précédent.

Aperçu en temps réel

L’éditeur inclut un composant Player intégré qui rend le modèle en temps réel pendant que vous apportez des modifications. Prévisualisez la composition complète à tout moment pendant l’édition sans avoir besoin d’exporter ou de rendre.

Composant Player

Le package @rendervid/player fournit un composant React autonome pour prévisualiser les modèles Rendervid dans le navigateur.

Intégration React

Installez et intégrez le lecteur dans n’importe quelle application React :

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

function Preview({ template }) {
  return (
    <Player
      template={template}
      width={1920}
      height={1080}
      onComplete={() => console.log("Lecture terminée")}
    />
  );
}

Raccourcis clavier

Le lecteur prend en charge des contrôles clavier intégrés pour une prévisualisation efficace :

Contrôle de la vitesse

Ajustez la vitesse de lecture de 0,25x (quart de vitesse) à 4x (quadruple vitesse). La lecture au ralenti est utile pour examiner les animations image par image, tandis que l’avance rapide aide à parcourir les compositions plus longues.

Callbacks et événements

Le lecteur expose des callbacks pour un contrôle programmatique :

Utilisez ces callbacks pour synchroniser le lecteur avec des éléments d’interface utilisateur externes, des analyses ou des expériences interactives.

Galerie de composants

Ces exemples de composants personnalisés démontrent l’étendue de ce qui est possible avec le type de calque personnalisé de Rendervid. Chacun est construit en utilisant le même modèle React.createElement() décrit ci-dessus.

Explosion de particules

Un système de particules basé sur la physique avec plus de 150 particules, gravité, couleur et rayon d’explosion configurables. Les particules apparaissent à partir d’un point central et s’arquent vers l’extérieur avec un mouvement réaliste.

Visualisation de vagues

Des motifs de vagues réactifs à l’audio qui répondent aux données de fréquence. Plusieurs couches de vagues avec amplitude, fréquence et couleur configurables créent un visuel dynamique et organique.

Effets de texte néon

Texte lumineux avec effets de lumière néon animés, incluant scintillement, pulsation et cycle de couleurs. Rayon de lueur, couleurs et vitesse d’animation personnalisables.

Interface holographique

Une interface utilisateur holographique inspirée de la science-fiction avec des lignes de balayage, des lectures de données, des superpositions de grille et des éléments d’interface utilisateur animés. Idéal pour les vidéos sur le thème de la technologie et les introductions futuristes.

Rotation de cube 3D

Un cube CSS 3D accéléré par matériel avec des faces texturées et une rotation fluide. Utilise CSS perspective et transform3d pour un rendu 3D performant sans WebGL.

Tableau de bord de visualisation de données

Un composant de tableau de bord multi-graphiques comprenant des graphiques à barres animés, des graphiques linéaires et des compteurs de statistiques. Piloté par les données et configurable pour les rapports, les présentations et la narration de données.

D’autres exemples de composants personnalisés incluent :

• Animated Counter – animation de comptage de nombres avec fonctions d’assouplissement
• Progress Ring – indicateur de progression circulaire avec arc et couleurs configurables
• Typewriter – animation de frappe de texte avec curseur et vitesse variable

Prochaines étapes

• Découvrez le système de modèles Rendervid pour structurer les scènes et les compositions
• Explorez l’intégration de l’IA pour générer des modèles avec le langage naturel
• Consultez le guide de déploiement pour le rendu et l’exportation des vidéos finales
• Retournez à la vue d’ensemble de Rendervid pour une introduction de haut niveau