Remotion és Claude Code: videók programozása React-tel

A közösségi média tartalom készítése időigényes. Egy rövid termékbemutató videó, egy heti összefoglaló animáció, vagy egy ügyfélnek szóló demo elkészítése gyakran órákat vesz igénybe, még ha egyszerű is a tartalom.

Mi lenne, ha a videóidat kóddal írnád meg, és az AI segítene a készítésben? Pontosan erre való a Remotion nevű eszköz, és a Claude Code párosítása.

Mi az a Remotion?#

A Remotion egy nyílt forráskódú könyvtár, amellyel React komponensekből készíthetsz videókat. Ahelyett, hogy videószerkesztő szoftverben dolgoznál, kódban határozod meg, hogy mi jelenjen meg és mikor.

Miért jó ez?

• Adatvezérelt videók: A tartalom JSON-ból, adatbázisból vagy API-ból jön
• Konzisztens branding: Egyszer megírod a stílust, minden videó egységes lesz
• Automatizálható: Ugyanaz a sablon, más adatokkal, más videó
• Verziókezelhető: A videó forráskódja git-ben él

KKV-k számára ez azt jelenti, hogy heti rendszerességgel tudsz tartalmat gyártani anélkül, hogy minden alkalommal nulláról kezdenéd a munkát.

Mire használható a gyakorlatban?#

Néhány példa, ahol a Remotion valódi időmegtakarítást hoz:

• Közösségi média posztok: Animált Instagram/LinkedIn grafikák automatizáltan
• Termékbemutató videók: Képernyőfelvételek helyett programozott demók
• Heti riport videók: Automatikusan generált összefoglalók adatokból
• Ügyfél köszöntők: Személyre szabott videók névvel, cégnévvel
• Oktatóanyagok: Konzisztens stílusú tutorial videók

A fejlesztői környezet felállítása#

Hozz létre egy új Remotion projektet:

npx create-video@latest my-video-project
cd my-video-project
npm start

Ez elindít egy fejlesztői szervert, ahol valós időben látod a videódat:

Claude Code bevonása a munkába#

Itt jön a lényeg. Ahelyett, hogy magad írnád meg a React komponenseket, a Claude Code-dal dolgozol:

claude "hozz létre egy Remotion kompozíciót, ami egy
  termékbemutató videó. A videó 5 másodperces, 1080x1920
  méretű (Instagram Reel formátum). Legyen benne:
  1. Fade-in a cég logójával (1 mp)
  2. A termék neve és ára középen (2 mp)
  3. Három bullet point az előnyökkel (1.5 mp)
  4. CTA szöveg: Részletek a weboldalon (0.5 mp)
  Használj fehér hátteret és fekete szöveget."

A Claude Code létrehozza a szükséges fájlokat. Egy tipikus eredmény:

import { AbsoluteFill, useCurrentFrame, interpolate,
  spring, useVideoConfig, Img } from "remotion";

export const ProductReel: React.FC<{
  productName: string;
  price: string;
  benefits: string[];
  ctaText: string;
}> = ({ productName, price, benefits, ctaText }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Logo fade-in (0-30 frames)
  const logoOpacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });

  // Product info spring animation
  const productScale = spring({
    frame: frame - 30,
    fps,
    config: { damping: 12 },
  });

  // Benefits stagger
  const benefitEntries = benefits.map((_, i) =>
    spring({ frame: frame - 75 - i * 10, fps })
  );

  // CTA fade
  const ctaOpacity = interpolate(frame, [120, 135], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill style={{ backgroundColor: "#fff",
      padding: 60, justifyContent: "center",
      alignItems: "center" }}>

      {/* Logo */}
      <div style={{ opacity: logoOpacity }}>
        <Img src="/logo.png" width={200} />
      </div>

      {/* Product info */}
      <div style={{ transform: `scale(${productScale})`,
        textAlign: "center", marginTop: 40 }}>
        <h1 style={{ fontSize: 64 }}>{productName}</h1>
        <p style={{ fontSize: 48, color: "#666" }}>{price}</p>
      </div>

      {/* Benefits */}
      {benefits.map((benefit, i) => (
        <div key={i} style={{
          transform: `translateX(${
            interpolate(benefitEntries[i], [0, 1],
              [-100, 0])
          }px)`,
          opacity: benefitEntries[i],
        }}>
          {benefit}
        </div>
      ))}

      {/* CTA */}
      <div style={{ opacity: ctaOpacity }}>
        {ctaText}
      </div>
    </AbsoluteFill>
  );
};

Adatvezérelt videók generálása#

A Remotion igazi ereje az adatvezérelt megközelítésben rejlik. Készíts egy JSON fájlt a termékadatokkal, és a Claude Code segítségével automatizáld a teljes folyamatot:

claude "olvasd be a products.json fájlt, és minden
  termékhez hozz létre egy külön Remotion kompozíciót
  a ProductReel sablon alapján. Regisztráld mindegyiket
  a Root.tsx-ben."

Ez azt jelenti, hogy ha 20 terméked van, 20 videót kapsz egyetlen paranccsal. A stílus egységes, a tartalom személyre szabott.

Renderelés és export#

Amikor a videó készen áll, a Remotion CLI-vel renderelheted:

# Egyetlen videó renderelése
npx remotion render src/index.ts ProductReel out/reel.mp4

# Minden kompozíció renderelése
npx remotion render src/index.ts --all

Teljes workflow Claude Code-dal#

Egy tipikus munkafolyamat így néz ki:

Valós megtakarítás#

Egy KKV, amely hetente 3-4 közösségi média videót készít, jellemzően 4-6 órát tölt a tartalomgyártással. A Remotion plusz Claude Code kombináció ezt az időt drasztikusan csökkenti:

Az első sablonba befektetett idő után a további videók szinte teljesen automatizáltak.

Következő lépések#

Ha érdekel a programozott videógyártás, kezdd az alapokkal: telepítsd a Remotion-t, készíts egy egyszerű sablont, és nézd meg, hogyan illeszkedik a munkafolyamatodba.

Ha szeretnéd, hogy segítsünk megtervezni egy automatizált tartalomgyártási rendszert a vállalkozásodnak, keress minket.