Guide complet du système de templates Rendervid. Apprenez à créer des templates vidéo JSON, utiliser des variables dynamiques avec la syntaxe {{variable}}, configurer plus de 40 préréglages d’animation, 17 transitions de scènes et plus de 30 fonctions d’accélération.
Rendervid est un moteur de rendu vidéo programmatique construit autour d’un système de templates déclaratif basé sur JSON. Au lieu d’éditer manuellement une vidéo dans une timeline, vous définissez chaque aspect de votre vidéo – scènes, calques, animations, transitions et paramètres de sortie – dans un seul document JSON. Cette approche rend les templates sans état, contrôlables par version et générables par machine, ouvrant la porte à la production vidéo pilotée par l’IA, aux pipelines de rendu par lots et aux flux de travail de contenu entièrement automatisés.
Ce guide couvre le système de templates Rendervid de bout en bout : configuration au niveau racine, paramètres de sortie, système de variables et d’entrées, scènes et composition, les huit types de calques, plus de 40 préréglages d’animation, plus de 30 fonctions d’accélération, 17 transitions de scènes, effets visuels, configuration des polices et formats de sortie.
Chaque template Rendervid est un objet JSON avec un ensemble bien défini de champs au niveau racine. Voici le squelette d’un template complet :
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| Champ | Type | Requis | Description |
|---|---|---|---|
name | string | Oui | Identifiant de template lisible par l’homme |
output | object | Oui | Configuration de sortie vidéo ou image (dimensions, fps, durée, format) |
inputs | array | Non | Définitions d’entrées dynamiques pour les variables de template |
composition | object | Oui | Contient le tableau scenes qui définit tout le contenu visuel |
fonts | object | Non | Déclarations de Google Fonts et de polices personnalisées |
customComponents | object | Non | Composants de calques personnalisés enregistrés |
defaults | object | Non | Valeurs par défaut appliquées à tous les calques sauf si remplacées |
Le champ name est à des fins organisationnelles – il n’affecte pas le rendu. Les champs output et composition sont les deux piliers que chaque template doit avoir. Tout le reste est optionnel mais déverrouille des capacités puissantes.
L’objet output contrôle le fichier rendu final : son format, ses dimensions, sa fréquence d’images, sa durée et sa couleur d’arrière-plan.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| Champ | Type | Défaut | Description |
|---|---|---|---|
type | string | "video" | Type de sortie : "video" ou "image" |
width | number | 1920 | Largeur en pixels (jusqu’à 7680 pour la 8K) |
height | number | 1080 | Hauteur en pixels (jusqu’à 4320 pour la 8K) |
fps | number | 30 | Images par seconde (1-120) |
duration | number | – | Durée totale en secondes |
backgroundColor | string | "#000000" | Couleur d’arrière-plan en hexadécimal, RGB ou couleur nommée |
Voici les configurations de sortie pour les formats populaires :
1080p Full HD (YouTube, usage général) :
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 vertical) :
{
"type": "video",
"width": 1080,
"height": 1920,
"fps": 30,
"duration": 30,
"backgroundColor": "#FFFFFF"
}
4K UHD :
{
"type": "video",
"width": 3840,
"height": 2160,
"fps": 60,
"duration": 120,
"backgroundColor": "#000000"
}
Open Graph / Image de Partage Social :
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
Pour la sortie image, fps et duration sont ignorés – le moteur de rendu capture une seule image.
Le système d’entrées et de variables est ce qui rend les templates Rendervid réutilisables. Au lieu de coder en dur du texte, des couleurs ou des URLs dans votre template, vous définissez des entrées et les référencez en utilisant la syntaxe {{nomVariable}} n’importe où dans le template.
Les entrées sont déclarées dans le tableau inputs de niveau supérieur. Chaque objet d’entrée décrit une seule variable :
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Title",
"description": "Main title text displayed in the intro scene",
"required": true,
"default": "Hello World"
},
{
"key": "brandColor",
"type": "color",
"label": "Brand Color",
"description": "Primary brand color used for backgrounds and accents",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Show Subtitle",
"description": "Toggle subtitle visibility",
"required": false,
"default": true
}
]
}
| Champ | Type | Requis | Description |
|---|---|---|---|
key | string | Oui | Identifiant unique utilisé dans les références {{key}} |
type | string | Oui | Type de données : string, number, boolean, color, url, array |
label | string | Non | Label lisible par l’homme pour le rendu de l’interface utilisateur |
description | string | Non | Explication de ce que cette entrée contrôle |
required | boolean | Non | Si l’entrée doit être fournie au moment du rendu |
default | any | Non | Valeur de secours si aucune entrée n’est fournie |
string – Texte libre. Utilisez pour les titres, descriptions, légendes ou tout contenu textuel.number – Valeurs numériques. Utilisez pour les durées, tailles, positions, niveaux d’opacité ou comptages.boolean – Bascules vrai/faux. Utilisez pour la visibilité conditionnelle, les drapeaux de fonctionnalités ou les interrupteurs marche/arrêt.color – Valeurs de couleur en hexadécimal (#FF5733), RGB (rgb(255,87,51)) ou format nommé. Utilisez pour les arrière-plans, les couleurs de texte et les accents.url – Chaînes d’URL valides. Utilisez pour les sources d’images, les sources vidéo, les liens et les URLs de polices.array – Listes de valeurs. Utilisez pour les galeries d’images, les listes de texte, le contenu de diapositives ou toute donnée répétée.Une fois les entrées définies, référencez-les n’importe où dans le template en utilisant des accolades doubles :
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
Les variables sont résolues au moment du rendu. Lorsque vous appelez l’API ou la CLI Rendervid, vous passez les valeurs réelles :
{
"title": "Summer Sale 2026",
"brandColor": "#E63946",
"titleSize": 72
}
Voici un template complet avec plusieurs types d’entrées fonctionnant ensemble :
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Product Name",
"description": "Name of the product being promoted",
"required": true,
"default": "Product"
},
{
"key": "price",
"type": "number",
"label": "Price",
"description": "Product price displayed in the video",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "Product Image URL",
"description": "URL to the product image",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Accent Color",
"description": "Color used for CTA buttons and highlights",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "Show Sale Badge",
"description": "Whether to display the sale badge overlay",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Product Features",
"description": "List of feature bullet points",
"required": false,
"default": ["Feature 1", "Feature 2", "Feature 3"]
}
],
"composition": {
"scenes": [
{
"name": "hero",
"duration": 15,
"layers": [
{
"type": "image",
"src": "{{productImage}}",
"position": { "x": 540, "y": 400 },
"size": { "width": 600, "height": 600 }
},
{
"type": "text",
"text": "{{productName}}",
"style": { "fontSize": 48, "fontWeight": 700, "color": "#FFFFFF" },
"position": { "x": 540, "y": 80 }
},
{
"type": "text",
"text": "${{price}}",
"style": { "fontSize": 64, "fontWeight": 900, "color": "{{accentColor}}" },
"position": { "x": 540, "y": 900 }
}
]
}
]
}
}
Ce template unique peut générer des milliers de vidéos de produits uniques en changeant simplement les valeurs d’entrée au moment du rendu – aucune modification de template n’est nécessaire.
L’objet composition est l’endroit où vit le contenu de votre vidéo. Il contient un tableau scenes, et chaque scène représente un segment distinct de la vidéo avec sa propre durée, ses calques et sa transition.
{
"composition": {
"scenes": [
{
"name": "intro",
"duration": 5,
"transition": {
"type": "fade",
"duration": 1
},
"layers": [ ... ]
},
{
"name": "main-content",
"duration": 20,
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "left"
},
"layers": [ ... ]
},
{
"name": "outro",
"duration": 5,
"layers": [ ... ]
}
]
}
}
| Champ | Type | Requis | Description |
|---|---|---|---|
name | string | Non | Identifiant de la scène (pour la lisibilité et le débogage) |
duration | number | Oui | Durée de la scène en secondes |
transition | object | Non | Effet de transition lors de l’entrée dans cette scène depuis la précédente |
layers | array | Oui | Tableau ordonné d’objets de calques rendus de bas en haut |
Les scènes se jouent en séquence. La durée totale de la vidéo est la somme de toutes les durées de scène (moins tout chevauchement de transition). Les calques au sein d’une scène sont rendus dans l’ordre du tableau – le premier calque se trouve en bas de la pile visuelle, et le dernier calque se trouve en haut.
Si aucune transition n’est spécifiée, la scène utilise un cut dur par défaut.
Rendervid prend en charge huit types de calques distincts. Chaque type de calque sert un objectif spécifique et accepte son propre ensemble de propriétés en plus de la configuration de base partagée.
Chaque calque, quel que soit son type, prend en charge ces propriétés de base :
{
"position": { "x": 100, "y": 100 },
"size": { "width": 500, "height": 200 },
"rotation": 0,
"scale": { "x": 1, "y": 1 },
"anchor": { "x": 0.5, "y": 0.5 },
"opacity": 1,
"blendMode": "normal",
"from": 0,
"duration": -1,
"filters": [],
"style": {},
"className": ""
}
| Propriété | Type | Défaut | Description |
|---|---|---|---|
position | object | {x: 0, y: 0} | Coordonnées X/Y en pixels |
size | object | – | Largeur et hauteur en pixels |
rotation | number | 0 | Angle de rotation en degrés |
scale | object | {x: 1, y: 1} | Multiplicateur d’échelle pour les axes X et Y |
anchor | object | {x: 0.5, y: 0.5} | Point d’ancrage pour les transformations (plage 0-1, 0.5 = centre) |
opacity | number | 1 | Opacité du calque (0 = transparent, 1 = opaque) |
blendMode | string | "normal" | Mode de fusion CSS pour la composition |
from | number | 0 | Temps de début en secondes (relatif au début de la scène) |
duration | number | -1 | Durée du calque en secondes (-1 = durée complète de la scène) |
filters | array | [] | Tableau d’objets de filtre visuel |
style | object | {} | Propriétés de style supplémentaires de type CSS |
className | string | "" | Nom de classe CSS pour un style personnalisé |
text – Rend du texte stylisé avec un contrôle total sur la police, la taille, la couleur, l’alignement, la hauteur de ligne, l’espacement des lettres, les ombres de texte et plus encore. Prend en charge la syntaxe {{variable}} pour le contenu dynamique.
image – Affiche des images statiques à partir d’URLs ou de chemins locaux. Prend en charge le recadrage, les modes object-fit, le rayon de bordure et les filtres d’image.
video – Intègre des clips vidéo dans une scène. Prend en charge le découpage (début/fin), le contrôle du volume, le taux de lecture, la boucle et la mise en sourdine.
shape – Rend des primitives géométriques : rectangles, cercles, ellipses, lignes et polygones. Prend en charge le remplissage, le contour, le rayon de bordure, les dégradés et les ombres.
audio – Ajoute des pistes audio à une scène. Prend en charge le volume, le fondu entrant/sortant, le découpage et la boucle. Les calques audio n’ont pas de représentation visuelle.
group – Un calque conteneur qui contient des calques enfants. Les groupes vous permettent d’appliquer des transformations, des animations et des effets à plusieurs calques à la fois.
lottie – Rend des animations JSON Lottie/Bodymovin. Prend en charge la vitesse de lecture, la boucle et le contrôle de segment pour jouer des plages d’images spécifiques.
custom – Charge des composants personnalisés enregistrés définis dans le champ customComponents. Utilisez-le pour des templates de calques réutilisables et paramétrés.
Pour la configuration détaillée de chaque type de calque, y compris toutes les propriétés disponibles et les exemples de code, consultez la Référence des Composants Rendervid .
Rendervid comprend plus de 40 préréglages d’animation intégrés organisés en quatre catégories : entrance (entrée), exit (sortie), emphasis (emphase) et keyframe (image clé). Les animations sont attachées à n’importe quel calque et contrôlent comment ce calque apparaît, disparaît ou se comporte pendant sa durée de vie.
{
"type": "text",
"text": "Animated Title",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| Champ | Type | Défaut | Description |
|---|---|---|---|
type | string | – | Catégorie d’animation : entrance, exit, emphasis, keyframe |
effect | string | – | Nom du préréglage (par ex., fadeInUp, pulse, bounceOut) |
duration | number | 30 | Durée en images |
delay | number | 0 | Délai avant le début de l’animation, en images |
easing | string | "ease" | Nom de la fonction d’accélération |
loop | number | 0 | Nombre de boucles (0 = pas de boucle, -1 = infini) |
alternate | boolean | false | Inverser la direction sur les boucles alternées |
Les animations d’entrée contrôlent comment un calque apparaît à l’écran. Elles s’exécutent une fois lorsque le temps de début du calque est atteint.
| Préréglage | Description |
|---|---|
fadeIn | Simple fondu d’opacité de 0 à 1 |
fadeInUp | Fondu entrant tout en glissant vers le haut |
fadeInDown | Fondu entrant tout en glissant vers le bas |
fadeInLeft | Fondu entrant tout en glissant depuis la gauche |
fadeInRight | Fondu entrant tout en glissant depuis la droite |
slideInUp | Glisse depuis le bas du cadre |
slideInDown | Glisse depuis le haut du cadre |
slideInLeft | Glisse depuis le bord gauche |
slideInRight | Glisse depuis le bord droit |
scaleIn | S’agrandit de 0 à la taille complète |
zoomIn | Zoom avant depuis une échelle plus petite avec un léger dépassement |
rotateIn | Tourne en position depuis un angle décalé |
bounceIn | Rebondit en position avec un dépassement élastique |
flipInX | Retournement 3D sur l’axe X (retournement horizontal) |
flipInY | Retournement 3D sur l’axe Y (retournement vertical) |
typewriter | Les caractères apparaissent un par un (calques de texte) |
revealLeft | Révélation par masque glissant depuis la gauche |
revealRight | Révélation par masque glissant depuis la droite |
revealUp | Révélation par masque glissant vers le haut |
revealDown | Révélation par masque glissant vers le bas |
Les animations de sortie contrôlent comment un calque disparaît. Elles s’exécutent à la fin de la durée du calque.
| Préréglage | Description |
|---|---|
fadeOut | Simple fondu d’opacité de 1 à 0 |
slideOutUp | Glisse vers l’extérieur par le haut du cadre |
slideOutDown | Glisse vers l’extérieur par le bas du cadre |
scaleOut | Réduit de la taille complète à 0 |
zoomOut | Zoom arrière vers une échelle plus petite et fondu |
rotateOut | Tourne hors de position vers un angle décalé |
bounceOut | Rebondit vers l’extérieur avec un dépassement élastique avant de disparaître |
flipOutX | Retournement 3D sortant sur l’axe X |
flipOutY | Retournement 3D sortant sur l’axe Y |
Les animations d’emphase attirent l’attention sur un calque pendant qu’il reste visible. Elles fonctionnent bien avec la boucle.
| Préréglage | Description |
|---|---|
pulse | Pulsation d’échelle rythmique (grandit et rétrécit) |
shake | Secousse horizontale rapide |
bounce | Mouvement de rebond vertical |
swing | Rotation oscillante semblable à un pendule |
wobble | Oscillation hors axe combinant rotation et translation |
flash | Flashs d’opacité rapides |
rubberBand | Effet d’étirement élastique et de retour rapide |
heartbeat | Rythme de battement de cœur à double pulsation |
float | Mouvement de flottement doux de haut en bas |
spin | Rotation continue à 360 degrés |
Pour un contrôle créatif complet, les animations par images clés vous permettent de définir des changements de propriétés personnalisés image par image :
{
"type": "keyframe",
"keyframes": [
{ "frame": 0, "opacity": 0, "x": -100 },
{ "frame": 15, "opacity": 1, "x": 0 },
{ "frame": 30, "opacity": 1, "x": 0 },
{ "frame": 45, "opacity": 0, "x": 100 }
],
"easing": "easeInOutCubic"
}
Les animations par images clés peuvent animer n’importe quelle propriété numérique : opacity, x, y, rotation, scaleX, scaleY, et plus encore. Chaque image clé spécifie un numéro d’image et les valeurs de propriété à cette image. Le moteur de rendu interpole entre les images clés en utilisant la fonction d’accélération spécifiée.
Un seul calque peut avoir plusieurs animations. Par exemple, une animation d’entrée suivie d’une boucle d’emphase, puis d’une animation de sortie :
{
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 20,
"easing": "easeOutCubic"
},
{
"type": "emphasis",
"effect": "pulse",
"duration": 30,
"delay": 20,
"loop": -1
},
{
"type": "exit",
"effect": "fadeOut",
"duration": 15,
"easing": "easeInCubic"
}
]
}
Les fonctions d’accélération contrôlent le taux de changement pendant une animation, déterminant si le mouvement semble linéaire, fluide, rebondissant ou élastique. Rendervid comprend plus de 30 fonctions d’accélération intégrées.
| Fonction | Description |
|---|---|
linear | Vitesse constante du début à la fin, sans accélération |
ease | Accélération par défaut de type CSS avec accélération et décélération douces |
easeIn | Commence lentement, accélère vers la fin |
easeOut | Commence rapidement, décélère vers la fin |
easeInOut | Accélère dans la première moitié, décélère dans la seconde |
| Fonction | Description |
|---|---|
easeInQuad | Accélération quadratique (t^2) |
easeOutQuad | Décélération quadratique |
easeInOutQuad | Accélération puis décélération quadratique |
| Fonction | Description |
|---|---|
easeInCubic | Accélération cubique (t^3) – plus prononcée que quadratique |
easeOutCubic | Décélération cubique – arrêt fluide et naturel |
easeInOutCubic | Accélération et décélération cubiques – l’accélération la plus couramment utilisée |
| Fonction | Description |
|---|---|
easeInQuart | Accélération quartique (t^4) |
easeOutQuart | Décélération quartique |
easeInOutQuart | Accélération et décélération quartiques |
| Fonction | Description |
|---|---|
easeInQuint | Accélération quintique (t^5) – démarrage très brusque |
easeOutQuint | Décélération quintique – arrêt très brusque |
easeInOutQuint | Accélération et décélération quintiques |
| Fonction | Description |
|---|---|
easeInSine | Accélération basée sur le sinus – la courbe d’accélération la plus douce |
easeOutSine | Décélération basée sur le sinus |
easeInOutSine | Accélération et décélération basées sur le sinus |
| Fonction | Description |
|---|---|
easeInExpo | Accélération exponentielle – presque plate puis brusque |
easeOutExpo | Décélération exponentielle – brusque puis presque plate |
easeInOutExpo | Accélération et décélération exponentielles |
| Fonction | Description |
|---|---|
easeInCirc | Courbe d’accélération circulaire |
easeOutCirc | Courbe de décélération circulaire |
easeInOutCirc | Accélération et décélération circulaires |
| Fonction | Description |
|---|---|
easeInBack | Recule légèrement avant d’accélérer vers l’avant (anticipation) |
easeOutBack | Dépasse la cible puis revient en arrière (dépassement) |
easeInOutBack | Anticipation à l’entrée, dépassement à la sortie |
| Fonction | Description |
|---|---|
easeInElastic | Oscillation élastique lors de l’accélération – remontage semblable à un ressort |
easeOutElastic | Oscillation élastique lors de la décélération – claquement semblable à un ressort |
easeInOutElastic | Élastique aux deux extrémités |
| Fonction | Description |
|---|---|
easeInBounce | Effet de rebond à l’entrée – comme une balle lâchée à l’envers |
easeOutBounce | Effet de rebond à la sortie – comme une balle touchant le sol |
easeInOutBounce | Rebond aux deux extrémités |
easeOutCubic ou easeOutQuart pour des entrées d’apparence naturelleeaseOutElastic ou easeOutBack pour un dépassement ludiqueeaseInOutSine pour un mouvement doux et continueaseInExpo pour les montées, easeOutExpo pour les arrêts rapideseaseOutBounce pour des effets de type gravitéLes transitions contrôlent comment une scène s’écoule vers la suivante. Rendervid fournit 17 types de transitions allant de simples coupures à des effets 3D cinématographiques.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
L’objet transition est placé sur la scène entrante (la scène vers laquelle on effectue la transition). La propriété direction s’applique uniquement aux transitions directionnelles comme slide, wipe et push.
| Transition | Description |
|---|---|
cut | Changement instantané sans effet visuel (par défaut) |
fade | Fondu croisé entre les scènes – la scène sortante s’estompe tandis que la scène entrante apparaît |
zoom | Zoom dans la scène sortante tandis que la scène entrante apparaît |
slide | La scène entrante glisse sur la scène sortante depuis une direction configurable (gauche, droite, haut, bas) |
wipe | Un balayage à bord dur révèle la scène entrante, se déplaçant à travers le cadre dans la direction donnée |
push | La scène entrante pousse la scène sortante hors de l’écran dans la direction spécifiée |
rotate | La scène sortante tourne pour s’éloigner tandis que la scène entrante tourne pour entrer |
flip | Transition de retournement 3D – le cadre se retourne comme une carte pour révéler la scène suivante |
blur | La scène sortante devient floue tandis que la scène entrante devient nette |
circle | Un masque circulaire s’étend depuis le centre (ou un point spécifié) pour révéler la scène suivante |
glitch | Effet de distorsion glitch numérique avec aberration chromatique et déplacement |
dissolve | Dissolution au niveau des pixels où les pixels individuels transitent aléatoirement entre les scènes |
cube | Rotation de cube 3D – les scènes sont sur des faces adjacentes d’un cube en rotation |
swirl | Distorsion en spirale qui fait tourbillonner la scène sortante dans la scène entrante |
diagonal-wipe | Un balayage diagonal à bord dur se déplaçant d’un coin à l’opposé |
iris | Iris circulaire qui s’ouvre ou se ferme comme un diaphragme d’appareil photo |
crosszoom | Les deux scènes zooment simultanément – la sortante zoome avant, l’entrante zoome arrière |
Fondu cinématographique avec un long fondu croisé :
{
"transition": {
"type": "fade",
"duration": 2
}
}
Glissement depuis la droite (courant pour le contenu séquentiel) :
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
Rotation de cube 3D (sensation dynamique et moderne) :
{
"transition": {
"type": "cube",
"duration": 1
}
}
Effet glitch (énergique, tourné vers la technologie) :
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
Les calques Rendervid prennent en charge une gamme d’effets visuels via les filtres, les modes de fusion, les ombres et les transformations.
Les filtres sont appliqués via le tableau filters sur n’importe quel calque. Chaque filtre est un objet avec un type et une value :
{
"filters": [
{ "type": "blur", "value": 5 },
{ "type": "brightness", "value": 1.2 },
{ "type": "contrast", "value": 1.1 },
{ "type": "grayscale", "value": 0.5 },
{ "type": "saturate", "value": 1.5 }
]
}
| Filtre | Plage de Valeurs | Description |
|---|---|---|
blur | 0+ (pixels) | Flou gaussien – les valeurs plus élevées produisent plus de flou |
brightness | 0+ (multiplicateur) | 0 = noir, 1 = normal, 2 = double luminosité |
contrast | 0+ (multiplicateur) | 0 = gris, 1 = normal, 2 = double contraste |
grayscale | 0-1 | 0 = couleur complète, 1 = entièrement désaturé |
hue-rotate | 0-360 (degrés) | Fait pivoter les couleurs autour de la roue chromatique |
invert | 0-1 | 0 = normal, 1 = couleurs entièrement inversées |
saturate | 0+ (multiplicateur) | 0 = désaturé, 1 = normal, 2 = double saturation |
sepia | 0-1 | 0 = normal, 1 = ton sépia complet |
La propriété blendMode contrôle comment un calque se compose avec les calques en dessous :
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
Modes de fusion pris en charge : normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
Les calques de texte et de forme prennent en charge les effets d’ombre via la propriété style :
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
Les filtres, les modes de fusion, l’opacité et les ombres peuvent tous être combinés sur un seul calque pour des traitements visuels sophistiqués :
{
"type": "image",
"src": "{{backgroundImage}}",
"opacity": 0.7,
"blendMode": "overlay",
"filters": [
{ "type": "blur", "value": 3 },
{ "type": "brightness", "value": 0.8 }
],
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.3)",
"offsetX": 0,
"offsetY": 10,
"blur": 20
}
}
}
Rendervid prend en charge à la fois les Google Fonts (plus de 100 familles intégrées) et les polices personnalisées chargées à partir d’URLs externes.
Déclarez les Google Fonts dans le tableau fonts.google :
{
"fonts": {
"google": [
{ "family": "Roboto", "weights": [400, 700] },
{ "family": "Open Sans", "weights": [300, 400, 600, 700] },
{ "family": "Montserrat", "weights": [400, 500, 700, 900] },
{ "family": "Playfair Display", "weights": [400, 700] }
]
}
}
Chaque objet de police nécessite :
| Champ | Type | Description |
|---|---|---|
family | string | Nom de famille Google Font (correspondance exacte requise) |
weights | array | Tableau de graisses numériques à charger (100-900) |
Graisses de police courantes : 100 (Thin), 200 (Extra Light), 300 (Light), 400 (Regular), 500 (Medium), 600 (Semi Bold), 700 (Bold), 800 (Extra Bold), 900 (Black).
Chargez des polices à partir d’URLs externes en utilisant le tableau fonts.custom :
{
"fonts": {
"custom": [
{
"family": "MyBrandFont",
"src": "https://example.com/fonts/brand-font.woff2",
"weight": 400,
"style": "normal"
},
{
"family": "MyBrandFont",
"src": "https://example.com/fonts/brand-font-bold.woff2",
"weight": 700,
"style": "normal"
}
]
}
}
Formats de police pris en charge : WOFF2 (recommandé pour la taille de fichier la plus petite), WOFF, TTF et OTF.
Référencez les polices déclarées par nom de famille dans les styles de calque de texte :
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
Rendervid comprend des chaînes de secours de polices spécifiques à la plateforme pour garantir un rendu cohérent dans différents environnements. Si une police spécifiée n’est pas disponible, le moteur de rendu revient aux polices système correspondant à la même classification (serif, sans-serif, monospace).
Rendervid prend en charge une large gamme de formats de sortie et de codecs pour le rendu vidéo et image.
| Format | Codec | Extension de Fichier | Meilleur Pour |
|---|---|---|---|
| MP4 | H.264 | .mp4 | Compatibilité maximale – web, mobile, réseaux sociaux |
| WebM | VP8 / VP9 | .webm | Intégration web avec des tailles de fichier plus petites |
| MOV | ProRes | .mov | Flux de travail de montage professionnel, qualité sans perte |
| GIF | – | .gif | Animations courtes, partage social, email |
| MP4 | H.265 / HEVC | .mp4 | Appareils plus récents, fichiers 50% plus petits que H.264 à qualité égale |
| WebM | AV1 | .webm | Codec de nouvelle génération, meilleure efficacité de compression |
| Format | Extension de Fichier | Meilleur Pour |
|---|---|---|
| PNG | .png | Qualité sans perte, support de transparence |
| JPEG | .jpg | Photographies, tailles de fichier plus petites |
| WebP | .webp | Web moderne, meilleur équilibre entre qualité et taille |
| Préréglage | Description |
|---|---|
draft | Rendu rapide avec qualité réduite – idéal pour la prévisualisation |
standard | Qualité et taille de fichier équilibrées – bon pour la plupart des cas d’usage |
high | Débit binaire et qualité plus élevés – pour les livrables finaux |
lossless | Qualité maximale sans artefacts de compression |
Rendervid prend en charge les résolutions des petites vignettes jusqu’à la 8K :
| Résolution | Dimensions | Usage Courant |
|---|---|---|
| SD | 640 x 480 | Vignettes, aperçus |
| HD | 1280 x 720 | Vidéo web, email |
| Full HD | 1920 x 1080 | YouTube, présentations |
| 2K | 2560 x 1440 | Écrans haute qualité |
| 4K UHD | 3840 x 2160 | Professionnel, diffusion |
| 8K | 7680 x 4320 | Résolution maximale, à l’épreuve du futur |
Les fréquences d’images de 1 fps (diaporamas) à 120 fps (ralenti, contenu de jeu) sont prises en charge. Les choix courants sont 24 fps (cinématographique), 30 fps (web/social) et 60 fps (mouvement fluide).
Voici un template Rendervid complet qui démontre les fonctionnalités clés du système de templates travaillant ensemble : entrées dynamiques, plusieurs scènes avec transitions, compositions en couches, animations avec accélération, polices et effets visuels.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Product Name",
"required": true,
"default": "ProductX"
},
{
"key": "tagline",
"type": "string",
"label": "Tagline",
"required": true,
"default": "The future is here."
},
{
"key": "heroImage",
"type": "url",
"label": "Hero Image",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Primary Color",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Call to Action",
"default": "Learn More"
}
],
"fonts": {
"google": [
{ "family": "Inter", "weights": [400, 600, 800] },
{ "family": "JetBrains Mono", "weights": [400] }
]
},
"composition": {
"scenes": [
{
"name": "intro",
"duration": 6,
"layers": [
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 540 },
"size": { "width": 1920, "height": 1080 },
"style": {
"fill": "{{primaryColor}}",
"opacity": 0.1
}
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 960, "y": 400 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 96,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 15,
"easing": "easeOutCubic"
}
]
},
{
"type": "text",
"text": "{{tagline}}",
"position": { "x": 960, "y": 520 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 400,
"fontSize": 36,
"color": "{{primaryColor}}",
"textAlign": "center",
"letterSpacing": 4
},
"animations": [
{
"type": "entrance",
"effect": "fadeIn",
"duration": 25,
"delay": 40,
"easing": "easeOutSine"
}
]
},
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 600 },
"size": { "width": 80, "height": 3 },
"style": {
"fill": "{{primaryColor}}"
},
"animations": [
{
"type": "entrance",
"effect": "scaleIn",
"duration": 20,
"delay": 60,
"easing": "easeOutQuart"
}
]
}
]
},
{
"name": "product-showcase",
"duration": 8,
"transition": {
"type": "slide",
"duration": 0.8,
"direction": "left"
},
"layers": [
{
"type": "image",
"src": "{{heroImage}}",
"position": { "x": 1200, "y": 540 },
"size": { "width": 800, "height": 800 },
"anchor": { "x": 0.5, "y": 0.5 },
"filters": [
{ "type": "brightness", "value": 1.1 },
{ "type": "contrast", "value": 1.05 }
],
"animations": [
{
"type": "entrance",
"effect": "zoomIn",
"duration": 40,
"easing": "easeOutBack"
},
{
"type": "emphasis",
"effect": "float",
"duration": 120,
"delay": 40,
"loop": -1,
"alternate": true
}
]
},
{
"type": "text",
"text": "Introducing",
"position": { "x": 400, "y": 350 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "JetBrains Mono",
"fontSize": 18,
"color": "{{primaryColor}}",
"textTransform": "uppercase",
"letterSpacing": 6
},
"animations": [
{
"type": "entrance",
"effect": "typewriter",
"duration": 30,
"delay": 10,
"easing": "linear"
}
]
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 400, "y": 430 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 72,
"color": "#FFFFFF"
},
"animations": [
{
"type": "entrance",
"effect": "revealLeft",
"duration": 25,
"delay": 20,
"easing": "easeOutQuart"
}
]
},
{
"type": "text",
"text": "{{tagline}}",
"position": { "x": 400, "y": 520 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 400,
"fontSize": 24,
"color": "#CCCCCC",
"lineHeight": 1.6
},
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 20,
"delay": 40,
"easing": "easeOutCubic"
}
]
}
]
},
{
"name": "cta",
"duration": 6,
"transition": {
"type": "fade",
"duration": 1.2
},
"layers": [
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 540 },
"size": { "width": 1920, "height": 1080 },
"style": {
"fill": "{{primaryColor}}",
"opacity": 0.15
}
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 960, "y": 380 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 80,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "bounceIn",
"duration": 35,
"easing": "easeOutElastic"
}
]
},
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 550 },
"size": { "width": 280, "height": 60 },
"style": {
"fill": "{{primaryColor}}",
"borderRadius": 30
},
"animations": [
{
"type": "entrance",
"effect": "scaleIn",
"duration": 25,
"delay": 30,
"easing": "easeOutBack"
},
{
"type": "emphasis",
"effect": "pulse",
"duration": 60,
"delay": 60,
"loop": -1,
"alternate": true
}
]
},
{
"type": "text",
"text": "{{ctaText}}",
"position": { "x": 960, "y": 550 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 600,
"fontSize": 22,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "fadeIn",
"duration": 20,
"delay": 40,
"easing": "easeOutSine"
}
]
}
]
}
]
}
}
Ce template crée une vidéo de lancement de produit de 20 secondes avec trois scènes : une intro typographique avec des animations de texte échelonnées, une présentation de produit avec une image flottante et un effet machine à écrire, et une scène d’appel à l’action de clôture avec un bouton pulsant. Tout le texte, les couleurs et les images sont pilotés par des variables de template, le rendant entièrement réutilisable.
Les templates Rendervid sont des fichiers JSON qui définissent la structure, le contenu, les animations et les paramètres de sortie d'une vidéo ou d'une image. Chaque template comprend une configuration de sortie (dimensions, fps, durée), des définitions d'entrée pour les variables dynamiques, une composition avec des scènes et des calques, ainsi qu'une configuration optionnelle des polices et des composants personnalisés.
Les variables de template utilisent la syntaxe {{nomVariable}}. Vous définissez les entrées dans le tableau inputs du template avec une clé, un type (string, number, boolean, color, url, array), un label, une description et une valeur par défaut. Au moment du rendu, ces variables sont remplacées par des valeurs réelles, rendant les templates réutilisables et dynamiques.
Rendervid comprend plus de 40 préréglages d'animation intégrés organisés en quatre catégories : animations d'entrée (fadeIn, slideIn, scaleIn, bounceIn, etc.), animations de sortie (fadeOut, slideOut, zoomOut, etc.), animations d'emphase (pulse, shake, bounce, swing, heartbeat, etc.) et animations par images clés entièrement personnalisables avec plus de 30 fonctions d'accélération.
Rendervid offre 17 types de transitions de scènes : cut, fade, zoom, slide, wipe, push, rotate, flip (3D), blur, circle, glitch, dissolve, cube (3D), swirl, diagonal-wipe, iris et crosszoom. Chaque transition peut être configurée avec des paramètres de durée et de direction.
Rendervid prend en charge plusieurs formats de sortie, notamment MP4 (H.264), WebM (VP8/VP9), MOV (ProRes), GIF pour la vidéo, et PNG, JPEG, WebP pour les images. Les codecs avancés comme H.265/HEVC et AV1 sont également pris en charge. La résolution va jusqu'à 8K (7680x4320) avec des fréquences d'images de 1 à 120 fps.
Oui, Rendervid prend en charge plus de 100 polices Google Fonts intégrées et le chargement de polices personnalisées à partir d'URLs dans les formats WOFF2, WOFF, TTF et OTF. Vous pouvez spécifier des graisses de police de 100 à 900 et configurer des polices de secours spécifiques à la plateforme pour une compatibilité inter-environnements.
Nous aidons les entreprises comme la vôtre à développer des chatbots intelligents, des serveurs MCP, des outils d'IA ou d'autres types d'automatisation par IA pour remplacer l'humain dans les tâches répétitives de votre organisation.
Explorez tous les composants Rendervid : 8 types de calques intégrés (texte, image, vidéo, forme, audio, groupe, lottie, personnalisé), composants React prêts à...
Déployez Rendervid n'importe où : rendu basé sur navigateur pour les aperçus, Node.js pour le traitement par lots côté serveur, ou rendu cloud sur AWS Lambda, A...
Intégrez FlowHunt avec le serveur json2video-mcp pour automatiser la génération programmatique de vidéos, gérer des modèles personnalisés et connecter des workf...