वीडियो बनाना (Remotion)〔वैकल्पिक पढ़ना〕

📚 सीरीज नेविगेशन: पिछला लेख 52 तकनीकी शब्दावली (शुरुआती-अनुकूल) पूरे ट्यूटोरियल में आए तकनीकी शब्दों को एक "त्वरित संदर्भ" तालिका में समेटता है। यह लेख इस पूरे ट्यूटोरियल का अंतिम पड़ाव है, और एक [वैकल्पिक पढ़ना] वाला अतिरिक्त उपयोग भी है—Claude Code को कोड के साथ वीडियो बनाने में आपकी मदद करने देना। यह Remotion (React के साथ वीडियो लिखने का एक फ्रेमवर्क) का उपयोग करता है: आप अपनी सरल भाषा में बताते हैं कि आपको क्या एनिमेशन चाहिए, वह "हर फ्रेम को पेंट करने" का कोड लिखता है, और अंत में इसे mp4 में रेंडर करता है। इसे पढ़ने के बाद आपको पता चलेगा कि यह विधि कहाँ उपयोगी है, किसके काम की है, और किसके लिए समय की बर्बादी है।

📌 इस लेख की स्थिति के बारे में: Claude Code के आधिकारिक दस्तावेज़ों में Remotion के लिए कोई समर्पित पृष्ठ नहीं है—यह Claude Code की कोई इनबिल्ट सुविधा नहीं है, बल्कि "Claude Code का उपयोग करके दूसरे फ्रेमवर्क के लिए कोड लिखने" का एक तरीका है। इसलिए, इस लेख के तकनीकी तथ्य Remotion के सामान्य ज्ञान + ट्यूटोरियल अभ्यास पर आधारित हैं, और आधिकारिक Claude Code दस्तावेज़ों से संबंधित नहीं हैं (क्योंकि वहाँ इसके बारे में कुछ नहीं बताया गया है)। इसे "वैकल्पिक पढ़ना" में रखा गया है क्योंकि यह वास्तव में एक अतिरिक्त उपयोग है: अधिकांश लोगों को इसकी आवश्यकता नहीं होगी, लेकिन जो लोग इसका उपयोग करेंगे वे कहेंगे "अरे वाह, यह भी संभव है"।

दोस्तों, बात को समझने के लिए पहले कुछ आंकड़े देखते हैं।

GitHub पर Remotion ओपन सोर्स प्रोजेक्ट के पास 50,000 से अधिक stars हैं। "React के साथ वीडियो लिखने" के एक फ्रेमवर्क के पास इतनी लोकप्रियता होना अपने आप में एक बात साबित करता है—"वीडियो को कोड के रूप में लिखना" केवल कुछ उत्साही लोगों का शौक नहीं है, बल्कि लोग इसके माध्यम से वास्तव में काम कर रहे हैं।

इसका सबसे प्रसिद्ध उपयोग कुछ इस तरह है: कुछ उत्पाद प्रत्येक उपयोगकर्ता के लिए "व्यक्तिगत वार्षिक सारांश वीडियो" तैयार करते हैं—आपके सुनने का समय, आपके सबसे पसंदीदा गाने, आपकी रैंकिंग। हजारों उपयोगकर्ताओं का मतलब हजारों वीडियो हैं जिनका कंटेंट अलग है लेकिन टेम्पलेट एक ही है। क्या आप किसी वीडियो एडिटर से Pr या AE का उपयोग करके एक-एक करके इसे एडिट करने की उम्मीद करेंगे? वे थक जाएंगे। लेकिन अगर वीडियो एक कोड है जिसमें पैरामीटर पास किए जा सकते हैं, तो यह सिर्फ एक लूप का काम है—डेटा बदलें, और नया वीडियो रेंडर करें।

जब "पैरामीटर पास करने वाले कोड" की बात आती है, तो क्या आपको किसी की याद आती है? हाँ, बिल्कुल, यह Claude Code का मुख्य कार्यक्षेत्र है। जैसे ही वीडियो React कोड बन जाता है, यह उस कोड की तरह हो जाता है जिसके साथ आपने पिछले बावन लेखों में काम किया है—आप आवश्यकता बताते हैं, वह लिखता है, बदलता है और सुधार करता है। यह लेख आपको दिखाएगा कि यह संयोजन कैसे काम करता, और सबसे महत्वपूर्ण: क्या यह आपके लिए सही है?

इस लेख को पढ़ने के बाद, आपको मिलेगा:

एक वाक्य में स्पष्टीकरण कि Remotion क्या है और यह कोड के साथ वीडियो बनाने में कैसे सक्षम है
Remotion और Claude Code का यह संयोजन इतना बेहतरीन क्यों है—वीडियो कोड बन जाता है, और कोड लिखना Claude का काम है
एक खाली डायरेक्टरी से लेकर एक mp4 फ़ाइल तैयार करने की न्यूनतम प्रक्रिया, जिसमें प्रत्येक चरण का अपेक्षित परिणाम शामिल है
तीन प्रमुख अवधारणाओं (फ्रेम, इंटरपोलेशन, स्प्रिंग) की सरल भाषा में व्याख्या, ताकि आप समझ सकें कि Claude द्वारा लिखा गया कोड क्या कर रहा है
एक तुलनात्मक तालिका "किसे उपयोग करना चाहिए / किसे इससे दूर रहना चाहिए", जो यह तय करने में मदद करेगी कि आपको इस पर समय देना चाहिए या नहीं

01 पहले समझें: Remotion कैसे "कोड के साथ वीडियो बनाने" में सक्षम है

पहले निष्कर्ष देखते हैं: Remotion वीडियो के प्रत्येक फ्रेम को React द्वारा रेंडर की गई इमेज में बदल देता है, और फिर इन इमेजेस को क्रमबद्ध रूप से जोड़कर वीडियो बनाता है। अब आप टाइमलाइन पर माउस से कतरनें नहीं घसीटते, बल्कि कोड लिखकर बताते हैं कि "कौन सा फ्रेम कैसा दिखना चाहिए"।

यह सुनने में थोड़ा अजीब लग सकता है—वीडियो तो आमतौर पर शूट और एडिट किए जाते हैं, इन्हें "लिखा" कैसे जा सकता है? महत्वपूर्ण बात यह है कि यह किस तरह के वीडियो बनाता है: यह कोई वास्तविक लोगों के अभिनय या शूटिंग वाला वीडियो नहीं है, बल्कि टेक्स्ट एनिमेशन, डेटा चार्ट, लोगो इंट्रो, कोड प्रदर्शन जैसे वीडियो हैं जिनकी "पूरी स्क्रीन नियमों के आधार पर जेनरेट होती है"। इस तरह की चीजों में "शूटिंग" जैसी कोई चीज़ नहीं होती, सब कुछ "नियमों के आधार पर ड्रा" किया जाता है—और नियमों के आधार पर ड्रा करना कोड का सबसे मजबूत पक्ष है।

सादृश्य: बचपन में खेली जाने वाली फ्लिप बुक (flip book)。 आप एक नोटपैड के हर पन्ने के कोने पर एक छोटा कार्टून बनाते हैं, पहले पन्ने पर वह बायाँ पैर उठाता है, दूसरे पर दायाँ, तीसरे पर कूदता है... अलग से देखने पर हर पन्ना एक स्थिर चित्र है, लेकिन जब आप अंगूठे से पन्नों को तेजी से पलटते हैं, तो वह कार्टून दौड़ने लगता है। वीडियो का मूल सिद्धांत भी यही है—स्थिर चित्रों का समूह, जिन्हें पर्याप्त गति से चलाने पर आंखें उन्हें निरंतर गति के रूप में देखती हैं。 Remotion यही काम करता है, वह आपको कोड के माध्यम से इस फ्लिप बुक के हर पन्ने को ड्रा करने की अनुमति देता है: आप एक फ़ंक्शन लिखते हैं और बताते हैं कि "फ्रेम 0 पर टेक्स्ट स्क्रीन से बाहर है, फ्रेम 30 पर यह बीच में आ जाता है", और वह बीच के हर पन्ने को कैलकुलेट करके, ड्रा करके वीडियो बना देता है।

वास्तविक परिस्थितियों में, नीचे दी गई श्रेणियों के वीडियो बनाने के लिए Remotion बहुत उपयोगी है:

डेटा विज़ुअलाइज़ेशन वीडियो: एक संख्या जो 0 से बढ़कर एक मिलियन तक पहुँचने का एनिमेशन दिखाती है, या समय के साथ बढ़ता हुआ बार चार्ट—डेटा-संचालित होने के कारण कोड से इसे नियंत्रित करना बहुत आसान है
बैच व्यक्तिगत वीडियो: जैसा कि ऊपर बताया गया है "वार्षिक सारांश", एक ही टेम्पलेट में अलग-अलग डेटा भरकर हजारों वीडियो का लूप रेंडरिंग
तकनीकी प्रदर्शन / ट्यूटोरियल इंट्रो: कोड ब्लॉक्स का लाइन-बाय-लाइन हाइलाइट होना, टर्मिनल टाइपिंग प्रभाव, स्क्रीन पर लोगो का गिरना—डेवलपर्स के लिए अपने खुद के वीडियो बनाना AE सीखने की तुलना में बहुत तेज़ है

एक सामान्य परिदृश्य पर विचार करें: आप एक छोटे टूल के लिए 15 सेकंड का लॉन्च टीज़र बनाना चाहते हैं। आपको After Effects नहीं आता, और 15 सेकंड के लिए किसी बाहरी वीडियो एडिटर को काम पर रखना सही नहीं लगता। ऐसे में Claude Code और Remotion का उपयोग करके, एक खाली डायरेक्टरी से लेकर एक काम करने योग्य mp4 तैयार करने में लगभग एक घंटा लगेगा—जिसमें से अधिकांश समय इस बात पर जाएगा कि "यह शब्द बहुत तेज़ चल रहा है" या "बैकग्राउंड अच्छा नहीं लग रहा है"। पहले के समय में, इतने समय में तो सॉफ़्टवेयर भी ठीक से इंस्टॉल नहीं हो पाता था।

वीडियो बनाने की प्रक्रिया में Remotion के स्थान को स्पष्ट करने के लिए, मैं इसे अन्य दो श्रेणियों के टूल्स के साथ प्रस्तुत कर रहा हूँ:

टूल का प्रकार	वीडियो कैसे बनाता है	मजबूत पक्ष	कमजोर पक्ष
संपादन सॉफ़्टवेयर (Pr / AE / CapCut)	माउस से फाइलों को खींचना, कीफ़्रेम सेट करना	वास्तविक शूटिंग, रचनात्मक स्वतंत्रता, तत्काल परिणाम	बैच जनरेशन संभव नहीं, बदलावों को मैन्युअल रूप से करना पड़ता है, सीखने में समय लगता है
ऑनलाइन टेम्पलेट (विभिन्न "वन-क्लिक जनरेशन" वेबसाइट)	बने-बनाए टेम्पलेट्स में जानकारी भरना	तेज़, कोई कोडिंग ज्ञान आवश्यक नहीं	टेम्पलेट में बंधे होना, बारीक विवरण बदलना असंभव, सभी वीडियो एक जैसे दिखना
Remotion	कोड के माध्यम से हर फ्रेम को परिभाषित करना	सटीक नियंत्रण, बैच जनरेशन, git के साथ ट्रैकिंग, पुन: प्रयोज्य	वास्तविक शूटिंग के लिए नहीं, कोडिंग वातावरण आवश्यक (लेकिन Claude मदद करता है)

इस तालिका से आप इसकी स्थिति को समझ सकते हैं—यह व्यक्तिगत व्लॉग एडिट करने के लिए संपादन सॉफ़्टवेयर से मुकाबला नहीं करता, न ही साधारण वीडियो के लिए ऑनलाइन टेम्पलेट्स से मुकाबला करता है, यह उस हिस्से पर काम करता है जहाँ "सटीकता, बैच जनरेशन और पुन: प्रयोज्यता" की आवश्यकता होती है। और इसकी एकमात्र बाधा "कोड लिखना आना" को Claude Code ने आसान बना दिया है।

💡 संक्षेप में: Remotion वीडियो को एक-एक फ्रेम की React स्क्रीन में विभाजित करता है, आप कोड लिखकर बताते हैं कि "कौन सा फ्रेम कैसा दिखेगा", और वह उन्हें जोड़कर वीडियो बनाता है; यह टेक्स्ट, डेटा, लोगो जैसे नियमों के आधार पर बनने वाले वीडियो के लिए बेहतरीन है, यह वास्तविक शूटिंग या साधारण टेम्पलेट्स का विकल्प नहीं है, बल्कि "सटीकता + बैच + पुन: प्रयोज्यता" पर केंद्रित है।

02 Remotion और Claude Code एक बेहतरीन संयोजन क्यों हैं

पिछले भाग की अंतिम पंक्ति ने पहले ही स्पष्ट कर दिया है—जैसे ही वीडियो कोड बन जाता है, वीडियो बनाना कोड लिखने जैसा हो जाता है, और कोड लिखना Claude Code का मुख्य काम है। यही इन दोनों के एक साथ होने का कारण है।

मैं इसे विस्तार से स्पष्ट करता हूँ। पारंपरिक रूप से एनिमेशन वीडियो बनाने में क्या बाधा आती है? सॉफ़्टवेयर: आपको After Effects या Pr का उपयोग करना आना चाहिए, कीफ़्रेम, ईज़िंग कर्व्स, लेयर मास्क जैसी अवधारणाओं को समझना होता है। इन सॉफ़्टवेयर टूल्स को सीखने में समय लगता है, और कई प्रोग्रामर इस बात पर अटक जाते हैं कि "वे एनिमेशन बनाना चाहते हैं लेकिन AE सीखने की इच्छा नहीं है"।

सादृश्य: आपको After Effects नहीं आता, लेकिन आपके पास एक ऐसा कुशल व्यक्ति बैठा है जो React जानता है। आपको जटिल सॉफ़्टवेयर को छूने की आवश्यकता नहीं है, बस उस व्यक्ति को अपनी भाषा में अपनी आवश्यकता बताएं—"मुझे बाईं ओर से उड़कर आने वाला टेक्स्ट चाहिए, जो थोड़ा रुके और फिर हरे रंग में चमकने लगे"—वह व्यक्ति समझ जाएगा और कोड लिख देगा। Remotion "कोड के साथ वीडियो लिखने" की संभावना प्रदान करता है, और Claude Code वह सहायक है जो आपकी आवश्यकताओं को कोड में बदलता है。 आप केवल रचनात्मक निर्णय लेते हैं, और वह कोड लिखता है।

यह तालमेल उन चीजों से बिल्कुल मेल खाता है जिनमें Claude Code सबसे अच्छा है:

वीडियो बनाने का चरण	पारंपरिक तरीका (मैन्युअल)	Claude Code + Remotion
शून्य से प्रोजेक्ट सेटअप	खुद React कॉन्फ़िगर करना, निर्भरताएँ इंस्टॉल करना	एक वाक्य में पूरा प्रोजेक्ट स्ट्रक्चर तैयार करना
एनिमेशन लॉजिक लिखना	AE में कीफ़्रेम सेट करना	आवश्यकता बताना, और उसका `interpolate`/`spring` कोड लिखना
विवरण बदलना	सॉफ़्टवेयर में लेयर्स खोजना	"दूसरे सीन में टेक्स्ट छोटा करें" → कोड ढूंढकर बदलना
अलग-अलग संस्करण बनाना	एक-एक करके फाइलें सहेजना	पैरामीटर बदलकर बैच रेंडरिंग करना

"विवरण बदलना" वाले भाग से इसके लाभ को सबसे अच्छे से समझा जा सकता है। जब आप प्रीव्यू में देखते हैं कि "यह कार्ड बहुत तेज़ी से आ रहा है", तो AE में आपको कई लेयर्स में जाकर उस कीफ़्रेम को खोजना होगा; जबकि यहाँ आप बस टर्मिनल में कहते हैं "FeaturesScene में कार्ड का एनिमेशन थोड़ा धीमा करें", और Claude खुद संबंधित .tsx फाइल में जाकर उस वैल्यू को कम कर देता है—प्रीव्यू भी तुरंत अपडेट हो जाता है。 यह "अपनी भाषा में वीडियो बदलना" इस संयोजन का सबसे अच्छा अनुभव है।

यहाँ एक महत्वपूर्ण बात समझना आवश्यक है, ताकि कोई भ्रम न हो: यह संयोजन इस बात पर आधारित है कि Claude Code React कोड लिख रहा है, न कि Claude Code खुद वीडियो बना रहा है। इसलिए पिछले ट्यूटोरियल में सीखी गई सभी बातें यहाँ भी लागू होती हैं—

आवश्यकता जितनी स्पष्ट होगी, परिणाम उतना ही सटीक होगा (विवरण के लिए लेख 15 "कैसे पूछें" देखें), जैसे "6 सेकंड, 1920×1080, 30fps, काले बैकग्राउंड पर सुनहरे अक्षर" कहना "एक अच्छा इंट्रो बनाएं" कहने से बहुत बेहतर है;
/init या CLAUDE.md का उपयोग करके नियमों को तय करें (लेख 12, 18 देखें), ताकि बाद में कोड बदलना आसान हो;
आप एक समर्पित Skill भी बना सकते हैं जो उसे "Remotion कैसे लिखना है" के नियम सिखाए (लेख 26 देखें), जिससे कोड की गुणवत्ता बेहतर होगी।

दूसरे शब्दों में: आपको Remotion को शुरू से सीखने की आवश्यकता नहीं है, पिछले बावन लेखों में सीखी गई "Claude Code को कोड लिखने के लिए निर्देशित करने" की कला का यहाँ सीधा उपयोग किया जा सकता है।

💡 संक्षेप में: Remotion वीडियो को React कोड में बदल देता है, और React कोड लिखना Claude Code का काम है; आप अपनी भाषा में आवश्यकताएं बताते हैं और निर्णय लेते हैं, और वह प्रोजेक्ट सेटअप, एनिमेशन लॉजिक लिखना और फीडबैक के आधार पर बदलाव करने का काम करता है।

03 तीन प्रमुख अवधारणाएँ: समझें कि Claude द्वारा लिखा गया कोड क्या कर रहा है

आप बिना कोडिंग जाने भी केवल बोलकर Claude से वीडियो बनवा सकते हैं। लेकिन यदि आप इन तीन शब्दों को समझने में तीन मिनट देते हैं, तो कोड आपके लिए अजनबी नहीं रहेगा और आप आत्मविश्वास के साथ बदलाव करवा सकेंगे। ये तीन शब्द Remotion की नींव हैं: फ्रेम, इंटरपोलेशन, स्प्रिंग।

फ्रेम (frame): वीडियो की गणना फ्रेम के आधार पर होती है

फ्लिप बुक के सादृश्य पर वापस जाएं—वीडियो की सबसे छोटी इकाई "फ्रेम" है, यानी फ्लिप बुक का "एक पन्ना"。 Remotion में एक मुख्य फ़ंक्शन useCurrentFrame() होता है, जो बताता है कि "वर्तमान में कौन सा फ्रेम ड्रा हो रहा है"। आपका पूरा एनिमेशन मूल रूप से इस सवाल का जवाब है: "फ्रेम संख्या X पर, स्क्रीन कैसी दिखनी चाहिए"。

समय और फ्रेम के बीच का संबंध इस सूत्र से समझा जा सकता है:

कुल फ्रेम = सेकंड × फ्रेम रेट (fps)。 उदाहरण के लिए, 6 सेकंड और 30fps का वीडियो मतलब 6 × 30 = 180 फ्रेम।

इसे कोड में durationInFrames={180} के साथ fps={30} देखते हैं, तो आप तुरंत समझ जाते हैं: यह 6 सेकंड का वीडियो है。 (fps का अर्थ है frames per second, प्रति सेकंड फ्रेम; 30fps सामान्य रूप से सहज होता है, और 60fps अधिक स्मूथ होता है लेकिन फ़ाइल का आकार बढ़ जाता है।)

इंटरपोलेशन (interpolate): A से B तक के बदलाव को सुचारू बनाना

interpolate() सबसे अधिक उपयोग किया जाने वाला फ़ंक्शन है, जिसका काम एक वाक्य में यह है: दो समय बिंदुओं और दो मानों (values) के आधार पर, यह बीच के हर फ्रेम के लिए मान की गणना करता है。

एक सरल उदाहरण देखें—आप चाहते हैं कि कोई टेक्स्ट पहले 30 फ्रेम्स में "पूरी तरह से अदृश्य" से "पूरी तरह से दृश्य" (fade in) हो जाए:

tsx

import { interpolate, useCurrentFrame } from "remotion";

const frame = useCurrentFrame();
// फ्रेम 0 पर opacity=0, फ्रेम 30 पर opacity=1, बीच में स्वचालित रूप से सहज बदलाव
const opacity = interpolate(frame, [0, 30], [0, 1]);

इस कोड का अर्थ है: interpolate(frame, [0, 30], [0, 1]) यानी "जब frame 0 से 30 तक जाए, तो वैल्यू को 0 से 1 तक बढ़ाएं"。 Claude इसका उपयोग फेडिंग, मूवमेंट, स्केलिंग, रोटेशन आदि के लिए करता है। जब भी आप interpolate देखें, तो समझें: यहाँ कोई चीज़ "एक स्थिति से दूसरी स्थिति में सुचारू रूप से बदल रही है"。

स्प्रिंग (spring): एनिमेशन को यांत्रिक के बजाय "लचीला (bounce)" बनाना

spring() एनिमेशन में भौतिक लचीलापन (spring physics) जोड़ने वाला फ़ंक्शन है। interpolate से होने वाली गति यूनिफ़ॉर्म होती है जो यांत्रिक लग सकती है; जबकि spring एक स्प्रिंग की तरह काम करता है, जो आगे जाकर थोड़ा वापस आता है और अधिक प्राकृतिक लगता है।

कहा जाता है कि: spring() से बना एनिमेशन सामान्य एनिमेशन की तुलना में 10 गुना अधिक प्राकृतिक दिखता है। हमारे उदाहरण में, शुरुआत में लोगो स्क्रीन पर अचानक आता था जो अच्छा नहीं लगता था; जब Claude से कहा गया कि "लोगो में स्प्रिंग इफ़ेक्ट जोड़ें", तो उसने interpolate को spring से बदल दिया, जिससे लोगो में एक प्राकृतिक बाउंस इफ़ेक्ट आ गया। तो यदि आप एनिमेशन को पेशेवर बनाना चाहते हैं, तो निर्देश देते समय कहें "स्प्रिंग ईज़िंग का उपयोग करें"—यह एक बहुत उपयोगी सुझाव है।

आपको ये अवधारणाएँ खुद लिखने की आवश्यकता नहीं है, बस इन्हें समझना पर्याप्त है。 नीचे दी गई तालिका से आप समझ सकते हैं कि कौन सा शब्द क्या काम करता है:

शब्द	क्या करता है	Claude से कैसे कहें
`useCurrentFrame()`	वर्तमान फ्रेम संख्या प्राप्त करना	(आमतौर पर Claude खुद संभालता है)
`durationInFrames` / `fps`	वीडियो की लंबाई और सहजता तय करना	"6 सेकंड, 30fps का वीडियो बनाएं"
`interpolate(...)`	A से B तक सुचारू बदलाव	"इसे फेड-इन / स्लाइड-इन / ज़ूम करें"
`spring(...)`	बाउंस इफ़ेक्ट के साथ बदलाव	"स्प्रिंग इफ़ेक्ट का उपयोग करें, थोड़ा बाउंस होना चाहिए"

अंत में इन तीनों को एक छोटे कोड ब्लॉक में देखते हैं, जो Claude द्वारा जेनरेट किया गया एक छोटा कंपोनेंट हो सकता है—HELLO शब्द, जो फेड-इन होने के साथ-साथ बाउंस होकर बड़ा होता है। कोड के साथ दिए गए कमेंट्स को पढ़ें:

tsx

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

export const Hello = () => {
  const frame = useCurrentFrame();        // वर्तमान फ्रेम संख्या
  const { fps } = useVideoConfig();        // फ्रेम रेट प्राप्त करना

  // पहले 30 फ्रेम्स में 0 (अदृश्य) से 1 (दृश्य) होना
  const opacity = interpolate(frame, [0, 30], [0, 1]);
  // स्प्रिंग इफ़ेक्ट के साथ ज़ूम वैल्यू की गणना करना
  const scale = spring({ frame, fps, config: { damping: 12 } });

  return (
    <div style={{ opacity, transform: `scale(${scale})` }}>HELLO</div>
  );
};

इसे समझना सरल है: useCurrentFrame() से फ्रेम संख्या ली → interpolate से ओपेसिटी को 0 से 1 किया (फेड-इन) → spring से ज़ूम को लचीला बनाया (बाउंस) → और अंत में इन दोनों मानों को HELLO शब्द के स्टाइल पर लागू कर दिया। यह पूरा कोड इस सवाल का जवाब देता है: "फ्रेम X पर, HELLO शब्द कैसा दिखना चाहिए"。 Claude द्वारा लिखा गया कोड कितना भी जटिल हो, उसका मूल ढांचा यही होता है—इन शब्दों को समझकर आप उससे बदलावों पर चर्चा कर सकते हैं。

💡 संक्षेप में: समझने के लिए तीन शब्द पर्याप्त हैं—फ्रेम वीडियो का "पन्ना" है (कुल फ्रेम = सेकंड × fps), interpolate A से B तक के बदलाव की गणना करता है, और spring एनिमेशन को प्राकृतिक लचीलापन देता है; ये मिलकर यह तय करते हैं कि "किस फ्रेम पर स्क्रीन कैसी दिखेगी"। आपको इन्हें खुद लिखने की आवश्यकता नहीं है, बस कोडिंग के बिना निर्देश देना आना चाहिए।

04 न्यूनतम प्रक्रिया का अवलोकन: खाली डायरेक्टरी से लेकर mp4 तक

इस प्रक्रिया को समझने से आप वीडियो बनाते समय भ्रमित नहीं होंगे। इसके पांच मुख्य चरण हैं, जिनमें या तो आप Claude को निर्देश देते हैं या परिणाम देखने के लिए कमांड चलाते हैं।

मैं इसे एक फ्लोचार्ट के माध्यम से प्रस्तुत कर रहा हूँ, जिसके बाद हम प्रत्येक चरण को समझेंगे।

Claude Code + Remotion वीडियो फ्लो: एनवायरनमेंट सेटअप → आवश्यकता बताना → Claude द्वारा कोड लिखना → प्रीव्यू → संतुष्ट होने पर एक्सपोर्ट / असंतुष्ट होने पर बदलाव

यह फ्लोचार्ट दिखाता है: एनवायरनमेंट सेटअप के बाद, आप Claude को आवश्यकता बताते हैं → वह कोड जेनरेट करता है → आप प्रीव्यू देखते हैं → असंतुष्ट होने पर फिर से निर्देश देते हैं, और संतुष्ट होने पर mp4 रेंडर करते हैं। बीच में "प्रीव्यू—बदलाव—फिर से प्रीव्यू" का चक्र कई बार चलता है, जो कि सामान्य बात है।

नीचे प्रत्येक चरण की कमांड और अपेक्षित परिणाम दिए गए हैं।

पहला चरण: वातावरण (Environment) तैयार करना

Remotion, Node.js पर आधारित है, इसलिए आपके कंप्यूटर पर Node.js 18 या उससे उच्च संस्करण होना चाहिए, साथ ही Claude Code इंस्टॉल होना चाहिए (इंस्टॉलेशन के लिए लेख 02 देखें)。 Node संस्करण की जांच करें:

bash

node --version

अपेक्षित परिणाम: v20.11.0 जैसा संस्करण नंबर प्रिंट होगा। पहला अंक 18 या उससे अधिक होना चाहिए。 यदि यह 18 से कम है, तो Remotion Studio शुरू करते समय एरर आएगी—यह नए उपयोगकर्ताओं द्वारा की जाने वाली पहली आम गलती है (इसे nvm जैसे टूल से 20 पर अपडेट करें)。

⚠️ ध्यान दें: वीडियो रेंडर करते समय, Remotion पृष्ठभूमि में एक无头浏览器 (headless Chromium, बिना इंटरफ़ेस वाला ब्राउज़र जो बैकग्राउंड में फ्रेम के स्क्रीनशॉट लेता है) का उपयोग करता है। पहली बार रेंडर करते समय यह इस कंपोनेंट को डाउनलोड कर सकता है, यदि नेटवर्क की समस्या हो तो प्रॉक्सी का उपयोग करें。

दूसरा चरण: खाली डायरेक्टरी बनाना, Claude Code शुरू करना और आवश्यकता बताना

bash

mkdir hello-video && cd hello-video
claude

Claude के इंटरैक्टिव इंटरफ़ेस में प्रवेश करने के बाद, अपनी आवश्यकता को स्पष्ट रूप से बताएं。 विवरण जितना सटीक होगा, पहली बार में सही परिणाम मिलने की संभावना उतनी ही अधिक होगी। एक उदाहरण प्रॉम्प्ट:

text

帮我用 Remotion 创建一个项目，做一个 6 秒的开场视频。
要求：1920x1080，30fps，纯黑背景；
画面中央显示 "HELLO" 几个白色大字，从透明淡入并轻微放大，
最后这几个字带一圈绿色（#67c23a）发光。
只要一个 Composition，不用拆多个场景。

ध्यान दें कि इस प्रॉम्प्ट में लंबाई, रेजोल्यूशन, फ्रेम रेट, रंग, एनिमेशन का प्रकार सब कुछ स्पष्ट रूप से लिखा गया है—जैसा कि लेख 15 में बताया गया था। यह "एक अच्छा इंट्रो बनाएं" कहने से बहुत बेहतर है।

हमेशा इन पांच तत्वों को ध्यान में रखकर निर्देश दें, जिससे सही परिणाम मिलने की संभावना बढ़ जाएगी:

तत्व	क्या स्पष्ट करना है	उदाहरण
लंबाई	कितने सेकंड	"6 सेकंड"
साइज़ + फ्रेम रेट	किस प्लेटफॉर्म के लिए, कितनी सहजता	"1920×1080, 30fps"
बैकग्राउंड	केवल "अच्छा बैकग्राउंड" न कहें, रंग बताएं	"गहरा काला", "गहरे स्लेटी से नीले रंग का ग्रेडिएंट"
मुख्य कंटेंट	कौन से शब्द / नंबर / आकार दिखाने हैं	"बीच में सफेद बड़े अक्षरों में HELLO"
एनिमेशन का प्रकार	कैसे आना है, कैसे जाना है, बाउंस होना है या नहीं	"फ्रेम में फेड-इन और ज़ूम होना, स्प्रिंग इफ़ेक्ट के साथ"

साइज़ के लिए, सीधे प्लेटफॉर्म का नाम बताना अधिक आसान है—जैसे यूट्यूब (1920×1080), इंस्टाग्राम रील्स (1080×1920), या स्क्वायर वीडियो (1:1)。 Claude प्लेटफॉर्म के अनुसार साइज़ को खुद समझ लेगा।

तीसरा चरण: प्रोजेक्ट सेटअप और कोड लिखना

इसके बाद Claude Code खुद काम करना शुरू करेगा: package.json को इनिशियलाइज़ करना, Remotion निर्भरताएँ इंस्टॉल करना, src/ डायरेक्टरी बनाना, Composition कंपोनेंट लिखना, और interpolate/spring एनिमेशन लॉजिक सेट करना। वह पूरा ढांचा खुद तैयार करेगा, आप बस फाइलों को बनते हुए देख सकते हैं। काम पूरा होने पर वह निर्भरताओं को इंस्टॉल करने और प्रीव्यू चलाने की कमांड बताएगा—उन्हें रन करें।

चौथा चरण: प्रीव्यू देखना (सबसे महत्वपूर्ण चरण)

bash

npm install
npx remotion studio

अपेक्षित परिणाम: टर्मिनल में Remotion Studio running at http://localhost:3000 प्रिंट होगा और ब्राउज़र में एक पेज खुलेगा। आप एक टाइमलाइन वाला प्रीव्यू इंटरफ़ेस देखेंगे—जहाँ आप वीडियो चला सकते हैं, और टाइमलाइन को आगे-पीछे करके हर फ्रेम को देख सकते हैं।

यह चरण सबसे महत्वपूर्ण है। वीडियो कैसा बना है, यह यहीं से पता चलता है। यदि आपको लगता है कि "टेक्स्ट बहुत तेज़ी से आ रहा है" या "चमक बहुत तेज़ है", तो उसे नोट कर लें—ताकि अगले चरण में Claude से इसे बदला जा सके।

पांचवा चरण: असंतुष्ट होने पर बदलाव करवाना, संतुष्ट होने पर एक्सपोर्ट करना

यदि कोई कमी दिखती है, तो खुद कोड में बदलाव न करें, बल्कि Claude Code टर्मिनल में जाकर सीधे कहें:

text

"HELLO" 淡入太快了，把淡入时间拉长到 1 秒；绿色发光弱一点。

वह संबंधित कोड को बदल देगा, और Remotion Studio खुद अपडेट हो जाएगा。 आप ब्राउज़र में जाकर नया परिणाम तुरंत देख सकते हैं। इस "बोलना—बदलना—देखना" की प्रक्रिया को तब तक दोहराएं जब तक आप संतुष्ट न हो जाएं।

संतुष्ट होने के बाद, इसे mp4 में रेंडर करें:

bash

npx remotion render HelloVideo out/hello.mp4

यहाँ HelloVideo आपकी Composition ID है (यह कोड में रजिस्टर्ड आईडी के समान होनी चाहिए, Claude आपको बताएगा कि यह क्या है), और out/hello.mp4 आउटपुट का पाथ है। अपेक्षित परिणाम: टर्मिनल में एक प्रोग्रेस बार चलेगा, और समाप्त होने पर Rendered ... → out/hello.mp4 प्रिंट होगा। आपकी mp4 फ़ाइल out/ डायरेक्टरी में तैयार मिलेगी।

दो सामान्य बातें जो नए उपयोगकर्ताओं को परेशान कर सकती हैं:

यदि Composition ID नहीं पता? अंदाज़ा न लगाएं—सीधे Claude से पूछें कि इस वीडियो की Composition ID क्या है, वह आपको बता देगा; या फिर remotion studio प्रीव्यू पेज खोलें, बाईं ओर दी गई सूची में सभी Composition के नाम दिखाई देंगे, वहाँ से देख लें।

प्रीव्यू देखे बिना सीधे रेंडर क्यों नहीं करना चाहिए? क्योंकि रेंडरिंग एक भारी काम है जिसमें कुछ मिनट लग सकते हैं; जबकि प्रीव्यू तत्काल होता है और इसे हर फ्रेम पर जाकर देखा जा सकता है। सही तरीका यह है: प्रीव्यू में सब कुछ ठीक करें, और अंत में केवल एक बार रेंडर करें。 हर छोटे बदलाव पर रेंडर करने से बहुत समय बर्बाद होगा।

💡 संक्षेप में: पांच चरण हैं—एनवायरनमेंट सेटअप (Node 18+) → आवश्यकता बताना → कोड लिखना → remotion studio प्रीव्यू देखना → बदलाव करवाना / संतुष्ट होने पर remotion render से mp4 बनाना。 बीच में प्रीव्यू और बदलाव का चक्र चलना सामान्य है, और ध्यान रखें कि बदलावों की जांच प्रीव्यू में करें और रेंडरिंग केवल अंत में करें।

05 व्यावहारिक अभ्यास: एक न्यूनतम उदाहरण चलाना और सत्यापित करना

केवल पढ़ना काफी नहीं है, इस भाग में हम एक वास्तविक छोटा अभ्यास करेंगे, जिसके चरणों को आप खुद रन कर सकते हैं。 इसके लिए वीडियो एडिटिंग के किसी पूर्व अनुभव की आवश्यकता नहीं है, केवल Node.js 18+ और Claude Code होना चाहिए।

⚠️ ध्यान दें: यह अभ्यास Claude Code को निर्भरताएँ इंस्टॉल करने, फाइलें बनाने और रेंडर करने के लिए कहेगा, जो सामान्य प्रश्नों की तुलना में थोड़ा भारी काम है। निर्भरताओं को इंस्टॉल करने और पहली बार रेंडर करने में कुछ मिनट लग सकते हैं, नेटवर्क धीमा होने पर प्रॉक्सी का उपयोग करें।

पहला चरण: Node संस्करण की पुष्टि करना

bash

node --version

अपेक्षित परिणाम: v18.x.x या उससे अधिक प्रिंट होना चाहिए। यदि यह कम है, तो पहले इसे अपडेट करें।

दूसरा चरण: खाली डायरेक्टरी बनाना, Claude Code शुरू करना

bash

mkdir hello-video && cd hello-video
claude

अपेक्षित परिणाम: आप Claude Code इंटरफ़ेस में प्रवेश करेंगे और इनपुट बॉक्स दिखाई देगा।

तीसरा चरण: चौथे भाग में दी गई प्रॉम्प्ट को कॉपी करके पेस्ट करें

वही प्रॉम्प्ट "6 सेकंड, 1080p, 30fps, काले बैकग्राउंड पर सफेद HELLO शब्द, फेड-इन और ज़ूम होना, हरे रंग की चमक" का उपयोग करें।

अपेक्षित परिणाम: Claude Code फाइलें और कोड लिखना शुरू करेगा—जैसे package.json, src/Root.tsx आदि। काम करने के दौरान वह फ़ाइलें बनाने या कमांड चलाने के लिए आपसे अनुमति मांग सकता है—उसे अनुमति दें। काम पूरा होने पर वह आगे की कमांड बताएगा।

चौथा चरण: निर्भरताएँ इंस्टॉल करना और प्रीव्यू चलाना

bash

npm install
npx remotion studio

अपेक्षित परिणाम: npm install से निर्भरताएँ इंस्टॉल होंगी। remotion studio से Remotion Studio running at http://localhost:3000 प्रिंट होगा और ब्राउज़र में पेज खुलेगा, जहाँ आप काले बैकग्राउंड पर हरे रंग की चमक के साथ फेड-इन होने वाले HELLO शब्द का प्रीव्यू देख सकेंगे। प्रीव्यू दिखाई देना = आपकी प्रक्रिया सही काम कर रही है।

पहला बदलाव करवाना और सत्यापित करना

Claude Code टर्मिनल पर वापस आएं और लिखें:

text

把 HELLO 的淡入时间拉长，慢一点进来。

अपेक्षित परिणाम: Claude कोड में interpolate की वैल्यू बदल देगा (जैसे फ्रेम सीमा [0, 15] से [0, 45] करना)。 Remotion Studio खुद अपडेट हो जाएगा, और ब्राउज़र में देखने पर टेक्स्ट का आना धीमा हो जाएगा। यह देखना = आप समझ चुके हैं कि यह कैसे काम करता है—वीडियो संपादन के लिए बस बोलना ही काफी है।

छठा चरण: mp4 रेंडर करना

bash

npx remotion render HelloVideo out/hello.mp4

(आईडी को अपने अनुसार बदलें)。 अपेक्षित परिणाम: प्रोग्रेस बार पूरा होने पर Rendered ... → out/hello.mp4 प्रिंट होगा। out/hello.mp4 डायरेक्टरी में आपकी वीडियो फ़ाइल तैयार मिलेगी जिसे आप चला सकते हैं।

इन छह चरणों को पूरा करके, आपने एनवायरनमेंट सेटअप → आवश्यकता बताना → कोड लिखना → प्रीव्यू → बदलाव → रेंडरिंग की पूरी प्रक्रिया को खुद अनुभव कर लिया है। भविष्य में जटिल वीडियो बनाने के लिए भी यही प्रक्रिया अपनानी होगी—बस आवश्यकताएं अधिक विस्तृत होंगी और बदलावों के चक्र अधिक चलेंगे।

💡 संक्षेप में: छह चरण—node --version जांचना (>=18) → डायरेक्टरी बनाकर claude शुरू करना → आवश्यकता बताना → कोड लिखना → remotion studio प्रीव्यू देखना → बदलाव करवाना → remotion render से mp4 बनाना。 एक बार खुद करके देखना समझने के लिए सबसे अच्छा है।

06 किसे उपयोग करना चाहिए, किसे नहीं: पहले समझें

यह भाग बहुत व्यावहारिक है—सभी को इस टूल का उपयोग करने की आवश्यकता नहीं है, मैं स्पष्ट रूप से बताता हूँ कि यह किसके लिए उपयोगी है और किसके लिए समय की बर्बादी है।

संक्षेप में: Remotion + Claude Code उन वीडियो के लिए उपयुक्त है जो "डेटा-संचालित, प्रोग्रामेटिक, बैच जनरेशन और टेम्पलेट-आधारित" हैं; यह "वास्तविक शूटिंग, रचनात्मक संपादन और एक बार बनने वाले वीडियो" के लिए उपयुक्त नहीं है। यदि आप असमंजस में हैं, तो नीचे दी गई तालिका देखें:

परिदृश्य	उपयुक्त है या नहीं	क्यों
प्रत्येक उपयोगकर्ता के लिए व्यक्तिगत "वार्षिक सारांश" वीडियो बनाना (हजारों की संख्या में)	✅ बहुत उपयुक्त	एक ही टेम्पलेट में अलग-अलग डेटा भरकर स्वचालित बैच रेंडरिंग करना कोड का मजबूत पक्ष है
संख्या वृद्धि, ग्राफिक्स का बढ़ना जैसे डेटा विज़ुअलाइज़ेशन वीडियो	✅ बहुत उपयुक्त	डेटा-संचालित होने के कारण कोड से सटीक नियंत्रण संभव है, जो मैन्युअल कीफ़्रेम से बेहतर है
डेवलपर्स के लिए अपने उत्पादों के डेमो / इंट्रो वीडियो बनाना	✅ उपयुक्त	कोड हाइलाइटिंग, टर्मिनल टाइपिंग, लोगो एनिमेशन आसानी से बनाए जा सकते हैं, AE सीखने की आवश्यकता नहीं होती
ऐसा एनिमेशन जहाँ हर फ्रेम पर सटीक नियंत्रण और वर्जन ट्रैकिंग की आवश्यकता हो	✅ उपयुक्त	वीडियो कोड है, इसलिए इसे git में ट्रैक, diff और रिव्यू किया जा सकता
शादी या यात्रा के व्लॉग बनाना, जहाँ वास्तविक वीडियो क्लिप्स को जोड़ना हो	❌ उपयुक्त नहीं	यह संपादन का काम है, जिसके लिए Pr या CapCut का उपयोग करना चाहिए, Remotion यहाँ उपयोगी नहीं है
एक बार बनने वाला रचनात्मक म्यूज़िक वीडियो	❌ उपयुक्त नहीं	कोई पुन: प्रयोज्य टेम्पलेट न होने के कारण, कोड लिखने में लगने वाला समय संपादन से अधिक होगा
यदि आप कमांड लाइन और कोडिंग वातावरण सेटअप से बचना चाहते हैं	⚠️ उपयुक्त नहीं	Claude की मदद के बावजूद, Node इंस्टॉल करना और कमांड चलाना आवश्यक है

निर्णय लेने का पैमाना बहुत सरल है: क्या यह वीडियो "एक बार बनने वाली कलाकृति" है, या "डेटा बदलकर बार-बार उपयोग किया जाने वाला टेम्पलेट" है? पहले मामले के लिए संपादन सॉफ़्टवेयर का उपयोग करें, और दूसरे मामले के लिए Remotion का। डेमो इंट्रो जैसे वीडियो के लिए इसका उपयोग इसलिए सही है क्योंकि भविष्य में आपको अन्य टूल्स के लिए भी ऐसे वीडियो बनाने होंगे—एक बार कोड तैयार होने पर, केवल टेक्स्ट और रंग बदलकर नया वीडियो बनाया जा सकता है। यदि आपको केवल एक ही बार वीडियो बनाना है और भविष्य में इसकी आवश्यकता नहीं है, तो सामान्य संपादन सॉफ़्टवेयर अधिक तेज़ रहेगा।

एक और बात ध्यान रखें: रेंडरिंग में कंप्यूटर के संसाधनों और समय का उपयोग होता है。 एक सामान्य लैपटॉप पर 60 सेकंड के इफ़ेक्ट्स वाले वीडियो को रेंडर करने में दो से तीन मिनट लग सकते हैं—वीडियो जितना लंबा और जटिल होगा, समय उतना ही अधिक लगेगा और प्रोसेसर पर लोड बढ़ेगा। इसका एक उपाय यह है: Claude से कहें कि वह रेंडर कमांड में --concurrency पैरामीटर जोड़ दे जिससे मल्टी-थ्रेडिंग से काम तेज़ हो सके。

कुछ सामान्य गलतियों से बचने के टिप्स:

पहला, शुरुआत में ही बहुत जटिल वीडियो बनाने के लिए न कहें। यदि आप पहली बार में ही "पांच अलग-अलग सीन्स, अलग-अलग ट्रांज़िशन और म्यूज़िक सिंक" वाले वीडियो की मांग करेंगे, तो कोड उलझ सकता है और उसे ठीक करना कठिन होगा। सही तरीका है—पहले एक बहुत सरल संस्करण बनाएं, और फिर एक-एक करके सीन्स जोड़ते जाएं। यह जटिल कार्यों को विभाजित करके करने के नियम के समान है।

दूसरा, यदि spring एनिमेशन केवल पहला फ्रेम दिखाकर रुक जाए, तो घबराएं नहीं। कभी-कभी डिले के कारण स्प्रिंग फ़ंक्शन को मिलने वाली फ्रेम वैल्यू नेगेटिव हो जाती है जिससे एनिमेशन रुक जाता है। आपको कोडिंग समझने की आवश्यकता नहीं है, बस Claude को बताएं: "यह एनिमेशन केवल पहला फ्रेम दिखा रहा है, आगे नहीं बढ़ रहा", वह समझ जाएगा और कोड में आवश्यक सुरक्षा जांच (वैल्यू को नेगेटिव न होने देना) जोड़ देगा। इस संयोजन का यही लाभ है: आपको समस्याओं को खुद हल करने की आवश्यकता नहीं है, बस Claude को बताना है।

💡 संक्षेप में: निर्णय का पैमाना—"एक बार बनने वाले वीडियो" के लिए संपादन सॉफ़्टवेयर का उपयोग करें, और "डेटा बदलकर बार-बार उपयोग होने वाले टेम्पलेट्स" के लिए Remotion का; डेटा विज़ुअलाइज़ेशन, डेमो इंट्रो और बैच जनरेशन इसके मुख्य कार्यक्षेत्र हैं; लंबी रेंडरिंग के लिए Claude से --concurrency का उपयोग करवाएं।

07 सारांश

इस लेख में हमने Claude Code के एक अतिरिक्त और अनोखे उपयोग को देखा—Remotion की मदद से कोड के साथ वीडियो बनाना。

मुख्य बिंदुओं का सारांश:

विषय	विवरण	मुख्य बिंदु
Remotion क्या है	React के साथ वीडियो लिखने का फ्रेमवर्क	वीडियो = एक-एक फ्रेम की React इमेजेस, फ्लिप बुक की तरह
Claude Code का तालमेल	वीडियो कोड बन जाता है, और कोड लिखना उसका काम है	आप रचनात्मक निर्णय लेते हैं, वह प्रोजेक्ट सेटअप, एनिमेशन लिखना और बदलाव करता है
मुख्य अवधारणाएँ	फ्रेम, `interpolate`, `spring`	समझना पर्याप्त है, खुद लिखना आवश्यक नहीं; कुल फ्रेम = सेकंड × fps
काम करने का तरीका	आवश्यकता → कोड → प्रीव्यू → बदलाव → रेंडर	प्रीव्यू और बदलाव का चक्र चलना सामान्य है
किसके लिए उपयुक्त है	डेटा-संचालित, बैच जनरेशन और टेम्पलेट वीडियो	वास्तविक शूटिंग या एक बार बनने वाले रचनात्मक वीडियो के लिए नहीं

अब आप सक्षम होने चाहिए: यह समझने में कि Remotion कोड से वीडियो कैसे बनाता है (हर फ्रेम को React से रेंडर करना), यह Claude Code के साथ कैसे काम करता है (वीडियो कोड बन जाता है), कोड में फ्रेम / interpolate / spring क्या कर रहे हैं, अभ्यास के चरणों को चलाकर mp4 बनाना, और सबसे महत्वपूर्ण—यह तय करना कि यह आपके काम का है या नहीं। इस लेख का उद्देश्य यही है कि आपको इस तरीके के बारे में पता हो, ताकि आवश्यकता होने पर आप इसका उपयोग कर सकें।

इसके साथ ही यह लेख समाप्त होता है। और इसके समाप्त होने के साथ ही हमारा पूरा "Claude Code शुरुआती ट्यूटोरियल" भी अपने अंतिम पड़ाव पर पहुँच गया है। नीचे दिया गया संदेश इस यात्रा को पूरा करने वाले आपके लिए है।

08 अंत में: तिरेपन लेखों की यह यात्रा अब पूरी हुई

दोस्तों, यहाँ तक पहुँचने के लिए सबसे पहले: बधाई।

इस यात्रा को पीछे मुड़कर देखें—

पहला भाग: हमने समझा कि "Claude Code क्या है", एनवायरनमेंट सेटअप किया, अकाउंट कॉन्फ़िगर किया और पहला उदाहरण चलाया, ताकि आप इसे व्यावहारिक रूप से समझ सकें।

दूसरा भाग: हमने इसे VS Code, JetBrains, डेस्कटॉप और वेब संस्करणों से जोड़ा, और प्रोजेक्ट इनिशियलाइज़ेशन और प्रोजेक्ट स्ट्रक्चर को समझा ताकि आप इसे वास्तविक रूप से उपयोग कर सकें।

तीसरा भाग: हमने बातचीत की कला सीखी—कैसे पूछें, स्क्रीनशॉट कैसे अपलोड करें, CLAUDE.md कैसे लिखें, संदर्भ (context) कैसे प्रबंधित करें, अनुमति मोड और सुरक्षा सीमाएँ कैसे तय करें। इस भाग को समझने के बाद आप Claude Code के कुशल उपयोगकर्ता बन गए।

चौथा भाग: हमने पांच शक्तिशाली टूल्स को समझा—MCP, Subagent, Plugin, Memory, Skill और Agent teams, और यह जाना कि कब किसका उपयोग करना है।

पांचवां और छठा भाग: हमने गहराई से सेटिंग्स, आउटपुट स्टाइल, Hook, CLI, चेकपॉइंट, Chrome ऑटोमेशन, पैरेलल टास्क, Git, GitHub Actions, Agent SDK जैसी उन्नत तकनीकों को सीखा, ताकि आप इसका उपयोग पूरी दक्षता और स्वचालित रूप से कर सकें।

सातवां भाग: हमने सर्वोत्तम प्रथाओं, बचने योग्य गलतियों, अक्सर पूछे जाने वाले प्रश्नों (FAQ), शब्दावली और इस Remotion ट्यूटोरियल के साथ पूरी श्रृंखला को समेटा।

तिरेपन लेख—एक कमांड लाइन टूल से लेकर आपके काम को आसान बनाने वाले एक शक्तिशाली एजेंटिक इकोसिस्टम तक की यात्रा।

सच्चाई तो यह है—इस ट्यूटोरियल का उद्देश्य केवल कमांड्स को याद रखना नहीं था। कमांड्स बदल सकती हैं, नए वर्जन आ सकते हैं और नई सुविधाएँ जुड़ सकती हैं (आप आधिकारिक चेंजलॉग देख सकते हैं)। जो बात सबसे महत्वपूर्ण है वह है "AI के साथ मिलकर काम करने का दृष्टिकोण": इसे अपना सहायक मानना, स्पष्ट निर्देश देना, पुष्टि करना, नियमों को सहेजना और सुरक्षा का ध्यान रखना। यह दृष्टिकोण किसी भी कमांड से अधिक समय तक आपके काम आएगा।

अंत में, इसे अपनी यात्रा का अंत नहीं, बल्कि शुरुआत मानें। टूल केवल एक माध्यम है, वास्तविक कला तब निखरेगी जब आप इसका उपयोग किसी वास्तविक समस्या को हल करने के लिए करेंगे। कोई ऐसा प्रोजेक्ट शुरू करें जिसे आप हमेशा से बनाना चाहते थे, और Claude Code के साथ मिलकर उसे पूरा करें—उस अनुभव से आप इस ट्यूटोरियल से भी अधिक सीखेंगे。

इस कौशल को निखारने का सबसे अच्छा तरीका यही है: ट्यूटोरियल बंद करें, टर्मिनल खोलें, claude टाइप करें, और अपना काम शुरू करें।

फिर मिलेंगे, शुभकामनाएँ।

वीडियो बनाना (Remotion)〔वैकल्पिक पढ़ना〕 ​

01 पहले समझें: Remotion कैसे "कोड के साथ वीडियो बनाने" में सक्षम है ​

02 Remotion और Claude Code एक बेहतरीन संयोजन क्यों हैं ​

03 तीन प्रमुख अवधारणाएँ: समझें कि Claude द्वारा लिखा गया कोड क्या कर रहा है ​

फ्रेम (frame): वीडियो की गणना फ्रेम के आधार पर होती है ​

इंटरपोलेशन (interpolate): A से B तक के बदलाव को सुचारू बनाना ​

स्प्रिंग (spring): एनिमेशन को यांत्रिक के बजाय "लचीला (bounce)" बनाना ​

04 न्यूनतम प्रक्रिया का अवलोकन: खाली डायरेक्टरी से लेकर mp4 तक ​

पहला चरण: वातावरण (Environment) तैयार करना ​

दूसरा चरण: खाली डायरेक्टरी बनाना, Claude Code शुरू करना और आवश्यकता बताना ​

तीसरा चरण: प्रोजेक्ट सेटअप और कोड लिखना ​

चौथा चरण: प्रीव्यू देखना (सबसे महत्वपूर्ण चरण) ​

पांचवा चरण: असंतुष्ट होने पर बदलाव करवाना, संतुष्ट होने पर एक्सपोर्ट करना ​

05 व्यावहारिक अभ्यास: एक न्यूनतम उदाहरण चलाना और सत्यापित करना ​

06 किसे उपयोग करना चाहिए, किसे नहीं: पहले समझें ​

07 सारांश ​

08 अंत में: तिरेपन लेखों की यह यात्रा अब पूरी हुई ​

अनुशंसित पठन ​

वीडियो बनाना (Remotion)〔वैकल्पिक पढ़ना〕

01 पहले समझें: Remotion कैसे "कोड के साथ वीडियो बनाने" में सक्षम है

02 Remotion और Claude Code एक बेहतरीन संयोजन क्यों हैं

03 तीन प्रमुख अवधारणाएँ: समझें कि Claude द्वारा लिखा गया कोड क्या कर रहा है

फ्रेम (frame): वीडियो की गणना फ्रेम के आधार पर होती है

इंटरपोलेशन (interpolate): A से B तक के बदलाव को सुचारू बनाना

स्प्रिंग (spring): एनिमेशन को यांत्रिक के बजाय "लचीला (bounce)" बनाना

04 न्यूनतम प्रक्रिया का अवलोकन: खाली डायरेक्टरी से लेकर mp4 तक

पहला चरण: वातावरण (Environment) तैयार करना

दूसरा चरण: खाली डायरेक्टरी बनाना, Claude Code शुरू करना और आवश्यकता बताना

तीसरा चरण: प्रोजेक्ट सेटअप और कोड लिखना

चौथा चरण: प्रीव्यू देखना (सबसे महत्वपूर्ण चरण)

पांचवा चरण: असंतुष्ट होने पर बदलाव करवाना, संतुष्ट होने पर एक्सपोर्ट करना

05 व्यावहारिक अभ्यास: एक न्यूनतम उदाहरण चलाना और सत्यापित करना

06 किसे उपयोग करना चाहिए, किसे नहीं: पहले समझें

07 सारांश

08 अंत में: तिरेपन लेखों की यह यात्रा अब पूरी हुई

अनुशंसित पठन