Claude Code Remotion Skill: कोड से वीडियो बनाएँ (उदाहरण सहित)

एक पैराग्राफ़ टाइप करना और बदले में रेंडर हुई MP4 फ़ाइल पाना तब तक स्टंट लगता है जब तक आप उसे होते हुए न देखें। Claude Code Remotion skill के साथ आप सादी अंग्रेज़ी में एक सीन का वर्णन करते हैं, एजेंट React कंपोनेंट लिखता है, और Remotion हर फ़्रेम को एक असली वीडियो फ़ाइल में बदल देता है। कोई टाइमलाइन खींचनी नहीं पड़ती। कोई एक्सपोर्ट डायलॉग नहीं जिसमें वह एक सेटिंग छिपी हो जिसकी आपको ज़रूरत है। यह लेख इंस्टॉलेशन, काम करने वाले प्रॉम्प्ट, कॉपी करने लायक कोड और वे जाल दिखाता है जिनमें पूरी दोपहर निकल जाती है।

चाहे आप एक SaaS चलाते हों जिसे लॉन्च क्लिप चाहिए, एक डेटा टीम हों जिसे एनिमेटेड चार्ट चाहिए, या एक अकेले क्रिएटर हों जो एक ही इंट्रो बार-बार एडिट करने से थक चुके हों, कोड से वीडियो बनाना आपको वह देता है जो कोई टाइमलाइन एडिटर कभी नहीं देगा: एक ऐसा वीडियो जो एक सादी टेक्स्ट फ़ाइल है, जिसे आप वर्ज़न में रख सकते हैं, रिव्यू कर सकते हैं और एक मिनट में दोबारा रेंडर कर सकते हैं।

Remotion असल में क्या करता है

Remotion एक ऐसा फ़्रेमवर्क है जो React कोड से वीडियो रेंडर करता है। आप कंपोनेंट लिखते हैं, Remotion उन्हें एक हेडलेस ब्राउज़र में फ़्रेम-दर-फ़्रेम चलाता है, हर फ़्रेम कैप्चर करता है और नतीजे को MP4, WebM, GIF या एक स्टिल इमेज में जोड़ देता है। वेब पेज जो भी बना सकता है, जैसे SVG, CSS लेआउट, चार्ट, वेब फ़ॉन्ट और canvas, वह वीडियो का मटीरियल बन जाता है।

वीडियो एक React फ़ंक्शन के रूप में

Remotion के डॉक्स इसका केंद्रीय विचार एक लाइन में रखते हैं: वीडियो समय के साथ इमेज का एक फ़ंक्शन है। आपका कंपोनेंट मौजूदा फ़्रेम नंबर पढ़ता है और लौटाता है कि वह फ़्रेम कैसा दिखना चाहिए। किसी वैल्यू को फ़्रेम-दर-फ़्रेम बदलें, तो आपके पास एनिमेशन है।

हर कंपोज़िशन को चार नंबर चाहिए:

• width और height, पिक्सल में
• fps, यानी प्रति सेकंड फ़्रेम
• durationInFrames, यानी कुल लंबाई

पहला फ़्रेम 0 है और आख़िरी फ़्रेम durationInFrames - 1 है। 30 fps पर 5 सेकंड की क्लिप 150 फ़्रेम की होती है। यह गणित बाद में मायने रखता है, क्योंकि किसी अस्पष्ट प्रॉम्प्ट में सबसे पहले यही गलत होता है।

skill नतीजे क्यों बदलती है

Claude Code पहले से अच्छा React लिखता है। जो वह अपने-आप नहीं जानता, वे हैं Remotion के अपने नियम। एनिमेशन useCurrentFrame() से चलना चाहिए, क्योंकि CSS ट्रांज़िशन डिटरमिनिस्टिक तरीके से रेंडर नहीं होते। लोकल मीडिया staticFile() से लोड होना चाहिए। वीडियो क्लिप <OffthreadVideo> में जाने चाहिए, साधारण <video> टैग में नहीं। इनमें से कोई एक भी चूक जाए, तो प्रीव्यू ठीक दिखता है और फ़ाइनल रेंडर टूट जाता है।

skill निर्देशों का एक बंडल है जिसे एजेंट तब लोड करता है जब उसे वीडियो का काम दिखता है। इसमें Remotion के बेस्ट प्रैक्टिसेज़, प्रोजेक्ट और कंपोज़िशन बनाना, Studio लॉन्च करना, रेंडरिंग, और कैप्शन व पैकेज अपग्रेड जैसी अतिरिक्त चीज़ें शामिल हैं। एजेंट अंदाज़े लगाना बंद कर देता है और फ़्रेमवर्क के कन्वेंशन्स का पालन करने लगता है।

💡 skill मार्गदर्शन है, रेंडरर नहीं। वीडियो आपका प्रोजेक्ट, आपका Node.js इंस्टॉल और Remotion खुद बनाते हैं। skill बस एजेंट को ऐसा कोड लिखने से रोकती है जो फ़्रेमवर्क के खिलाफ़ जाए।

पाँच मिनट में skill इंस्टॉल करना

आपको Node.js, एक टर्मिनल और Claude Code चाहिए, जिसके लिए एक पेड Anthropic प्लान या API क्रेडिट चाहिए। बाकी सब npm से इंस्टॉल होता है।

प्रोजेक्ट बनाएँ

npx create-video --yes --blank my-video
cd my-video
npm install

प्रॉम्प्ट कॉपी करें

--blank फ़्लैग आपको डेमो की जगह एक न्यूनतम प्रोजेक्ट देता है, ताकि शुरू होने से पहले एजेंट के पास सुलझाने को कुछ न हो।

skill जोड़ें

प्रोजेक्ट फ़ोल्डर के भीतर से:

npx remotion skills add

प्रॉम्प्ट कॉपी करें

दो विकल्प भी हैं। skills पैकेज npx skills add remotion-dev/skills से इंस्टॉल होता है, और आधिकारिक Claude Code प्लगइन इन दो कमांड से इंस्टॉल होता है:

claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion

प्रॉम्प्ट कॉपी करें

Studio और एजेंट शुरू करें

प्रोजेक्ट फ़ोल्डर में दो टर्मिनल खोलें। पहले में प्रीव्यू चालू रखें और दूसरे में एजेंट शुरू करें:

# terminal 1
npm run dev

# terminal 2
claude

प्रॉम्प्ट कॉपी करें

Studio एक ब्राउज़र प्रीव्यू खोलता है जो हर बार एजेंट फ़ाइल सेव करने पर रीलोड होता है। इंस्टॉल करने के बाद नया Claude Code सेशन शुरू करें, वरना हो सकता है skill लोड न हो। skill स्लैश कमांड के रूप में दिखती है: /remotion-create, /remotion-studio, /remotion-render, /remotion-docs, और /remotion-best-practices, जो बाकी सबको समेटती है, जब आपको पता न हो कि कौन-सी लागू होती है।

अच्छे वीडियो बनाने वाले प्रॉम्प्ट

अस्पष्ट प्रॉम्प्ट सामान्य वीडियो देते हैं। जो प्रॉम्प्ट काम करते हैं, वे डायरेक्टर की शॉट लिस्ट जैसे पढ़ते हैं: अवधि, आयाम, फ़्रेम रेट, टाइमिंग के साथ सीन का क्रम, सटीक टेक्स्ट, एसेट पाथ, रंग, फ़ॉन्ट, मोशन की शैली और उन चीज़ों की एक छोटी सूची जिनसे बचना है।

प्रॉम्प्ट का फ़ॉर्मूला

बताएँ कि किससे बचना है। "कोई ग्रेडिएंट नहीं, कोई इमोजी नहीं, दो से ज़्यादा रंग नहीं" किसी भी सकारात्मक निर्देश से ज़्यादा दोबारा काम बचाता है।

उदाहरण: एक प्रोडक्ट लॉन्च कार्ड

यह प्रॉम्प्ट Tella के वॉकथ्रू में दिए गए प्रॉम्प्ट पर आधारित है:

/remotion-create
Create a 15-second, 1920x1080, 30 fps launch video for a note-taking app.
Three scenes: a 2-second title card, an 8-second product demo section,
and a 5-second call to action. Dark background, large readable type,
restrained spring animations. One file per scene under src/scenes,
all text passed in as props.

प्रॉम्प्ट कॉपी करें

जो वापस आता है वह अनुमानित होता है: तीन सीन कंपोनेंट, 450 फ़्रेम का एक रूट कंपोज़िशन, और कॉपी रखने वाला defaultProps ऑब्जेक्ट। इसे Studio में प्रीव्यू करें, फिर "टाइटल को 10 फ़्रेम बाद एंटर करवाएँ" या "कॉल टू एक्शन पर स्प्रिंग धीमा करें" जैसे छोटे फ़ॉलो-अप से एडजस्ट करें।

उदाहरण: एनिमेटेड डेटा चार्ट

डेटा वीडियो वह जगह है जहाँ कोड टाइमलाइन एडिटर से आगे निकल जाता है, क्योंकि संख्याएँ हाथ से खींचे गए बार के बजाय असली इनपुट होती हैं।

Read data/sales.json and build a 10-second, 1920x1080 bar chart at 30 fps.
Bars grow from zero with a spring, staggered by 4 frames each.
Show the value above each bar once it stops moving. Hold the final state
for 1 second. White background, one accent color, no gridlines.

प्रॉम्प्ट कॉपी करें

JSON फ़ाइल बदलें और फिर रेंडर करें, और आपके पास अगले महीने की रिपोर्ट वीडियो है। स्टैगरिंग एजेंट के लिए एक लाइन का विचार है: डिले बार के इंडेक्स को चार फ़्रेम से गुणा करके आता है।

उदाहरण: क्लिप पर कैप्शन

skill में कैप्शन पर मार्गदर्शन शामिल है, इसलिए ऐसा प्रॉम्प्ट अच्छा काम करता है: "captions.json का उपयोग करके public/clips/interview.mp4 में शब्द-दर-शब्द कैप्शन जोड़ें। सक्रिय शब्द को पीले रंग में हाइलाइट करें और कैप्शन को निचले थर्ड में रखें।" एजेंट से टाइमिंग गढ़ने को कहने के बजाय उसे फ़ाइल में असली शब्द-टाइमिंग दें। गढ़ी गई टाइमिंग कुछ ही सेकंड में सिंक से बाहर चली जाती है।

कॉपी करने लायक कोड उदाहरण

भले ही एजेंट सब कुछ लिखे, आपको उसे पढ़ पाना चाहिए। तीन पैटर्न लगभग हर प्रोजेक्ट में दिखते हैं।

स्प्रिंग टाइटल सीन

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

export const TitleCard: React.FC<{title: string}> = ({title}) => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();

  const enter = spring({frame, fps, config: {damping: 200}});
  const opacity = interpolate(frame, [0, 15], [0, 1], {extrapolateRight: 'clamp'});

  return (
    <AbsoluteFill style={{backgroundColor: '#0f172a', justifyContent: 'center', alignItems: 'center'}}>
      <h1 style={{color: 'white', fontSize: 96, opacity, marginTop: (1 - enter) * 60}}>
        {title}
      </h1>
    </AbsoluteFill>
  );
};

प्रॉम्प्ट कॉपी करें

200 का damping बिना बाउंस वाली एक सहज एंट्री देता है। interpolate फ़्रेम 0 से 15 को opacity 0 से 1 में मैप करता है, और extrapolateRight: 'clamp' उसके बाद वैल्यू को 1 से आगे जाने से रोकता है।

सीन टाइमिंग के लिए Sequences

import {AbsoluteFill, Sequence} from 'remotion';

export const LaunchVideo: React.FC = () => (
  <AbsoluteFill>
    <Sequence from={0} durationInFrames={60}>
      <TitleCard title="Notes, finally fast" />
    </Sequence>
    <Sequence from={60} durationInFrames={240}>
      <ProductDemo />
    </Sequence>
    <Sequence from={300} durationInFrames={150}>
      <CallToAction />
    </Sequence>
  </AbsoluteFill>
);

प्रॉम्प्ट कॉपी करें

Sequence के भीतर useCurrentFrame() शून्य से फिर शुरू होता है, इसलिए हर सीन को अकेले लिखा और टेस्ट किया जा सकता है। 30 fps पर ये ब्लॉक 2, 8 और 5 सेकंड चलते हैं, जो लॉन्च प्रॉम्प्ट के 450 फ़्रेम तक जुड़ते हैं।

बैच वेरिएंट के लिए Props

import {Composition} from 'remotion';
import {TitleCard} from './TitleCard';

export const Root: React.FC = () => (
  <Composition
    id="TitleCard"
    component={TitleCard}
    durationInFrames={90}
    fps={30}
    width={1920}
    height={1080}
    defaultProps={{title: 'Hello from code'}}
  />
);

प्रॉम्प्ट कॉपी करें

अब रेंडर के समय टेक्स्ट बदलें और एक सूची पर लूप चलाएँ:

for name in "Spring sale" "Black Friday" "New arrivals"; do
  npx remotion render src/index.ts TitleCard "out/${name// /-}.mp4" --props="{\"title\":\"$name\"}"
done

प्रॉम्प्ट कॉपी करें

एक ही कंपोनेंट से तीन वीडियो, बिना किसी एडिटर को खोले।

💡 एजेंट को पहले ही बता दें: "हर स्ट्रिंग, रंग और संख्या props में जाएगी।" इसका कोई खर्च नहीं है और बाद में बैच वेरिएंट, A/B टेस्ट और अनुवाद आसान हो जाते हैं।

PicassoIA पर Seedance 2.0 कैसे इस्तेमाल करें

Remotion वही एनिमेट करता है जो आप उसे देते हैं: टेक्स्ट, आकार, चार्ट, इमेज और क्लिप। असली जैसी दिखने वाली फ़ुटेज या ज़्यादा तीखे स्टोरीबोर्ड के लिए, आप बाहर से मटीरियल लाते हैं। PicassoIA दोनों ओर का काम संभालता है, सीन स्पेक और कोड का ड्राफ़्ट बनाने के लिए एक Claude Sonnet 5 पेज, और क्लिप बनाने के लिए एक Seedance 2.0 पेज के साथ।

पहले स्टोरीबोर्ड का ड्राफ़्ट बनाएँ

1. PicassoIA पर Claude Sonnet 5 पेज खोलें।
2. एक सिस्टम प्रॉम्प्ट चिपकाएँ, जैसे: "आप Remotion सीन स्पेक लिखते हैं। हर सीन को एक नाम दें, 30 fps पर फ़्रेम की संख्या दें, स्क्रीन पर सटीक टेक्स्ट दें और मोशन की शैली बताएँ।"
3. जब कई सीन में सटीक फ़्रेम संख्या चाहिए हो, तब effort को high पर सेट करें, और तेज़ रीराइट के लिए low। लंबे स्पेक के लिए max tokens को 8192 डिफ़ॉल्ट पर रहने दें।
4. वीडियो का वर्णन दो या तीन वाक्यों में करें और चलाएँ।
5. जो स्पेक मिले, उसे /remotion-create के बाद अपने पहले संदेश के रूप में Claude Code में चिपकाएँ।

मॉडल इमेज भी स्वीकार करता है, इसलिए आपके प्रोडक्ट इंटरफ़ेस का स्क्रीनशॉट सीधे स्टोरीबोर्ड को आधार दे सकता है।

फ़ुटेज बनाएँ

1. Seedance 2.0 पेज खोलें।
2. केवल एक शॉट के लिए प्रॉम्प्ट लिखें: सब्जेक्ट, मोशन, कैमरा मूव, रोशनी।
3. अपनी कंपोज़िशन से मेल खाता आस्पेक्ट रेशियो चुनें: 1920x1080 के लिए 16:9, या वर्टिकल के लिए 9:16।
4. duration सेकंड में सेट करें और resolution को 720p डिफ़ॉल्ट पर रहने दें।
5. यदि आप अपना म्यूज़िक या वॉइस ट्रैक लगाने वाले हैं तो Generate Audio बंद करें। एम्बिएंट साउंड के लिए इसे चालू रहने दें।
6. MP4 डाउनलोड करें और उसे अपने Remotion प्रोजेक्ट में public/clips/ के भीतर सेव करें।

ब्रांड का लुक एक जैसा रखने के लिए, पहले फ़्रेम के रूप में एक स्टिल अपलोड करें। Seedance 2.0 उसे क्लिप की शुरुआती इमेज मानता है।

💡 हर क्लिप के लिए एक शॉट बनाएँ और उन्हें Remotion में एक साथ जोड़ें। साफ़ कैमरा मूव वाली छोटी क्लिपें पाँच विचारों वाली एक लंबी क्लिप से बेहतर रहती हैं।

क्लिप्स को Remotion में डालें

import {AbsoluteFill, OffthreadVideo, staticFile} from 'remotion';

export const HarborShot: React.FC = () => (
  <AbsoluteFill>
    <OffthreadVideo src={staticFile('clips/harbor.mp4')} />
  </AbsoluteFill>
);

प्रॉम्प्ट कॉपी करें

फिर सामान्य React से फ़ुटेज के ऊपर टेक्स्ट, लोअर थर्ड और कैप्शन लेयर करें। Remotion के बाहर पॉलिश के लिए, ये पेज इस वर्कफ़्लो में फ़िट होते हैं:

रेंडरिंग और समस्याओं को ठीक करना

Studio इटरेशन के लिए है और आउटपुट के लिए कमांड लाइन। ये वे कमांड हैं जो आप सबसे ज़्यादा इस्तेमाल करेंगे:

आप /remotion-render टाइप करके एजेंट को रेंडर चलाने दे सकते हैं। जब कुछ टूटे, तो ये पाँच विफलताएँ हैं जो आपको सबसे पहले मिलेंगी:

• skill दिख नहीं रही। प्रोजेक्ट रूट से दोबारा इंस्टॉल करें, फिर नया सेशन शुरू करें।
• प्रीव्यू शुरू नहीं हो रहा। पहले npm install चलाएँ, फिर टर्मिनल में Node.js वर्ज़न या पोर्ट के टकराव की जाँच करें।
• एजेंट आधा प्रोजेक्ट दोबारा लिख देता है। अनुरोध को सीमित करें: "केवल src/scenes/Demo.tsx में बदलाव करें।"
• प्रीव्यू चलता है पर रेंडर फ़ेल होता है। फ़ॉन्ट, रिमोट मीडिया और एसेट पाथ जाँचें। बाहरी फ़ाइलें रेंडर के दौरान ब्राउज़र टैब से अलग व्यवहार करती हैं।
• टाइमिंग गलत लगती है। फ़्रेम और सेकंड गड़बड़ा गए। एजेंट से हर Sequence के ऊपर कमेंट में fps और फ़्रेम का गणित लिखने को कहें।

जब एजेंट बार-बार अंदाज़े लगाए, तो /remotion-docs उसे जाँच के लिए आधिकारिक डॉक्यूमेंटेशन देता है।

लागत क्या है और सीमाएँ कहाँ हैं

Remotion का लाइसेंस तय करता है कि यह आपके लिए मुफ़्त है या नहीं। प्रोजेक्ट के लाइसेंस पेज के अनुसार, यह व्यक्तियों, 3 कर्मचारियों तक वाली for-profit संस्थाओं, गैर-लाभकारी संस्थाओं और इसे परखने वाले किसी भी व्यक्ति के लिए मुफ़्त है। बड़ी कंपनियों को कंपनी लाइसेंस चाहिए। लिखे जाने के समय, Remotion ये टियर सूचीबद्ध करता है:

शिप करने से पहले मौजूदा प्राइसिंग पेज देखें, क्योंकि शर्तें बदलती रहती हैं। बाकी लागतें हैं Claude Code का उपयोग, अपनी मशीन पर रेंडर का समय, और किसी भी AI फ़ुटेज के लिए क्रेडिट।

सीमाएँ भी असली हैं। यह वर्कफ़्लो मोशन ग्राफ़िक्स, एक्सप्लेनर, डेटा वीडियो, कैप्शन और टेम्पलेट वाले वेरिएंट के लिए सबसे अच्छा है। मल्टीकैम लाइव-एक्शन एडिटिंग के लिए यह ख़राब फ़िट है, जहाँ शूट की गई या जेनरेट की गई फ़ुटेज को मुख्य दृश्य संभालना चाहिए और Remotion को केवल ग्राफ़िक्स की परत जोड़नी चाहिए। और एजेंट डिटरमिनिस्टिक नहीं है: एक ही प्रॉम्प्ट के दो रन दो अलग-अलग लेआउट देते हैं, इसलिए रेंडर से पहले हमेशा Studio में जाँच करें।

आज ही अपनी पहली क्लिप बनाएँ

छोटी शुरुआत करें। प्रोजेक्ट बनाएँ, skill जोड़ें और अपने टेक्स्ट के साथ पाँच सेकंड का टाइटल कार्ड माँगें। एक बार रेंडर हो जाए, तो उसे बढ़ाएँ: एक सीन जोड़ें, कॉपी को props के रूप में पास करें, फिर दस वेरिएंट के लिए एक सूची पर लूप चलाएँ।

फिर बाहरी मटीरियल लाएँ। Seedance 2.0 से एक लूपिंग बैकग्राउंड बनाएँ, Speech 2.8 HD से स्क्रिप्ट रिकॉर्ड करें, और Remotion को सटीक टाइमिंग के साथ सब कुछ जोड़ने दें। स्टिल पसंद हैं? PicassoIA पर पूरी मॉडल सूची के ज़रिए अपनी इमेज और सीन आर्ट बनाएँ और उन्हें अपनी कंपोज़िशन के बैकग्राउंड के रूप में public/ में डालें। प्रयोग करें, चीज़ें तोड़ें और दोबारा रेंडर करें। कोड में रहने वाला वीडियो ठीक करने में एक मिनट लगता है, इसलिए वह वर्ज़न आज़माएँ जिसे आप टाइमलाइन पर शायद कभी नहीं आज़माते।