<!DOCTYPE html><html lang="fr"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="/assets/logo.webp"/><link rel="preload" as="image" imagesrcset="/_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=640&q=75 640w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=750&q=75 750w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=828&q=75 828w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=1080&q=75 1080w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=1200&q=75 1200w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=1920&q=75 1920w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=2048&q=75 2048w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=3840&q=75 3840w" imagesizes="100vw" fetchpriority="high"/><link rel="stylesheet" href="/_next/static/chunks/112jvyiagzz-4.css" data-precedence="next"/><link rel="preload" as="script" fetchpriority="low" href="/_next/static/chunks/0yb2wil16uz6h.js"/><script src="/_next/static/chunks/15_04p485mvkk.js" async=""></script><script src="/_next/static/chunks/10~x95jhs6ns3.js" async=""></script><script src="/_next/static/chunks/0o59ac8426icc.js" async=""></script><script src="/_next/static/chunks/0pqt~8bl3ukh4.js" async=""></script><script src="/_next/static/chunks/turbopack-0x-pul-c-s0.g.js" async=""></script><script src="/_next/static/chunks/0oqzprb_vupjm.js" async=""></script><script src="/_next/static/chunks/0d3shmwh5_nmn.js" async=""></script><script src="/_next/static/chunks/0050ce7449ukx.js" async=""></script><link rel="preload" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" as="style"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><meta name="google-site-verification" content="-w3ptWmLLD5C8_WwI2_IY0elORDJutcmCk_uk3njfYg"/><title>Remotion + Agent Skills : créer des vidéos avec l’IA en React | CHEUK Services</title><meta name="description" content="Remotion permet de produire des vidéos avec React. Voici comment installer un projet, utiliser les Agent Skills et passer d’une idée à un rendu MP4 maîtrisé."/><meta name="author" content="Tahina CHEUK"/><meta name="keywords" content="agence web madagascar,community management madagascar,développement web madagascar,branding madagascar,studio créatif madagascar,agence digitale madagascar,community manager madagascar,CHEUK Services"/><meta name="creator" content="CHEUK Services"/><meta name="publisher" content="CHEUK Services"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-image-preview:large, max-snippet:-1"/><link rel="canonical" href="https://cheuk-services.com/blog/remotion-agent-skills-creer-video-ia-react"/><meta property="og:title" content="Remotion + Agent Skills : créer des vidéos avec l’IA en React"/><meta property="og:description" content="Remotion permet de produire des vidéos avec React. Voici comment installer un projet, utiliser les Agent Skills et passer d’une idée à un rendu MP4 maîtrisé."/><meta property="og:url" content="https://cheuk-services.com/blog/remotion-agent-skills-creer-video-ia-react"/><meta property="og:image" content="https://cheuk-services.com/blog/remotion-agent-skills-creer-video-ia-react-cover-ai.webp"/><meta property="og:image:alt" content="Du brief à la vidéo : un workflow programmatique avec Remotion"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2026-08-07"/><meta property="article:author" content="CHEUK Services"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="CHEUK Services — Studio Créa & Tech"/><meta name="twitter:description" content="Studio de communication digitale à Madagascar."/><meta name="twitter:image" content="https://cheuk-services.com/assets/poster.png"/><link rel="shortcut icon" href="/assets/favicon.png"/><link rel="icon" href="/assets/favicon.png"/><link rel="apple-touch-icon" href="/assets/favicon.png"/><link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/><script type="application/ld+json">{"@context":"https://schema.org","@type":["Organization","ProfessionalService"],"@id":"https://cheuk-services.com/#organization","name":"CHEUK Services","url":"https://cheuk-services.com","logo":"https://cheuk-services.com/assets/logo.png","image":"https://cheuk-services.com/assets/poster.png","description":"Studio créatif et technique à Madagascar. Communication digitale, branding, développement web, mobile et IA.","email":"info@cheuk-services.com","telephone":"+261349538187","areaServed":["Madagascar","International"],"priceRange":"$$","foundingDate":"2024","knowsLanguage":["fr","en"],"sameAs":["https://www.linkedin.com/in/tahina-cheuk-ramahavatrarivo-839398389/","https://www.instagram.com/tahina_cheuk/","https://www.facebook.com/ramahavatrarivo.tahinacheuk"],"member":[{"@type":"Person","name":"Tahina CHEUK","jobTitle":"CEO & Community Manager","worksFor":{"@id":"https://cheuk-services.com/#organization"}}],"hasOfferCatalog":{"@type":"OfferCatalog","name":"Services CHEUK Services","itemListElement":[{"@type":"Offer","position":1,"itemOffered":{"@type":"Service","name":"Community Management"}},{"@type":"Offer","position":2,"itemOffered":{"@type":"Service","name":"Création de contenu"}},{"@type":"Offer","position":3,"itemOffered":{"@type":"Service","name":"Branding"}},{"@type":"Offer","position":4,"itemOffered":{"@type":"Service","name":"Web design"}},{"@type":"Offer","position":5,"itemOffered":{"@type":"Service","name":"Motion design"}},{"@type":"Offer","position":6,"itemOffered":{"@type":"Service","name":"Graphisme"}},{"@type":"Offer","position":7,"itemOffered":{"@type":"Service","name":"Calendrier éditorial"}},{"@type":"Offer","position":8,"itemOffered":{"@type":"Service","name":"Rédaction"}},{"@type":"Offer","position":9,"itemOffered":{"@type":"Service","name":"Assistance virtuelle"}}]}}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","@id":"https://cheuk-services.com/#website","url":"https://cheuk-services.com","name":"CHEUK Services","description":"Studio créatif à Madagascar.","publisher":{"@id":"https://cheuk-services.com/#organization"},"inLanguage":"fr-FR"}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","@id":"https://cheuk-services.com/#webpage","url":"https://cheuk-services.com","name":"CHEUK Services — Studio Créa | Madagascar","isPartOf":{"@id":"https://cheuk-services.com/#website"},"about":{"@id":"https://cheuk-services.com/#organization"},"description":"Studio de communication digitale à Madagascar.","inLanguage":"fr-FR","breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https://cheuk-services.com"}]}}</script><script src="/_next/static/chunks/03~yq9q893hmn.js" nomodule=""></script></head><body><div hidden=""><!--$--><!--/$--></div><main style="background:#fbf7ef;color:#1a1612;min-height:100vh;font-family:'Inter', sans-serif"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","@id":"https://cheuk-services.com/blog/remotion-agent-skills-creer-video-ia-react#blogposting","mainEntityOfPage":{"@type":"WebPage","@id":"https://cheuk-services.com/blog/remotion-agent-skills-creer-video-ia-react"},"headline":"Remotion + Agent Skills : créer des vidéos avec l’IA en React","description":"Remotion permet de produire des vidéos avec React. Voici comment installer un projet, utiliser les Agent Skills et passer d’une idée à un rendu MP4 maîtrisé.","image":["https://cheuk-services.com/blog/remotion-agent-skills-creer-video-ia-react-cover-ai.webp"],"datePublished":"2026-08-07","dateModified":"2026-08-07","author":{"@type":"Organization","name":"CHEUK Services","url":"https://cheuk-services.com"},"publisher":{"@type":"Organization","name":"CHEUK Services","url":"https://cheuk-services.com","logo":{"@type":"ImageObject","url":"https://cheuk-services.com/assets/logo.png"}},"articleSection":"Vidéo","wordCount":668,"inLanguage":"fr-FR","url":"https://cheuk-services.com/blog/remotion-agent-skills-creer-video-ia-react"}</script><style>
@media (max-width: 960px) {
.blog-single-layout {
grid-template-columns: 1fr !important;
}
.blog-single-sidebar {
position: static !important;
}
}
@media (max-width: 680px) {
.blog-single-nav {
grid-template-columns: 1fr !important;
}
}
</style><style>
@keyframes hm-pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:0.6} }
@keyframes hm-pulse-ring { 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(2.4);opacity:0} }
.hm-shell {
position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
z-index: 100;
background: #ffffff;
border-radius: 9999px;
box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
display: flex; align-items: center; gap: 4px;
transition: padding .5s cubic-bezier(.2,.8,.2,1), max-width .5s cubic-bezier(.2,.8,.2,1);
overflow: hidden; color: #1a1612;
}
.hm-shell.expanded { padding: 8px; max-width: 820px; }
.hm-shell.compact { padding: 6px 18px 6px 6px; max-width: 240px; }
.hm-avatar {
width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
background: #ffffff; display: flex; align-items: center; justify-content: center;
overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.08) inset;
transition: width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1);
}
.hm-shell.compact .hm-avatar { width: 40px; height: 40px; }
.hm-avatar img { width: 92%; height: 92%; object-fit: contain; }
.hm-nav {
display: flex; align-items: center; gap: 6px; padding: 0 14px;
opacity: 1; transform: scale(1);
transition: opacity .35s, transform .35s, max-width .5s cubic-bezier(.2,.8,.2,1), padding .5s;
max-width: 600px; overflow: hidden; white-space: nowrap;
}
.hm-shell.compact .hm-nav { opacity: 0; transform: scale(0.85); max-width: 0; padding: 0; }
.hm-nav a { color: #1a1612; text-decoration: none; padding: 8px 14px; font-size: 14px; font-weight: 500; border-radius: 9999px; transition: background .2s; }
.hm-nav a:hover { background: rgba(0,0,0,0.06); }
.hm-cta {
background: #0e0e10; color: #ffffff;
text-decoration: none; padding: 12px 24px;
border-radius: 9999px; font-size: 14px; font-weight: 600; flex-shrink: 0;
opacity: 1; transform: scale(1); max-width: 200px;
transition: opacity .35s, transform .35s, max-width .5s cubic-bezier(.2,.8,.2,1), padding .5s, margin .5s;
overflow: hidden; white-space: nowrap;
}
.hm-shell.compact .hm-cta { opacity: 0; transform: scale(0.85); max-width: 0; padding: 0; margin: 0; }
.hm-status {
display: flex; align-items: center; gap: 10px; padding-left: 8px;
opacity: 0; transform: scale(0.85); max-width: 0; overflow: hidden; white-space: nowrap;
transition: opacity .35s .1s, transform .35s .1s, max-width .5s cubic-bezier(.2,.8,.2,1);
}
.hm-shell.compact .hm-status { opacity: 1; transform: scale(1); max-width: 220px; }
.hm-status-text { font-size: 13px; font-weight: 500; color: #555; }
.hm-dot-wrap { position: relative; width: 10px; height: 10px; }
.hm-dot { position: absolute; inset: 0; background: #22c55e; border-radius: 50%; animation: hm-pulse-dot 1.6s ease-in-out infinite; }
.hm-dot::after { content: ''; position: absolute; inset: 0; background: #22c55e; border-radius: 50%; animation: hm-pulse-ring 1.6s ease-out infinite; }
.hm-burger {
display: none;
width: 44px; height: 44px; border: 0; border-radius: 50%;
background: #0e0e10; color: #ffffff; cursor: pointer; flex-shrink: 0;
align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.hm-burger span {
display: block; width: 18px; height: 2px; border-radius: 99px;
background: currentColor; transition: transform .25s ease, opacity .25s ease;
}
.hm-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hm-burger.open span:nth-child(2) { opacity: 0; }
.hm-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hm-mobile-panel {
display: none;
position: fixed; left: 16px; right: 16px; top: 84px; z-index: 99;
background: #ffffff; color: #1a1612; border-radius: 24px;
box-shadow: 0 24px 70px rgba(0,0,0,0.18);
padding: 18px; transform-origin: top center;
}
.hm-mobile-panel a {
display: flex; align-items: center; justify-content: space-between;
color: #1a1612; text-decoration: none; padding: 16px 8px;
border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 18px; font-weight: 700;
}
.hm-mobile-panel a:last-child { border-bottom: 0; }
.hm-mobile-cta {
margin-top: 14px; background: #0e0e10; color: #ffffff !important;
border-radius: 999px; justify-content: center !important; border-bottom: 0 !important;
}
.hm-mobile-backdrop {
display: none; position: fixed; inset: 0; z-index: 98;
background: rgba(0,0,0,0.24); backdrop-filter: blur(3px);
}
@media (max-width: 760px) {
.hm-shell {
top: 12px; left: 14px; right: 14px; transform: none;
max-width: none !important; width: auto; justify-content: space-between;
padding: 8px !important;
}
.hm-shell.compact { padding: 8px !important; }
.hm-nav, .hm-cta, .hm-status { display: none !important; }
.hm-avatar, .hm-shell.compact .hm-avatar { width: 44px; height: 44px; }
.hm-burger { display: flex; }
.hm-mobile-panel.open, .hm-mobile-backdrop.open { display: block; }
}
</style><div class="hm-mobile-backdrop"></div><div class="hm-mobile-panel"><a href="/">Accueil<span>+</span></a><a href="/#services">Services<span>+</span></a><a href="/#portfolio">Portfolio<span>+</span></a><a href="/blog">Blog<span>+</span></a><a href="/#propos">À propos<span>+</span></a><a href="/#contact" class="hm-mobile-cta">Demande de devis</a></div><div class="hm-shell expanded"><a href="#top" class="hm-avatar" aria-label="Accueil"><img src="/assets/logo.webp" alt="logo"/></a><nav class="hm-nav"><a href="/">Accueil</a><a href="/#services">Services</a><a href="/#portfolio">Portfolio</a><a href="/blog">Blog</a><a href="/#propos">À propos</a></nav><a href="/#contact" class="hm-cta">Demande de devis</a><div class="hm-status"><div class="hm-dot-wrap"><span class="hm-dot"></span></div><span class="hm-status-text">Disponible</span></div><button type="button" class="hm-burger" aria-label="Ouvrir le menu" aria-expanded="false"><span></span><span></span><span></span></button></div><article><header style="padding:112px 0 70px"><div style="max-width:1180px;margin:0 auto;padding:0 24px 26px"><nav aria-label="Fil d'Ariane" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:rgba(26,22,18,0.52);font-size:12px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase"><a style="color:#8a6a2b;text-decoration:none" href="/">Accueil</a><span>/</span><a style="color:#8a6a2b;text-decoration:none" href="/blog">Blog</a><span>/</span><span style="color:#1a1612;max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Remotion + Agent Skills : créer des vidéos avec l’IA en React</span></nav></div><div style="width:100%;position:relative;min-height:clamp(520px, 72vh, 760px);overflow:hidden;background:#101820"><img alt="Du brief à la vidéo : un workflow programmatique avec Remotion" fetchpriority="high" decoding="async" data-nimg="fill" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;object-fit:cover;color:transparent" sizes="100vw" srcset="/_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=640&q=75 640w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=750&q=75 750w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=828&q=75 828w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=1080&q=75 1080w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=1200&q=75 1200w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=1920&q=75 1920w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=2048&q=75 2048w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=3840&q=75 3840w" src="/_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-cover-ai.webp&w=3840&q=75"/><div style="position:absolute;inset:0;background:linear-gradient(90deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.52) 42%, rgba(10,10,10,0.16) 100%)"></div><div style="position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,10,10,0.12) 0%, rgba(10,10,10,0.72) 100%)"></div><div style="position:relative;z-index:1;max-width:1180px;margin:0 auto;min-height:clamp(460px, 62vh, 640px);padding:clamp(34px, 6vw, 70px) 24px;display:flex;align-items:flex-end"><div style="max-width:760px;color:#ffffff"><div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:rgba(255,255,255,0.76);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:800"><span style="color:#C8A45C">Vidéo</span><span>•</span><time datetime="2026-08-07">07 août 2026</time><span>•</span><span>10 min</span></div><h1 style="font-family:'Space Grotesk', sans-serif;font-size:clamp(32px, 4.6vw, 58px);line-height:1.06;margin:14px 0 16px;letter-spacing:0;font-weight:500">Remotion + Agent Skills : créer des vidéos avec l’IA en React</h1><p style="margin:0;max-width:680px;color:rgba(255,255,255,0.78);font-size:16px;line-height:1.65">Remotion permet de produire des vidéos avec React. Voici comment installer un projet, utiliser les Agent Skills et passer d’une idée à un rendu MP4 maîtrisé.</p><div style="margin-top:22px;color:rgba(255,255,255,0.68);font-size:13px">Par <!-- -->CHEUK Services</div></div></div></div></header><div class="blog-single-layout" style="max-width:1180px;margin:0 auto;padding:0 24px 110px;display:grid;grid-template-columns:minmax(0, 1fr) 300px;gap:54px;align-items:start"><div style="background:#ffffff;border:1px solid rgba(26,22,18,0.12);border-radius:8px;padding:clamp(24px, 4vw, 48px)"><section style="margin-bottom:38px"><h2 style="font-family:'Space Grotesk', sans-serif;font-size:clamp(26px, 3vw, 38px);line-height:1.08;margin:0 0 18px">Remotion : une vidéo devient un projet React</h2><div style="display:grid;gap:16px"><p style="margin:0;color:rgba(26,22,18,0.76);font-size:17px;line-height:1.85"><span>Remotion est un framework qui transforme des composants React en vidéo. Au lieu d’assembler chaque plan sur une timeline classique, on décrit les scènes, le timing, les médias et les animations dans du code. Le résultat reste visuel, mais il devient aussi versionnable, reproductible et plus simple à décliner.</span></p><p style="margin:0;color:rgba(26,22,18,0.76);font-size:17px;line-height:1.85"><span>Cette approche est particulièrement utile lorsqu’un même format doit vivre en plusieurs versions : une série de vidéos produits, des bilans personnalisés, des annonces localisées ou des capsules pour les réseaux sociaux. Les données changent, tandis que la composition, les règles de mise en page et les animations restent cohérentes.</span></p><ul style="margin:4px 0 0;padding-left:22px;display:grid;gap:10px;color:rgba(26,22,18,0.76);font-size:16px;line-height:1.7"><li><span></span><strong style="color:#1a1612;font-weight:800">React :</strong><span> les scènes sont des composants et les propriétés pilotent leur contenu.</span></li><li><span></span><strong style="color:#1a1612;font-weight:800">Frames :</strong><span> chaque animation est calculée à partir de l’image courante et de la durée.</span></li><li><span></span><strong style="color:#1a1612;font-weight:800">Rendu :</strong><span> Remotion produit un fichier vidéo à partir de la composition définie dans le projet.</span></li></ul><div style="display:flex;flex-wrap:wrap;gap:10px"><a href="https://www.remotion.dev/docs" target="_blank" rel="noreferrer" style="display:inline-flex;align-items:center;width:fit-content;border-radius:999px;padding:10px 14px;background:#101820;color:#ffffff;text-decoration:none;font-size:14px;font-weight:800">Documentation officielle Remotion</a><a href="https://github.com/remotion-dev/remotion" target="_blank" rel="noreferrer" style="display:inline-flex;align-items:center;width:fit-content;border-radius:999px;padding:10px 14px;background:#101820;color:#ffffff;text-decoration:none;font-size:14px;font-weight:800">Dépôt GitHub officiel Remotion</a></div></div></section><section style="margin-bottom:38px"><h2 style="font-family:'Space Grotesk', sans-serif;font-size:clamp(26px, 3vw, 38px);line-height:1.08;margin:0 0 18px">Installer un premier projet Remotion</h2><div style="display:grid;gap:16px"><p style="margin:0;color:rgba(26,22,18,0.76);font-size:17px;line-height:1.85"><span>Le moyen le plus direct de démarrer consiste à créer le squelette proposé par Remotion. La commande prépare un projet JavaScript ou TypeScript avec une composition d’exemple et le Studio : une interface locale pour visualiser chaque frame avant de lancer le rendu final.</span></p><p style="margin:0;color:rgba(26,22,18,0.76);font-size:17px;line-height:1.85"><span>Travaillez dans un dossier isolé et conservez les médias utilisés dans le projet. Une vidéo générée par code n’est pas une boîte noire : les composants, les données d’entrée, les polices et les fichiers audio doivent rester traçables pour pouvoir rejouer le rendu plus tard.</span></p><pre style="margin:4px 0 0;padding:18px;border-radius:8px;overflow-x:auto;background:#1a1612;color:#f5f0e8;font-size:14px;line-height:1.65"><code># Créer un projet Remotion avec le générateur officiel
npx create-video@latest
# Entrer dans le dossier créé
cd mon-projet-remotion
# Ouvrir Remotion Studio pour prévisualiser les compositions
npm run start</code></pre></div></section><section style="margin-bottom:38px"><h2 style="font-family:'Space Grotesk', sans-serif;font-size:clamp(26px, 3vw, 38px);line-height:1.08;margin:0 0 18px">Créer une composition et animer avec les frames</h2><div style="display:grid;gap:16px"><p style="margin:0;color:rgba(26,22,18,0.76);font-size:17px;line-height:1.85"><span>Une composition est le point de départ d’une vidéo Remotion. Elle indique notamment sa taille, sa fréquence d’images et sa durée. À l’intérieur, `useCurrentFrame()` donne la frame affichée au moment du rendu ; `interpolate()` permet ensuite de convertir cette valeur en opacité, déplacement, échelle ou toute autre propriété animable.</span></p><p style="margin:0;color:rgba(26,22,18,0.76);font-size:17px;line-height:1.85"><span>L’exemple ci-dessous crée un carton titre qui apparaît progressivement pendant la première seconde. La logique est volontairement simple : elle sert de base pour comprendre que le temps est une donnée, et non une série de manipulations manuelles sur une timeline.</span></p><pre style="margin:4px 0 0;padding:18px;border-radius:8px;overflow-x:auto;background:#1a1612;color:#f5f0e8;font-size:14px;line-height:1.65"><code>import { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';
export const IntroTitle = () => {
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 20], [0, 1], {
extrapolateRight: 'clamp',
});
const translateY = interpolate(frame, [0, 20], [24, 0], {
extrapolateRight: 'clamp',
});
return (
<AbsoluteFill style={{ alignItems: 'center', justifyContent: 'center', backgroundColor: '#101820', color: '#f7f2e8' }}>
<h1 style={{ opacity, transform: `translateY(${translateY}px)` }}>Une vidéo pilotée par React</h1>
</AbsoluteFill>
);
};</code></pre></div></section><section style="margin-bottom:38px"><h2 style="font-family:'Space Grotesk', sans-serif;font-size:clamp(26px, 3vw, 38px);line-height:1.08;margin:0 0 18px">À quoi servent les Agent Skills ?</h2><figure style="margin:0 0 24px;border-radius:8px;overflow:hidden;border:1px solid rgba(26,22,18,0.12);background:#101820"><div style="position:relative;width:100%;aspect-ratio:3/2"><img alt="Flux visuel allant d’une idée à du code, un aperçu vidéo puis un fichier média rendu" loading="lazy" decoding="async" data-nimg="fill" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;object-fit:cover;color:transparent" sizes="(max-width: 960px) calc(100vw - 48px), 760px" srcset="/_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=32&q=75 32w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=48&q=75 48w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=64&q=75 64w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=96&q=75 96w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=128&q=75 128w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=256&q=75 256w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=384&q=75 384w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=640&q=75 640w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=750&q=75 750w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=828&q=75 828w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=1080&q=75 1080w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=1200&q=75 1200w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=1920&q=75 1920w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=2048&q=75 2048w, /_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=3840&q=75 3840w" src="/_next/image?url=%2Fblog%2Fremotion-agent-skills-creer-video-ia-react-inline-ai.webp&w=3840&q=75"/></div></figure><div style="display:grid;gap:16px"><p style="margin:0;color:rgba(26,22,18,0.76);font-size:17px;line-height:1.85"><span>Les Agent Skills de Remotion donnent à un agent de code un contexte spécialisé : structure d’une composition, animation, médias, sous-titres, aperçu dans Studio et rendu. Ils évitent de traiter une vidéo Remotion comme une simple page React, ce qui est important car le timing, les assets et le rendu image par image ont leurs propres contraintes.</span></p><p style="margin:0;color:rgba(26,22,18,0.76);font-size:17px;line-height:1.85"><span>Ils ne remplacent pas la direction créative ni la validation du résultat. En revanche, ils aident à formuler une demande précise, à générer un premier composant propre et à itérer plus vite. Un bon brief indique toujours le format, la durée, le rythme, les éléments à afficher et les contraintes de marque.</span></p><ul style="margin:4px 0 0;padding-left:22px;display:grid;gap:10px;color:rgba(26,22,18,0.76);font-size:16px;line-height:1.7"><li><span></span><strong style="color:#1a1612;font-weight:800">Créer :</strong><span> démarrer une composition ou un projet adapté au besoin.</span></li><li><span></span><strong style="color:#1a1612;font-weight:800">Mettre en forme :</strong><span> appliquer les bonnes pratiques pour le timing, les médias et la typographie.</span></li><li><span></span><strong style="color:#1a1612;font-weight:800">Prévisualiser et exporter :</strong><span> contrôler le résultat dans Studio, puis lancer le rendu.</span></li></ul><div style="display:flex;flex-wrap:wrap;gap:10px"><a href="https://www.remotion.dev/docs/ai/skills" target="_blank" rel="noreferrer" style="display:inline-flex;align-items:center;width:fit-content;border-radius:999px;padding:10px 14px;background:#101820;color:#ffffff;text-decoration:none;font-size:14px;font-weight:800">Documentation officielle des Agent Skills Remotion</a></div></div></section><section style="margin-bottom:38px"><h2 style="font-family:'Space Grotesk', sans-serif;font-size:clamp(26px, 3vw, 38px);line-height:1.08;margin:0 0 18px">Installer les skills et travailler avec un agent de code</h2><div style="display:grid;gap:16px"><p style="margin:0;color:rgba(26,22,18,0.76);font-size:17px;line-height:1.85"><span>Remotion documente une installation des skills depuis le terminal. Une fois ajoutés à votre environnement, ils peuvent être utilisés par un agent compatible pour guider la création, le Studio ou le rendu. Commencez par une scène courte : un titre, deux plans et une transition. Vous pourrez ensuite enrichir le projet avec des données, une voix-off ou des sous-titres.</span></p><p style="margin:0;color:rgba(26,22,18,0.76);font-size:17px;line-height:1.85"><span>Le bon échange avec un agent n’est pas « fais une belle vidéo ». Décrivez le livrable : « crée une vidéo verticale de 15 secondes, fond sombre, titre qui arrive en fondu, trois données à afficher, sortie 1080 × 1920 ». Demandez ensuite un aperçu, relisez le code et validez le rendu avant toute diffusion.</span></p><pre style="margin:4px 0 0;padding:18px;border-radius:8px;overflow-x:auto;background:#1a1612;color:#f5f0e8;font-size:14px;line-height:1.65"><code># Ajouter les Agent Skills officiels de Remotion
npx skills add remotion-dev/skills
# Exemple de demande à un agent de code
# Crée une composition verticale 1080x1920 de 15 secondes.
# Anime un titre, puis trois chiffres, avec un rythme régulier.
# Utilise des composants Remotion et prépare un rendu local.</code></pre></div></section><section style="margin-bottom:38px"><h2 style="font-family:'Space Grotesk', sans-serif;font-size:clamp(26px, 3vw, 38px);line-height:1.08;margin:0 0 18px">Prévisualiser, rendre et fiabiliser la production</h2><div style="display:grid;gap:16px"><p style="margin:0;color:rgba(26,22,18,0.76);font-size:17px;line-height:1.85"><span>Le Studio sert à vérifier le timing image par image avant l’export. C’est le moment de contrôler les débordements de texte, les polices, les changements de plan, le niveau sonore et l’affichage sur le bon format. Une prévisualisation réussie ne dispense pas du contrôle du fichier final : ouvrez également le MP4 exporté sur les supports où il sera publié.</span></p><p style="margin:0;color:rgba(26,22,18,0.76);font-size:17px;line-height:1.85"><span>Pour un flux récurrent, séparez clairement le template vidéo, les données et les médias. Gardez des valeurs par défaut, validez les images et les textes avant le rendu, et testez un petit lot avant de passer à une série complète. L’IA accélère l’écriture du composant ; la qualité vient de la précision du brief, des tests visuels et des règles de marque.</span></p><div style="display:flex;flex-wrap:wrap;gap:10px"><a href="https://www.remotion.dev/docs/render" target="_blank" rel="noreferrer" style="display:inline-flex;align-items:center;width:fit-content;border-radius:999px;padding:10px 14px;background:#101820;color:#ffffff;text-decoration:none;font-size:14px;font-weight:800">Guide officiel de rendu Remotion</a><a href="https://www.remotion.dev/docs/studio" target="_blank" rel="noreferrer" style="display:inline-flex;align-items:center;width:fit-content;border-radius:999px;padding:10px 14px;background:#101820;color:#ffffff;text-decoration:none;font-size:14px;font-weight:800">Remotion Studio</a></div><pre style="margin:4px 0 0;padding:18px;border-radius:8px;overflow-x:auto;background:#1a1612;color:#f5f0e8;font-size:14px;line-height:1.65"><code># Rendre une composition locale vers un fichier MP4
npx remotion render HelloWorld out/video.mp4
# Avant une production en série, vérifiez :
# - les données injectées dans chaque vidéo
# - les droits d’utilisation des médias
# - la lecture du MP4 final sur mobile et desktop</code></pre></div></section><nav class="blog-single-nav" aria-label="Navigation entre les articles" style="border-top:1px solid rgba(26,22,18,0.12);padding-top:28px;margin-top:36px;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:14px"><a style="color:#1a1612;text-decoration:none;border:1px solid rgba(26,22,18,0.14);border-radius:8px;padding:18px;text-align:left;background:#fbf7ef" href="/blog/openclaude-mimo-v25-pro-gratuit"><div style="color:rgba(26,22,18,0.52);font-size:12px;text-transform:uppercase;letter-spacing:0.12em;font-weight:800">← Article precedent</div><div style="font-family:'Space Grotesk', sans-serif;font-size:18px;line-height:1.2;margin-top:8px;font-weight:800">OpenClaude + MiMo V2.5 Pro : c’est quoi, et est-ce vraiment gratuit ?</div></a><div></div></nav></div><aside class="blog-single-sidebar" style="position:sticky;top:104px;display:grid;gap:16px"><div style="background:#1a1612;color:#f5f0e8;border-radius:8px;padding:24px"><h2 style="font-family:'Space Grotesk', sans-serif;font-size:26px;line-height:1.1;margin:0 0 12px">Besoin d’appliquer ces idées ?</h2><p style="color:rgba(245,240,232,0.72);font-size:14px;line-height:1.65;margin:0">On peut vous aider à transformer votre communication ou votre site en outil plus clair, plus rapide et plus utile.</p><a style="display:inline-flex;margin-top:20px;background:#C8A45C;color:#111111;text-decoration:none;border-radius:999px;padding:11px 16px;font-size:13px;font-weight:900" href="/#contact">Demander un devis</a></div><div style="background:#ffffff;border:1px solid rgba(26,22,18,0.12);border-radius:8px;padding:22px"><h2 style="font-family:'Space Grotesk', sans-serif;font-size:20px;margin:0 0 16px">Autres articles</h2><div style="display:grid;gap:14px"><a style="color:#1a1612;text-decoration:none;border-top:1px solid rgba(26,22,18,0.1);padding-top:14px" href="/blog/openclaude-mimo-v25-pro-gratuit"><div style="color:#67d4ff;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;font-weight:800">IA & Open Source</div><div style="font-weight:800;line-height:1.35;margin-top:6px">OpenClaude + MiMo V2.5 Pro : c’est quoi, et est-ce vraiment gratuit ?</div></a><a style="color:#1a1612;text-decoration:none;border-top:1px solid rgba(26,22,18,0.1);padding-top:14px" href="/blog/claude-seo-audit-referencement-ia"><div style="color:#a99bff;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;font-weight:800">SEO</div><div style="font-weight:800;line-height:1.35;margin-top:6px">Claude SEO : comment utiliser l’IA pour auditer son référencement</div></a><a style="color:#1a1612;text-decoration:none;border-top:1px solid rgba(26,22,18,0.1);padding-top:14px" href="/blog/opencode-qwen-36-plus-gratuit"><div style="color:#6fb8ff;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;font-weight:800">IA & Open Source</div><div style="font-weight:800;line-height:1.35;margin-top:6px">OpenCode + Qwen 3.6 Plus : pourquoi ce combo gratuit mérite un test</div></a><a style="color:#1a1612;text-decoration:none;border-top:1px solid rgba(26,22,18,0.1);padding-top:14px" href="/blog/strategie-contenu-marque-locale"><div style="color:#C8A45C;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;font-weight:800">Communication</div><div style="font-weight:800;line-height:1.35;margin-top:6px">Structurer une stratégie de contenu pour une marque locale</div></a></div></div></aside></div></article></main><!--$--><!--/$--><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--><script src="/_next/static/chunks/0yb2wil16uz6h.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n9:I[68027,[\"/_next/static/chunks/0oqzprb_vupjm.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/112jvyiagzz-4.css\",\"style\"]\n:HL[\"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700\u0026family=Inter:wght@300;400;500;600;700\u0026display=swap\",\"style\"]\n2:T724,"])</script><script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@type\":[\"Organization\",\"ProfessionalService\"],\"@id\":\"https://cheuk-services.com/#organization\",\"name\":\"CHEUK Services\",\"url\":\"https://cheuk-services.com\",\"logo\":\"https://cheuk-services.com/assets/logo.png\",\"image\":\"https://cheuk-services.com/assets/poster.png\",\"description\":\"Studio créatif et technique à Madagascar. Communication digitale, branding, développement web, mobile et IA.\",\"email\":\"info@cheuk-services.com\",\"telephone\":\"+261349538187\",\"areaServed\":[\"Madagascar\",\"International\"],\"priceRange\":\"$$\",\"foundingDate\":\"2024\",\"knowsLanguage\":[\"fr\",\"en\"],\"sameAs\":[\"https://www.linkedin.com/in/tahina-cheuk-ramahavatrarivo-839398389/\",\"https://www.instagram.com/tahina_cheuk/\",\"https://www.facebook.com/ramahavatrarivo.tahinacheuk\"],\"member\":[{\"@type\":\"Person\",\"name\":\"Tahina CHEUK\",\"jobTitle\":\"CEO \u0026 Community Manager\",\"worksFor\":{\"@id\":\"https://cheuk-services.com/#organization\"}}],\"hasOfferCatalog\":{\"@type\":\"OfferCatalog\",\"name\":\"Services CHEUK Services\",\"itemListElement\":[{\"@type\":\"Offer\",\"position\":1,\"itemOffered\":{\"@type\":\"Service\",\"name\":\"Community Management\"}},{\"@type\":\"Offer\",\"position\":2,\"itemOffered\":{\"@type\":\"Service\",\"name\":\"Création de contenu\"}},{\"@type\":\"Offer\",\"position\":3,\"itemOffered\":{\"@type\":\"Service\",\"name\":\"Branding\"}},{\"@type\":\"Offer\",\"position\":4,\"itemOffered\":{\"@type\":\"Service\",\"name\":\"Web design\"}},{\"@type\":\"Offer\",\"position\":5,\"itemOffered\":{\"@type\":\"Service\",\"name\":\"Motion design\"}},{\"@type\":\"Offer\",\"position\":6,\"itemOffered\":{\"@type\":\"Service\",\"name\":\"Graphisme\"}},{\"@type\":\"Offer\",\"position\":7,\"itemOffered\":{\"@type\":\"Service\",\"name\":\"Calendrier éditorial\"}},{\"@type\":\"Offer\",\"position\":8,\"itemOffered\":{\"@type\":\"Service\",\"name\":\"Rédaction\"}},{\"@type\":\"Offer\",\"position\":9,\"itemOffered\":{\"@type\":\"Service\",\"name\":\"Assistance virtuelle\"}}]}}"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"blog\",\"remotion-agent-skills-creer-video-ia-react\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"blog\",{\"children\":[[\"slug\",\"remotion-agent-skills-creer-video-ia-react\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/112jvyiagzz-4.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0oqzprb_vupjm.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"fr\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.googleapis.com\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.gstatic.com\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"href\":\"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700\u0026family=Inter:wght@300;400;500;600;700\u0026display=swap\",\"rel\":\"stylesheet\"}],[\"$\",\"meta\",null,{\"name\":\"google-site-verification\",\"content\":\"-w3ptWmLLD5C8_WwI2_IY0elORDJutcmCk_uk3njfYg\"}],[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$2\"}}],[\"$\",\"script\",\"1\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebSite\\\",\\\"@id\\\":\\\"https://cheuk-services.com/#website\\\",\\\"url\\\":\\\"https://cheuk-services.com\\\",\\\"name\\\":\\\"CHEUK Services\\\",\\\"description\\\":\\\"Studio créatif à Madagascar.\\\",\\\"publisher\\\":{\\\"@id\\\":\\\"https://cheuk-services.com/#organization\\\"},\\\"inLanguage\\\":\\\"fr-FR\\\"}\"}}],[\"$\",\"script\",\"2\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebPage\\\",\\\"@id\\\":\\\"https://cheuk-services.com/#webpage\\\",\\\"url\\\":\\\"https://cheuk-services.com\\\",\\\"name\\\":\\\"CHEUK Services — Studio Créa | Madagascar\\\",\\\"isPartOf\\\":{\\\"@id\\\":\\\"https://cheuk-services.com/#website\\\"},\\\"about\\\":{\\\"@id\\\":\\\"https://cheuk-services.com/#organization\\\"},\\\"description\\\":\\\"Studio de communication digitale à Madagascar.\\\",\\\"inLanguage\\\":\\\"fr-FR\\\",\\\"breadcrumb\\\":{\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"Accueil\\\",\\\"item\\\":\\\"https://cheuk-services.com\\\"}]}}\"}}]]]}],\"$L3\"]}]]}],{\"children\":[\"$L4\",{\"children\":[\"$L5\",{\"children\":[\"$L6\",{},null,false,null]},null,false,\"$@7\"]},null,false,\"$@7\"]},null,false,null],\"$L8\",false]],\"m\":\"$undefined\",\"G\":[\"$9\",[\"$La\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"6QbqSDCjDbVx08sZnltrw\"}\n"])</script><script>self.__next_f.push([1,"b:I[39756,[\"/_next/static/chunks/0oqzprb_vupjm.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"default\"]\nc:I[37457,[\"/_next/static/chunks/0oqzprb_vupjm.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"default\"]\nd:I[575,[\"/_next/static/chunks/0oqzprb_vupjm.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"default\"]\ne:I[2355,[\"/_next/static/chunks/0oqzprb_vupjm.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"Analytics\"]\nf:I[57215,[\"/_next/static/chunks/0oqzprb_vupjm.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"SpeedInsights\"]\n11:I[97367,[\"/_next/static/chunks/0oqzprb_vupjm.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"OutletBoundary\"]\n12:\"$Sreact.suspense\"\n15:I[97367,[\"/_next/static/chunks/0oqzprb_vupjm.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"ViewportBoundary\"]\n17:I[97367,[\"/_next/static/chunks/0oqzprb_vupjm.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"MetadataBoundary\"]\n"])</script><script>self.__next_f.push([1,"3:[\"$\",\"body\",null,{\"children\":[[\"$\",\"$Lb\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$Ld\",null,{}],[\"$\",\"$Le\",null,{}],[\"$\",\"$Lf\",null,{}]]}]\n"])</script><script>self.__next_f.push([1,"4:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$Lb\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n5:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$Lb\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n6:[\"$\",\"$1\",\"c\",{\"children\":[\"$L10\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0050ce7449ukx.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L11\",null,{\"children\":[\"$\",\"$12\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@13\"}]}]]}]\n14:[]\n7:\"$W14\"\n8:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L15\",null,{\"children\":\"$L16\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L17\",null,{\"children\":[\"$\",\"$12\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L18\"}]}]}],null]}]\na:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/112jvyiagzz-4.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n"])</script><script>self.__next_f.push([1,"1a:I[3470,[\"/_next/static/chunks/0oqzprb_vupjm.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"/_next/static/chunks/0050ce7449ukx.js\"],\"default\"]\n1b:I[22016,[\"/_next/static/chunks/0oqzprb_vupjm.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"/_next/static/chunks/0050ce7449ukx.js\"],\"\"]\n1c:I[85437,[\"/_next/static/chunks/0oqzprb_vupjm.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"/_next/static/chunks/0050ce7449ukx.js\"],\"Image\"]\n19:T453,{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"@id\":\"https://cheuk-services.com/blog/remotion-agent-skills-creer-video-ia-react#blogposting\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://cheuk-services.com/blog/remotion-agent-skills-creer-video-ia-react\"},\"headline\":\"Remotion + Agent Skills : créer des vidéos avec l’IA en React\",\"description\":\"Remotion permet de produire des vidéos avec React. Voici comment installer un projet, utiliser les Agent Skills et passer d’une idée à un rendu MP4 maîtrisé.\",\"image\":[\"https://cheuk-services.com/blog/remotion-agent-skills-creer-video-ia-react-cover-ai.webp\"],\"datePublished\":\"2026-08-07\",\"dateModified\":\"2026-08-07\",\"author\":{\"@type\":\"Organization\",\"name\":\"CHEUK Services\",\"url\":\"https://cheuk-services.com\"},\"publisher\":{\"@type\":\"Organization\",\"name\":\"CHEUK Services\",\"url\":\"https://cheuk-services.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://cheuk-services.com/assets/logo.png\"}},\"articleSection\":\"Vidéo\",\"wordCount\":668,\"inLanguage\":\"fr-FR\",\"url\":\"https://cheuk-services.com/blog/remotion-agent-skills-creer-video-ia-react\"}"])</script><script>self.__next_f.push([1,"10:[\"$\",\"main\",null,{\"style\":{\"background\":\"#fbf7ef\",\"color\":\"#1a1612\",\"minHeight\":\"100vh\",\"fontFamily\":\"'Inter', sans-serif\"},\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$19\"}}],[\"$\",\"style\",null,{\"children\":\"\\n @media (max-width: 960px) {\\n .blog-single-layout {\\n grid-template-columns: 1fr !important;\\n }\\n\\n .blog-single-sidebar {\\n position: static !important;\\n }\\n }\\n\\n @media (max-width: 680px) {\\n .blog-single-nav {\\n grid-template-columns: 1fr !important;\\n }\\n }\\n \"}],[\"$\",\"$L1a\",null,{\"links\":[{\"label\":\"Accueil\",\"href\":\"/\"},{\"label\":\"Services\",\"href\":\"/#services\"},{\"label\":\"Portfolio\",\"href\":\"/#portfolio\"},{\"label\":\"Blog\",\"href\":\"/blog\"},{\"label\":\"À propos\",\"href\":\"/#propos\"}],\"ctaLabel\":\"Demande de devis\",\"ctaHref\":\"/#contact\"}],[\"$\",\"article\",null,{\"children\":[[\"$\",\"header\",null,{\"style\":{\"padding\":\"112px 0 70px\"},\"children\":[[\"$\",\"div\",null,{\"style\":{\"maxWidth\":1180,\"margin\":\"0 auto\",\"padding\":\"0 24px 26px\"},\"children\":[\"$\",\"nav\",null,{\"aria-label\":\"Fil d'Ariane\",\"style\":{\"display\":\"flex\",\"alignItems\":\"center\",\"gap\":10,\"flexWrap\":\"wrap\",\"color\":\"rgba(26,22,18,0.52)\",\"fontSize\":12,\"fontWeight\":800,\"letterSpacing\":\"0.12em\",\"textTransform\":\"uppercase\"},\"children\":[[\"$\",\"$L1b\",null,{\"href\":\"/\",\"style\":{\"color\":\"#8a6a2b\",\"textDecoration\":\"none\"},\"children\":\"Accueil\"}],[\"$\",\"span\",null,{\"children\":\"/\"}],[\"$\",\"$L1b\",null,{\"href\":\"/blog\",\"style\":{\"color\":\"#8a6a2b\",\"textDecoration\":\"none\"},\"children\":\"Blog\"}],[\"$\",\"span\",null,{\"children\":\"/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#1a1612\",\"maxWidth\":520,\"overflow\":\"hidden\",\"textOverflow\":\"ellipsis\",\"whiteSpace\":\"nowrap\"},\"children\":\"Remotion + Agent Skills : créer des vidéos avec l’IA en React\"}]]}]}],[\"$\",\"div\",null,{\"style\":{\"width\":\"100%\",\"position\":\"relative\",\"minHeight\":\"clamp(520px, 72vh, 760px)\",\"overflow\":\"hidden\",\"background\":\"#101820\"},\"children\":[[\"$\",\"$L1c\",null,{\"src\":\"/blog/remotion-agent-skills-creer-video-ia-react-cover-ai.webp\",\"alt\":\"Du brief à la vidéo : un workflow programmatique avec Remotion\",\"fill\":true,\"priority\":true,\"fetchPriority\":\"high\",\"quality\":64,\"sizes\":\"100vw\",\"style\":{\"objectFit\":\"cover\"}}],[\"$\",\"div\",null,{\"style\":{\"position\":\"absolute\",\"inset\":0,\"background\":\"linear-gradient(90deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.52) 42%, rgba(10,10,10,0.16) 100%)\"}}],[\"$\",\"div\",null,{\"style\":{\"position\":\"absolute\",\"inset\":0,\"background\":\"linear-gradient(180deg, rgba(10,10,10,0.12) 0%, rgba(10,10,10,0.72) 100%)\"}}],[\"$\",\"div\",null,{\"style\":{\"position\":\"relative\",\"zIndex\":1,\"maxWidth\":1180,\"margin\":\"0 auto\",\"minHeight\":\"clamp(460px, 62vh, 640px)\",\"padding\":\"clamp(34px, 6vw, 70px) 24px\",\"display\":\"flex\",\"alignItems\":\"flex-end\"},\"children\":[\"$\",\"div\",null,{\"style\":{\"maxWidth\":760,\"color\":\"#ffffff\"},\"children\":[[\"$\",\"div\",null,{\"style\":{\"display\":\"flex\",\"alignItems\":\"center\",\"gap\":12,\"flexWrap\":\"wrap\",\"color\":\"rgba(255,255,255,0.76)\",\"fontSize\":12,\"letterSpacing\":\"0.1em\",\"textTransform\":\"uppercase\",\"fontWeight\":800},\"children\":[\"$L1d\",\"$L1e\",\"$L1f\",\"$L20\",\"$L21\"]}],\"$L22\",\"$L23\",\"$L24\"]}]}]]}]]}],\"$L25\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1d:[\"$\",\"span\",null,{\"style\":{\"color\":\"#C8A45C\"},\"children\":\"Vidéo\"}]\n1e:[\"$\",\"span\",null,{\"children\":\"•\"}]\n1f:[\"$\",\"time\",null,{\"dateTime\":\"2026-08-07\",\"children\":\"07 août 2026\"}]\n20:[\"$\",\"span\",null,{\"children\":\"•\"}]\n21:[\"$\",\"span\",null,{\"children\":\"10 min\"}]\n22:[\"$\",\"h1\",null,{\"style\":{\"fontFamily\":\"'Space Grotesk', sans-serif\",\"fontSize\":\"clamp(32px, 4.6vw, 58px)\",\"lineHeight\":1.06,\"margin\":\"14px 0 16px\",\"letterSpacing\":0,\"fontWeight\":500},\"children\":\"Remotion + Agent Skills : créer des vidéos avec l’IA en React\"}]\n23:[\"$\",\"p\",null,{\"style\":{\"margin\":0,\"maxWidth\":680,\"color\":\"rgba(255,255,255,0.78)\",\"fontSize\":16,\"lineHeight\":1.65},\"children\":\"Remotion permet de produire des vidéos avec React. Voici comment installer un projet, utiliser les Agent Skills et passer d’une idée à un rendu MP4 maîtrisé.\"}]\n24:[\"$\",\"div\",null,{\"style\":{\"marginTop\":22,\"color\":\"rgba(255,255,255,0.68)\",\"fontSize\":13},\"children\":[\"Par \",\"CHEUK Services\"]}]\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"div\",null,{\"className\":\"blog-single-layout\",\"style\":{\"maxWidth\":1180,\"margin\":\"0 auto\",\"padding\":\"0 24px 110px\",\"display\":\"grid\",\"gridTemplateColumns\":\"minmax(0, 1fr) 300px\",\"gap\":54,\"alignItems\":\"start\"},\"children\":[[\"$\",\"div\",null,{\"style\":{\"background\":\"#ffffff\",\"border\":\"1px solid rgba(26,22,18,0.12)\",\"borderRadius\":8,\"padding\":\"clamp(24px, 4vw, 48px)\"},\"children\":[[[\"$\",\"section\",\"Remotion : une vidéo devient un projet React\",{\"style\":{\"marginBottom\":38},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"fontFamily\":\"'Space Grotesk', sans-serif\",\"fontSize\":\"clamp(26px, 3vw, 38px)\",\"lineHeight\":1.08,\"margin\":\"0 0 18px\"},\"children\":\"Remotion : une vidéo devient un projet React\"}],\"$undefined\",[\"$\",\"div\",null,{\"style\":{\"display\":\"grid\",\"gap\":16},\"children\":[[[\"$\",\"p\",\"Remotion est un framework qui transforme des composants React en vidéo. Au lieu d’assembler chaque plan sur une timeline classique, on décrit les scènes, le timing, les médias et les animations dans du code. Le résultat reste visuel, mais il devient aussi versionnable, reproductible et plus simple à décliner.\",{\"style\":{\"margin\":0,\"color\":\"rgba(26,22,18,0.76)\",\"fontSize\":17,\"lineHeight\":1.85},\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"Remotion est un framework qui transforme des composants React en vidéo. Au lieu d’assembler chaque plan sur une timeline classique, on décrit les scènes, le timing, les médias et les animations dans du code. Le résultat reste visuel, mais il devient aussi versionnable, reproductible et plus simple à décliner.\"}]]}],[\"$\",\"p\",\"Cette approche est particulièrement utile lorsqu’un même format doit vivre en plusieurs versions : une série de vidéos produits, des bilans personnalisés, des annonces localisées ou des capsules pour les réseaux sociaux. Les données changent, tandis que la composition, les règles de mise en page et les animations restent cohérentes.\",{\"style\":{\"margin\":0,\"color\":\"rgba(26,22,18,0.76)\",\"fontSize\":17,\"lineHeight\":1.85},\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"Cette approche est particulièrement utile lorsqu’un même format doit vivre en plusieurs versions : une série de vidéos produits, des bilans personnalisés, des annonces localisées ou des capsules pour les réseaux sociaux. Les données changent, tandis que la composition, les règles de mise en page et les animations restent cohérentes.\"}]]}]],[\"$\",\"ul\",null,{\"style\":{\"margin\":\"4px 0 0\",\"paddingLeft\":22,\"display\":\"grid\",\"gap\":10,\"color\":\"rgba(26,22,18,0.76)\",\"fontSize\":16,\"lineHeight\":1.7},\"children\":[[\"$\",\"li\",\"**React :** les scènes sont des composants et les propriétés pilotent leur contenu.\",{\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"\"}],[\"$\",\"strong\",\"1\",{\"style\":{\"color\":\"#1a1612\",\"fontWeight\":800},\"children\":\"React :\"}],[\"$\",\"span\",\"2\",{\"children\":\" les scènes sont des composants et les propriétés pilotent leur contenu.\"}]]}],[\"$\",\"li\",\"**Frames :** chaque animation est calculée à partir de l’image courante et de la durée.\",{\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"\"}],[\"$\",\"strong\",\"1\",{\"style\":{\"color\":\"#1a1612\",\"fontWeight\":800},\"children\":\"Frames :\"}],[\"$\",\"span\",\"2\",{\"children\":\" chaque animation est calculée à partir de l’image courante et de la durée.\"}]]}],[\"$\",\"li\",\"**Rendu :** Remotion produit un fichier vidéo à partir de la composition définie dans le projet.\",{\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"\"}],[\"$\",\"strong\",\"1\",{\"style\":{\"color\":\"#1a1612\",\"fontWeight\":800},\"children\":\"Rendu :\"}],[\"$\",\"span\",\"2\",{\"children\":\" Remotion produit un fichier vidéo à partir de la composition définie dans le projet.\"}]]}]]}],[\"$\",\"div\",null,{\"style\":{\"display\":\"flex\",\"flexWrap\":\"wrap\",\"gap\":10},\"children\":[[\"$\",\"a\",\"https://www.remotion.dev/docs\",{\"href\":\"https://www.remotion.dev/docs\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"style\":{\"display\":\"inline-flex\",\"alignItems\":\"center\",\"width\":\"fit-content\",\"borderRadius\":999,\"padding\":\"10px 14px\",\"background\":\"#101820\",\"color\":\"#ffffff\",\"textDecoration\":\"none\",\"fontSize\":14,\"fontWeight\":800},\"children\":\"Documentation officielle Remotion\"}],\"$L26\"]}],\"$undefined\"]}]]}],\"$L27\",\"$L28\",\"$L29\",\"$L2a\",\"$L2b\"],\"$L2c\"]}],\"$L2d\"]}]\n"])</script><script>self.__next_f.push([1,"26:[\"$\",\"a\",\"https://github.com/remotion-dev/remotion\",{\"href\":\"https://github.com/remotion-dev/remotion\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"style\":{\"display\":\"inline-flex\",\"alignItems\":\"center\",\"width\":\"fit-content\",\"borderRadius\":999,\"padding\":\"10px 14px\",\"background\":\"#101820\",\"color\":\"#ffffff\",\"textDecoration\":\"none\",\"fontSize\":14,\"fontWeight\":800},\"children\":\"Dépôt GitHub officiel Remotion\"}]\n"])</script><script>self.__next_f.push([1,"27:[\"$\",\"section\",\"Installer un premier projet Remotion\",{\"style\":{\"marginBottom\":38},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"fontFamily\":\"'Space Grotesk', sans-serif\",\"fontSize\":\"clamp(26px, 3vw, 38px)\",\"lineHeight\":1.08,\"margin\":\"0 0 18px\"},\"children\":\"Installer un premier projet Remotion\"}],\"$undefined\",[\"$\",\"div\",null,{\"style\":{\"display\":\"grid\",\"gap\":16},\"children\":[[[\"$\",\"p\",\"Le moyen le plus direct de démarrer consiste à créer le squelette proposé par Remotion. La commande prépare un projet JavaScript ou TypeScript avec une composition d’exemple et le Studio : une interface locale pour visualiser chaque frame avant de lancer le rendu final.\",{\"style\":{\"margin\":0,\"color\":\"rgba(26,22,18,0.76)\",\"fontSize\":17,\"lineHeight\":1.85},\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"Le moyen le plus direct de démarrer consiste à créer le squelette proposé par Remotion. La commande prépare un projet JavaScript ou TypeScript avec une composition d’exemple et le Studio : une interface locale pour visualiser chaque frame avant de lancer le rendu final.\"}]]}],[\"$\",\"p\",\"Travaillez dans un dossier isolé et conservez les médias utilisés dans le projet. Une vidéo générée par code n’est pas une boîte noire : les composants, les données d’entrée, les polices et les fichiers audio doivent rester traçables pour pouvoir rejouer le rendu plus tard.\",{\"style\":{\"margin\":0,\"color\":\"rgba(26,22,18,0.76)\",\"fontSize\":17,\"lineHeight\":1.85},\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"Travaillez dans un dossier isolé et conservez les médias utilisés dans le projet. Une vidéo générée par code n’est pas une boîte noire : les composants, les données d’entrée, les polices et les fichiers audio doivent rester traçables pour pouvoir rejouer le rendu plus tard.\"}]]}]],\"$undefined\",\"$undefined\",[[\"$\",\"pre\",\"# Créer un projet Remotion avec le générateur officiel\\nnpx create-video@latest\\n\\n# Entrer dans le dossier créé\\ncd mon-projet-remotion\\n\\n# Ouvrir Remotion Studio pour prévisualiser les compositions\\nnpm run start\",{\"style\":{\"margin\":\"4px 0 0\",\"padding\":18,\"borderRadius\":8,\"overflowX\":\"auto\",\"background\":\"#1a1612\",\"color\":\"#f5f0e8\",\"fontSize\":14,\"lineHeight\":1.65},\"children\":[\"$\",\"code\",null,{\"children\":\"# Créer un projet Remotion avec le générateur officiel\\nnpx create-video@latest\\n\\n# Entrer dans le dossier créé\\ncd mon-projet-remotion\\n\\n# Ouvrir Remotion Studio pour prévisualiser les compositions\\nnpm run start\"}]}]]]}]]}]\n"])</script><script>self.__next_f.push([1,"28:[\"$\",\"section\",\"Créer une composition et animer avec les frames\",{\"style\":{\"marginBottom\":38},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"fontFamily\":\"'Space Grotesk', sans-serif\",\"fontSize\":\"clamp(26px, 3vw, 38px)\",\"lineHeight\":1.08,\"margin\":\"0 0 18px\"},\"children\":\"Créer une composition et animer avec les frames\"}],\"$undefined\",[\"$\",\"div\",null,{\"style\":{\"display\":\"grid\",\"gap\":16},\"children\":[[[\"$\",\"p\",\"Une composition est le point de départ d’une vidéo Remotion. Elle indique notamment sa taille, sa fréquence d’images et sa durée. À l’intérieur, `useCurrentFrame()` donne la frame affichée au moment du rendu ; `interpolate()` permet ensuite de convertir cette valeur en opacité, déplacement, échelle ou toute autre propriété animable.\",{\"style\":{\"margin\":0,\"color\":\"rgba(26,22,18,0.76)\",\"fontSize\":17,\"lineHeight\":1.85},\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"Une composition est le point de départ d’une vidéo Remotion. Elle indique notamment sa taille, sa fréquence d’images et sa durée. À l’intérieur, `useCurrentFrame()` donne la frame affichée au moment du rendu ; `interpolate()` permet ensuite de convertir cette valeur en opacité, déplacement, échelle ou toute autre propriété animable.\"}]]}],[\"$\",\"p\",\"L’exemple ci-dessous crée un carton titre qui apparaît progressivement pendant la première seconde. La logique est volontairement simple : elle sert de base pour comprendre que le temps est une donnée, et non une série de manipulations manuelles sur une timeline.\",{\"style\":{\"margin\":0,\"color\":\"rgba(26,22,18,0.76)\",\"fontSize\":17,\"lineHeight\":1.85},\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"L’exemple ci-dessous crée un carton titre qui apparaît progressivement pendant la première seconde. La logique est volontairement simple : elle sert de base pour comprendre que le temps est une donnée, et non une série de manipulations manuelles sur une timeline.\"}]]}]],\"$undefined\",\"$undefined\",[[\"$\",\"pre\",\"import { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';\\n\\nexport const IntroTitle = () =\u003e {\\n const frame = useCurrentFrame();\\n const opacity = interpolate(frame, [0, 20], [0, 1], {\\n extrapolateRight: 'clamp',\\n });\\n const translateY = interpolate(frame, [0, 20], [24, 0], {\\n extrapolateRight: 'clamp',\\n });\\n\\n return (\\n \u003cAbsoluteFill style={{ alignItems: 'center', justifyContent: 'center', backgroundColor: '#101820', color: '#f7f2e8' }}\u003e\\n \u003ch1 style={{ opacity, transform: `translateY(${translateY}px)` }}\u003eUne vidéo pilotée par React\u003c/h1\u003e\\n \u003c/AbsoluteFill\u003e\\n );\\n};\",{\"style\":{\"margin\":\"4px 0 0\",\"padding\":18,\"borderRadius\":8,\"overflowX\":\"auto\",\"background\":\"#1a1612\",\"color\":\"#f5f0e8\",\"fontSize\":14,\"lineHeight\":1.65},\"children\":[\"$\",\"code\",null,{\"children\":\"import { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';\\n\\nexport const IntroTitle = () =\u003e {\\n const frame = useCurrentFrame();\\n const opacity = interpolate(frame, [0, 20], [0, 1], {\\n extrapolateRight: 'clamp',\\n });\\n const translateY = interpolate(frame, [0, 20], [24, 0], {\\n extrapolateRight: 'clamp',\\n });\\n\\n return (\\n \u003cAbsoluteFill style={{ alignItems: 'center', justifyContent: 'center', backgroundColor: '#101820', color: '#f7f2e8' }}\u003e\\n \u003ch1 style={{ opacity, transform: `translateY(${translateY}px)` }}\u003eUne vidéo pilotée par React\u003c/h1\u003e\\n \u003c/AbsoluteFill\u003e\\n );\\n};\"}]}]]]}]]}]\n"])</script><script>self.__next_f.push([1,"29:[\"$\",\"section\",\"À quoi servent les Agent Skills ?\",{\"style\":{\"marginBottom\":38},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"fontFamily\":\"'Space Grotesk', sans-serif\",\"fontSize\":\"clamp(26px, 3vw, 38px)\",\"lineHeight\":1.08,\"margin\":\"0 0 18px\"},\"children\":\"À quoi servent les Agent Skills ?\"}],[\"$\",\"figure\",null,{\"style\":{\"margin\":\"0 0 24px\",\"borderRadius\":8,\"overflow\":\"hidden\",\"border\":\"1px solid rgba(26,22,18,0.12)\",\"background\":\"#101820\"},\"children\":[\"$\",\"div\",null,{\"style\":{\"position\":\"relative\",\"width\":\"100%\",\"aspectRatio\":\"3/2\"},\"children\":[\"$\",\"$L1c\",null,{\"src\":\"/blog/remotion-agent-skills-creer-video-ia-react-inline-ai.webp\",\"alt\":\"Flux visuel allant d’une idée à du code, un aperçu vidéo puis un fichier média rendu\",\"fill\":true,\"sizes\":\"(max-width: 960px) calc(100vw - 48px), 760px\",\"style\":{\"objectFit\":\"cover\"}}]}]}],[\"$\",\"div\",null,{\"style\":{\"display\":\"grid\",\"gap\":16},\"children\":[[[\"$\",\"p\",\"Les Agent Skills de Remotion donnent à un agent de code un contexte spécialisé : structure d’une composition, animation, médias, sous-titres, aperçu dans Studio et rendu. Ils évitent de traiter une vidéo Remotion comme une simple page React, ce qui est important car le timing, les assets et le rendu image par image ont leurs propres contraintes.\",{\"style\":{\"margin\":0,\"color\":\"rgba(26,22,18,0.76)\",\"fontSize\":17,\"lineHeight\":1.85},\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"Les Agent Skills de Remotion donnent à un agent de code un contexte spécialisé : structure d’une composition, animation, médias, sous-titres, aperçu dans Studio et rendu. Ils évitent de traiter une vidéo Remotion comme une simple page React, ce qui est important car le timing, les assets et le rendu image par image ont leurs propres contraintes.\"}]]}],[\"$\",\"p\",\"Ils ne remplacent pas la direction créative ni la validation du résultat. En revanche, ils aident à formuler une demande précise, à générer un premier composant propre et à itérer plus vite. Un bon brief indique toujours le format, la durée, le rythme, les éléments à afficher et les contraintes de marque.\",{\"style\":{\"margin\":0,\"color\":\"rgba(26,22,18,0.76)\",\"fontSize\":17,\"lineHeight\":1.85},\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"Ils ne remplacent pas la direction créative ni la validation du résultat. En revanche, ils aident à formuler une demande précise, à générer un premier composant propre et à itérer plus vite. Un bon brief indique toujours le format, la durée, le rythme, les éléments à afficher et les contraintes de marque.\"}]]}]],[\"$\",\"ul\",null,{\"style\":{\"margin\":\"4px 0 0\",\"paddingLeft\":22,\"display\":\"grid\",\"gap\":10,\"color\":\"rgba(26,22,18,0.76)\",\"fontSize\":16,\"lineHeight\":1.7},\"children\":[[\"$\",\"li\",\"**Créer :** démarrer une composition ou un projet adapté au besoin.\",{\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"\"}],[\"$\",\"strong\",\"1\",{\"style\":{\"color\":\"#1a1612\",\"fontWeight\":800},\"children\":\"Créer :\"}],[\"$\",\"span\",\"2\",{\"children\":\" démarrer une composition ou un projet adapté au besoin.\"}]]}],[\"$\",\"li\",\"**Mettre en forme :** appliquer les bonnes pratiques pour le timing, les médias et la typographie.\",{\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"\"}],[\"$\",\"strong\",\"1\",{\"style\":{\"color\":\"#1a1612\",\"fontWeight\":800},\"children\":\"Mettre en forme :\"}],[\"$\",\"span\",\"2\",{\"children\":\" appliquer les bonnes pratiques pour le timing, les médias et la typographie.\"}]]}],[\"$\",\"li\",\"**Prévisualiser et exporter :** contrôler le résultat dans Studio, puis lancer le rendu.\",{\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"\"}],[\"$\",\"strong\",\"1\",{\"style\":{\"color\":\"#1a1612\",\"fontWeight\":800},\"children\":\"Prévisualiser et exporter :\"}],[\"$\",\"span\",\"2\",{\"children\":\" contrôler le résultat dans Studio, puis lancer le rendu.\"}]]}]]}],[\"$\",\"div\",null,{\"style\":{\"display\":\"flex\",\"flexWrap\":\"wrap\",\"gap\":10},\"children\":[[\"$\",\"a\",\"https://www.remotion.dev/docs/ai/skills\",{\"href\":\"https://www.remotion.dev/docs/ai/skills\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"style\":{\"display\":\"inline-flex\",\"alignItems\":\"center\",\"width\":\"fit-content\",\"borderRadius\":999,\"padding\":\"10px 14px\",\"background\":\"#101820\",\"color\":\"#ffffff\",\"textDecoration\":\"none\",\"fontSize\":14,\"fontWeight\":800},\"children\":\"Documentation officielle des Agent Skills Remotion\"}]]}],\"$undefined\"]}]]}]\n"])</script><script>self.__next_f.push([1,"2a:[\"$\",\"section\",\"Installer les skills et travailler avec un agent de code\",{\"style\":{\"marginBottom\":38},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"fontFamily\":\"'Space Grotesk', sans-serif\",\"fontSize\":\"clamp(26px, 3vw, 38px)\",\"lineHeight\":1.08,\"margin\":\"0 0 18px\"},\"children\":\"Installer les skills et travailler avec un agent de code\"}],\"$undefined\",[\"$\",\"div\",null,{\"style\":{\"display\":\"grid\",\"gap\":16},\"children\":[[[\"$\",\"p\",\"Remotion documente une installation des skills depuis le terminal. Une fois ajoutés à votre environnement, ils peuvent être utilisés par un agent compatible pour guider la création, le Studio ou le rendu. Commencez par une scène courte : un titre, deux plans et une transition. Vous pourrez ensuite enrichir le projet avec des données, une voix-off ou des sous-titres.\",{\"style\":{\"margin\":0,\"color\":\"rgba(26,22,18,0.76)\",\"fontSize\":17,\"lineHeight\":1.85},\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"Remotion documente une installation des skills depuis le terminal. Une fois ajoutés à votre environnement, ils peuvent être utilisés par un agent compatible pour guider la création, le Studio ou le rendu. Commencez par une scène courte : un titre, deux plans et une transition. Vous pourrez ensuite enrichir le projet avec des données, une voix-off ou des sous-titres.\"}]]}],[\"$\",\"p\",\"Le bon échange avec un agent n’est pas « fais une belle vidéo ». Décrivez le livrable : « crée une vidéo verticale de 15 secondes, fond sombre, titre qui arrive en fondu, trois données à afficher, sortie 1080 × 1920 ». Demandez ensuite un aperçu, relisez le code et validez le rendu avant toute diffusion.\",{\"style\":{\"margin\":0,\"color\":\"rgba(26,22,18,0.76)\",\"fontSize\":17,\"lineHeight\":1.85},\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"Le bon échange avec un agent n’est pas « fais une belle vidéo ». Décrivez le livrable : « crée une vidéo verticale de 15 secondes, fond sombre, titre qui arrive en fondu, trois données à afficher, sortie 1080 × 1920 ». Demandez ensuite un aperçu, relisez le code et validez le rendu avant toute diffusion.\"}]]}]],\"$undefined\",\"$undefined\",[[\"$\",\"pre\",\"# Ajouter les Agent Skills officiels de Remotion\\nnpx skills add remotion-dev/skills\\n\\n# Exemple de demande à un agent de code\\n# Crée une composition verticale 1080x1920 de 15 secondes.\\n# Anime un titre, puis trois chiffres, avec un rythme régulier.\\n# Utilise des composants Remotion et prépare un rendu local.\",{\"style\":{\"margin\":\"4px 0 0\",\"padding\":18,\"borderRadius\":8,\"overflowX\":\"auto\",\"background\":\"#1a1612\",\"color\":\"#f5f0e8\",\"fontSize\":14,\"lineHeight\":1.65},\"children\":[\"$\",\"code\",null,{\"children\":\"# Ajouter les Agent Skills officiels de Remotion\\nnpx skills add remotion-dev/skills\\n\\n# Exemple de demande à un agent de code\\n# Crée une composition verticale 1080x1920 de 15 secondes.\\n# Anime un titre, puis trois chiffres, avec un rythme régulier.\\n# Utilise des composants Remotion et prépare un rendu local.\"}]}]]]}]]}]\n"])</script><script>self.__next_f.push([1,"2b:[\"$\",\"section\",\"Prévisualiser, rendre et fiabiliser la production\",{\"style\":{\"marginBottom\":38},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"fontFamily\":\"'Space Grotesk', sans-serif\",\"fontSize\":\"clamp(26px, 3vw, 38px)\",\"lineHeight\":1.08,\"margin\":\"0 0 18px\"},\"children\":\"Prévisualiser, rendre et fiabiliser la production\"}],\"$undefined\",[\"$\",\"div\",null,{\"style\":{\"display\":\"grid\",\"gap\":16},\"children\":[[[\"$\",\"p\",\"Le Studio sert à vérifier le timing image par image avant l’export. C’est le moment de contrôler les débordements de texte, les polices, les changements de plan, le niveau sonore et l’affichage sur le bon format. Une prévisualisation réussie ne dispense pas du contrôle du fichier final : ouvrez également le MP4 exporté sur les supports où il sera publié.\",{\"style\":{\"margin\":0,\"color\":\"rgba(26,22,18,0.76)\",\"fontSize\":17,\"lineHeight\":1.85},\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"Le Studio sert à vérifier le timing image par image avant l’export. C’est le moment de contrôler les débordements de texte, les polices, les changements de plan, le niveau sonore et l’affichage sur le bon format. Une prévisualisation réussie ne dispense pas du contrôle du fichier final : ouvrez également le MP4 exporté sur les supports où il sera publié.\"}]]}],[\"$\",\"p\",\"Pour un flux récurrent, séparez clairement le template vidéo, les données et les médias. Gardez des valeurs par défaut, validez les images et les textes avant le rendu, et testez un petit lot avant de passer à une série complète. L’IA accélère l’écriture du composant ; la qualité vient de la précision du brief, des tests visuels et des règles de marque.\",{\"style\":{\"margin\":0,\"color\":\"rgba(26,22,18,0.76)\",\"fontSize\":17,\"lineHeight\":1.85},\"children\":[[\"$\",\"span\",\"0\",{\"children\":\"Pour un flux récurrent, séparez clairement le template vidéo, les données et les médias. Gardez des valeurs par défaut, validez les images et les textes avant le rendu, et testez un petit lot avant de passer à une série complète. L’IA accélère l’écriture du composant ; la qualité vient de la précision du brief, des tests visuels et des règles de marque.\"}]]}]],\"$undefined\",[\"$\",\"div\",null,{\"style\":{\"display\":\"flex\",\"flexWrap\":\"wrap\",\"gap\":10},\"children\":[[\"$\",\"a\",\"https://www.remotion.dev/docs/render\",{\"href\":\"https://www.remotion.dev/docs/render\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"style\":{\"display\":\"inline-flex\",\"alignItems\":\"center\",\"width\":\"fit-content\",\"borderRadius\":999,\"padding\":\"10px 14px\",\"background\":\"#101820\",\"color\":\"#ffffff\",\"textDecoration\":\"none\",\"fontSize\":14,\"fontWeight\":800},\"children\":\"Guide officiel de rendu Remotion\"}],[\"$\",\"a\",\"https://www.remotion.dev/docs/studio\",{\"href\":\"https://www.remotion.dev/docs/studio\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"style\":{\"display\":\"inline-flex\",\"alignItems\":\"center\",\"width\":\"fit-content\",\"borderRadius\":999,\"padding\":\"10px 14px\",\"background\":\"#101820\",\"color\":\"#ffffff\",\"textDecoration\":\"none\",\"fontSize\":14,\"fontWeight\":800},\"children\":\"Remotion Studio\"}]]}],[[\"$\",\"pre\",\"# Rendre une composition locale vers un fichier MP4\\nnpx remotion render HelloWorld out/video.mp4\\n\\n# Avant une production en série, vérifiez :\\n# - les données injectées dans chaque vidéo\\n# - les droits d’utilisation des médias\\n# - la lecture du MP4 final sur mobile et desktop\",{\"style\":{\"margin\":\"4px 0 0\",\"padding\":18,\"borderRadius\":8,\"overflowX\":\"auto\",\"background\":\"#1a1612\",\"color\":\"#f5f0e8\",\"fontSize\":14,\"lineHeight\":1.65},\"children\":[\"$\",\"code\",null,{\"children\":\"# Rendre une composition locale vers un fichier MP4\\nnpx remotion render HelloWorld out/video.mp4\\n\\n# Avant une production en série, vérifiez :\\n# - les données injectées dans chaque vidéo\\n# - les droits d’utilisation des médias\\n# - la lecture du MP4 final sur mobile et desktop\"}]}]]]}]]}]\n"])</script><script>self.__next_f.push([1,"2c:[\"$\",\"nav\",null,{\"className\":\"blog-single-nav\",\"aria-label\":\"Navigation entre les articles\",\"style\":{\"borderTop\":\"1px solid rgba(26,22,18,0.12)\",\"paddingTop\":28,\"marginTop\":36,\"display\":\"grid\",\"gridTemplateColumns\":\"repeat(2, minmax(0, 1fr))\",\"gap\":14},\"children\":[[\"$\",\"$L1b\",null,{\"href\":\"/blog/openclaude-mimo-v25-pro-gratuit\",\"style\":{\"color\":\"#1a1612\",\"textDecoration\":\"none\",\"border\":\"1px solid rgba(26,22,18,0.14)\",\"borderRadius\":8,\"padding\":18,\"textAlign\":\"left\",\"background\":\"#fbf7ef\"},\"children\":[[\"$\",\"div\",null,{\"style\":{\"color\":\"rgba(26,22,18,0.52)\",\"fontSize\":12,\"textTransform\":\"uppercase\",\"letterSpacing\":\"0.12em\",\"fontWeight\":800},\"children\":\"← Article precedent\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"'Space Grotesk', sans-serif\",\"fontSize\":18,\"lineHeight\":1.2,\"marginTop\":8,\"fontWeight\":800},\"children\":\"OpenClaude + MiMo V2.5 Pro : c’est quoi, et est-ce vraiment gratuit ?\"}]]}],[\"$\",\"div\",null,{}]]}]\n"])</script><script>self.__next_f.push([1,"2d:[\"$\",\"aside\",null,{\"className\":\"blog-single-sidebar\",\"style\":{\"position\":\"sticky\",\"top\":104,\"display\":\"grid\",\"gap\":16},\"children\":[[\"$\",\"div\",null,{\"style\":{\"background\":\"#1a1612\",\"color\":\"#f5f0e8\",\"borderRadius\":8,\"padding\":24},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"fontFamily\":\"'Space Grotesk', sans-serif\",\"fontSize\":26,\"lineHeight\":1.1,\"margin\":\"0 0 12px\"},\"children\":\"Besoin d’appliquer ces idées ?\"}],[\"$\",\"p\",null,{\"style\":{\"color\":\"rgba(245,240,232,0.72)\",\"fontSize\":14,\"lineHeight\":1.65,\"margin\":0},\"children\":\"On peut vous aider à transformer votre communication ou votre site en outil plus clair, plus rapide et plus utile.\"}],[\"$\",\"$L1b\",null,{\"href\":\"/#contact\",\"style\":{\"display\":\"inline-flex\",\"marginTop\":20,\"background\":\"#C8A45C\",\"color\":\"#111111\",\"textDecoration\":\"none\",\"borderRadius\":999,\"padding\":\"11px 16px\",\"fontSize\":13,\"fontWeight\":900},\"children\":\"Demander un devis\"}]]}],[\"$\",\"div\",null,{\"style\":{\"background\":\"#ffffff\",\"border\":\"1px solid rgba(26,22,18,0.12)\",\"borderRadius\":8,\"padding\":22},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"fontFamily\":\"'Space Grotesk', sans-serif\",\"fontSize\":20,\"margin\":\"0 0 16px\"},\"children\":\"Autres articles\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"grid\",\"gap\":14},\"children\":[[\"$\",\"$L1b\",\"openclaude-mimo-v25-pro-gratuit\",{\"href\":\"/blog/openclaude-mimo-v25-pro-gratuit\",\"style\":{\"color\":\"#1a1612\",\"textDecoration\":\"none\",\"borderTop\":\"1px solid rgba(26,22,18,0.1)\",\"paddingTop\":14},\"children\":[[\"$\",\"div\",null,{\"style\":{\"color\":\"#67d4ff\",\"fontSize\":11,\"textTransform\":\"uppercase\",\"letterSpacing\":\"0.14em\",\"fontWeight\":800},\"children\":\"IA \u0026 Open Source\"}],[\"$\",\"div\",null,{\"style\":{\"fontWeight\":800,\"lineHeight\":1.35,\"marginTop\":6},\"children\":\"OpenClaude + MiMo V2.5 Pro : c’est quoi, et est-ce vraiment gratuit ?\"}]]}],[\"$\",\"$L1b\",\"claude-seo-audit-referencement-ia\",{\"href\":\"/blog/claude-seo-audit-referencement-ia\",\"style\":{\"color\":\"#1a1612\",\"textDecoration\":\"none\",\"borderTop\":\"1px solid rgba(26,22,18,0.1)\",\"paddingTop\":14},\"children\":[[\"$\",\"div\",null,{\"style\":{\"color\":\"#a99bff\",\"fontSize\":11,\"textTransform\":\"uppercase\",\"letterSpacing\":\"0.14em\",\"fontWeight\":800},\"children\":\"SEO\"}],[\"$\",\"div\",null,{\"style\":{\"fontWeight\":800,\"lineHeight\":1.35,\"marginTop\":6},\"children\":\"Claude SEO : comment utiliser l’IA pour auditer son référencement\"}]]}],[\"$\",\"$L1b\",\"opencode-qwen-36-plus-gratuit\",{\"href\":\"/blog/opencode-qwen-36-plus-gratuit\",\"style\":{\"color\":\"#1a1612\",\"textDecoration\":\"none\",\"borderTop\":\"1px solid rgba(26,22,18,0.1)\",\"paddingTop\":14},\"children\":[[\"$\",\"div\",null,{\"style\":{\"color\":\"#6fb8ff\",\"fontSize\":11,\"textTransform\":\"uppercase\",\"letterSpacing\":\"0.14em\",\"fontWeight\":800},\"children\":\"IA \u0026 Open Source\"}],[\"$\",\"div\",null,{\"style\":{\"fontWeight\":800,\"lineHeight\":1.35,\"marginTop\":6},\"children\":\"OpenCode + Qwen 3.6 Plus : pourquoi ce combo gratuit mérite un test\"}]]}],[\"$\",\"$L1b\",\"strategie-contenu-marque-locale\",{\"href\":\"/blog/strategie-contenu-marque-locale\",\"style\":{\"color\":\"#1a1612\",\"textDecoration\":\"none\",\"borderTop\":\"1px solid rgba(26,22,18,0.1)\",\"paddingTop\":14},\"children\":[[\"$\",\"div\",null,{\"style\":{\"color\":\"#C8A45C\",\"fontSize\":11,\"textTransform\":\"uppercase\",\"letterSpacing\":\"0.14em\",\"fontWeight\":800},\"children\":\"Communication\"}],[\"$\",\"div\",null,{\"style\":{\"fontWeight\":800,\"lineHeight\":1.35,\"marginTop\":6},\"children\":\"Structurer une stratégie de contenu pour une marque locale\"}]]}]]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"16:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"2e:I[27201,[\"/_next/static/chunks/0oqzprb_vupjm.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"IconMark\"]\n13:null\n"])</script><script>self.__next_f.push([1,"18:[[\"$\",\"title\",\"0\",{\"children\":\"Remotion + Agent Skills : créer des vidéos avec l’IA en React | CHEUK Services\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Remotion permet de produire des vidéos avec React. Voici comment installer un projet, utiliser les Agent Skills et passer d’une idée à un rendu MP4 maîtrisé.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"Tahina CHEUK\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"agence web madagascar,community management madagascar,développement web madagascar,branding madagascar,studio créatif madagascar,agence digitale madagascar,community manager madagascar,CHEUK Services\"}],[\"$\",\"meta\",\"4\",{\"name\":\"creator\",\"content\":\"CHEUK Services\"}],[\"$\",\"meta\",\"5\",{\"name\":\"publisher\",\"content\":\"CHEUK Services\"}],[\"$\",\"meta\",\"6\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"7\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"8\",{\"rel\":\"canonical\",\"href\":\"https://cheuk-services.com/blog/remotion-agent-skills-creer-video-ia-react\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:title\",\"content\":\"Remotion + Agent Skills : créer des vidéos avec l’IA en React\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:description\",\"content\":\"Remotion permet de produire des vidéos avec React. Voici comment installer un projet, utiliser les Agent Skills et passer d’une idée à un rendu MP4 maîtrisé.\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:url\",\"content\":\"https://cheuk-services.com/blog/remotion-agent-skills-creer-video-ia-react\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image\",\"content\":\"https://cheuk-services.com/blog/remotion-agent-skills-creer-video-ia-react-cover-ai.webp\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:alt\",\"content\":\"Du brief à la vidéo : un workflow programmatique avec Remotion\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"15\",{\"property\":\"article:published_time\",\"content\":\"2026-08-07\"}],[\"$\",\"meta\",\"16\",{\"property\":\"article:author\",\"content\":\"CHEUK Services\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:title\",\"content\":\"CHEUK Services — Studio Créa \u0026 Tech\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:description\",\"content\":\"Studio de communication digitale à Madagascar.\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image\",\"content\":\"https://cheuk-services.com/assets/poster.png\"}],[\"$\",\"link\",\"21\",{\"rel\":\"shortcut icon\",\"href\":\"/assets/favicon.png\"}],[\"$\",\"link\",\"22\",{\"rel\":\"icon\",\"href\":\"/assets/favicon.png\"}],[\"$\",\"link\",\"23\",{\"rel\":\"apple-touch-icon\",\"href\":\"/assets/favicon.png\"}],[\"$\",\"$L2e\",\"24\",{}]]\n"])</script></body></html>
