Media Studio: 3D और HTML पेज

3D डायरेक्टर स्टेज: पहले प्रीविज़, फिर रेंडर

इसका एक ही काम है: वीडियो पर क्रेडिट खर्च करने से पहले जगह और दूरी के रिश्ते पक्के कर लेना।

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

क्लिप: स्टेज खोलें → कैमरा पिकर से मास्टर कैमरे और दो शॉट कैमरों से देखें → प्रीविज़ चलाएँ → डायरेक्टर व्यू में चारों ओर घुमाएँ → कैमरे में किसी कैमरे को सक्रिय सेट करें → फ़्रेम बोर्ड पर → मूवमेंट बोर्ड पर → बंद करें; अब बोर्ड पर एक स्टिल और प्रीविज़ वीडियो है

शुरुआत करना

1. नोड जोड़ें → 3D डायरेक्टर स्टेज (Beta, एजेंट बनाता है)। 3D बैज वाला एक नोड आता है; इसका एकमात्र बटन स्टेज खोलें है।
2. स्टेज खोलें दबाएँ। स्टेज फ़ुलस्क्रीन में खुलता है (पहली बार आपको "डायरेक्टर स्टेज खुल रहा है…" दिखता है): बाईं ओर स्टेज की अपनी बातचीत, दाईं ओर 3D व्यूपोर्ट।
3. नीचे बाईं ओर "अपने सीन का वर्णन करें..." में सीन बताएँ (कौन, कहाँ, वे कैसे चलते हैं, कैमरा कैसे चलता है) और भेजें। स्टेज एजेंट डिफ़ॉल्ट रूप से अल्ट्रा टियर इस्तेमाल करता है। अगर शुरुआत के लिए मदद चाहिए, तो खाली स्थिति में ये विकल्प मिलते हैं: कोई आइडिया सोचने में मदद करें / सीन इमेज से एक दुनिया बनाएँ / स्टोरीबोर्ड से प्रीविज़ बनाएँ / किसी URL से शुरू करें, जैसे प्रोडक्ट पेज।
4. एजेंट सीन को व्हाइट-मॉडल प्रीविज़ के रूप में बनाता है: लोग असली ऊँचाई वाले सिलेंडर या बॉक्स होते हैं, सेट धूसर ब्लॉक होता है — सिर्फ़ आयतन और मूवमेंट, कोई टेक्सचर या लाइटिंग नहीं। यह हर शॉट के लिए एक कैमरा बनाता है (और एक मास्टर कैमरा रखता है) और काम पूरा होने पर कुछ लाइनों में रिपोर्ट देता है। इस चरण में मीडिया क्रेडिट लगभग नहीं लगते, फिर भी इससे पता चल जाता है कि जगह ठीक से काम कर रही है या नहीं।

ब्रीफ़ का सबसे ज़रूरी वाक्य: साफ़-साफ़ लिखें "व्हाइट मॉडल, सिर्फ़ मूवमेंट और कैमरा"। इसके बिना एजेंट सेट को सजा सकता है (नियॉन, बारिश, रिफ़्लेक्शन), और तब वीडियो मॉडल मोशन के बजाय लुक की नकल करेगा। Night Run उदाहरण का ब्रीफ़ इससे शुरू होता है: "PURE WHITE-MODEL PREVIS: no colour, no textures, no materials…"।

खुलने पर आपको क्या दिखता है

ऊपर का बार (बाएँ से दाएँ)

कंट्रोल	यह क्या करता है
डायरेक्टर व्यू	फ़्री कैमरे पर वापस (चारों ओर घुमाने के लिए ड्रैग करें; होवर करने पर कीबोर्ड संकेत दिखता है: W A S D चलें, Q E नीचे / ऊपर, Shift तेज़)
कैमरा व्यू ▾ (कैमरा पिकर)	एजेंट के बनाए कैमरों की सूची; किसी कैमरे से देखने के लिए उसे चुनें; जब तक कोई कैमरा न हो, "पहले एक कैमरा जोड़ें" दिखता है
↻	स्टेज को उसकी फ़ाइलों से पुनः लोड करें
16:9 ▾	आस्पेक्ट: 16:9, 9:16, 1:1, 4:3, 21:9, 3:4
फ़्रेम बोर्ड पर	सक्रिय कैमरे से एक स्टिल रेंडर करता है (लंबी साइड पर 1920 px) और उसे बोर्ड पर इमेज नोड के रूप में जोड़ता है; टोस्ट "फ़्रेम बोर्ड में जोड़ दिया गया"
मूवमेंट बोर्ड पर	सक्रिय कैमरे से पूरी टाइमलाइन रेंडर करता है (लंबी साइड 1280 px, आपके ब्राउज़र में रेंडर होता है, स्थिति "वीडियो रेंडर हो रहा है…") और उसे वीडियो नोड के रूप में जोड़ता है; टोस्ट "वीडियो बोर्ड में जोड़ दिया गया"
ड्रॉ	फ़्रेम पर ड्रॉ करें और स्टिकी नोट लगाएँ; उन्हें कतार में रखें या सीधे एजेंट को भेजें (कतार में अधिकतम 10)
पैनल आइकन / ×	इंस्पेक्टर दिखाएँ / छिपाएँ; स्टेज बंद करें (Esc भी काम करता है)

दाईं ओर इंस्पेक्टर: कुछ भी न चुना हो तो इसमें लिखा होता है "जाँचने के लिए स्टेज पर किसी चीज़ पर क्लिक करें या नीचे की आउटलाइन से उसे चुनें। सीन बनाने, खिसकाने और रोशन करने के लिए एजेंट से कहें।" नीचे चार सेक्शन हैं जिन्हें समेटा जा सकता है:

• सेटिंग्स · n — इस खास स्टेज के स्विच, रंग और स्लाइडर (ये एजेंट के कोड से आते हैं और हर स्टेज में अलग होते हैं)।
• कैमरे · n — कैमरों की सूची (FOV के साथ)। किसी कैमरे से देखने के लिए उसकी पंक्ति पर क्लिक करें; चुनने पर इससे देखें, सक्रिय सेट करें (सक्रिय कैमरा वही है जिसे फ़्रेम / मूवमेंट बोर्ड पर इस्तेमाल करते हैं), FOV स्लाइडर और पोज़िशन / लक्ष्य दिखते हैं। हर पंक्ति में एक @ (चैट में मेंशन करें) होता है जो चैट में @camera:<id> डाल देता है, ताकि आप एजेंट को ठीक उसी कैमरे की ओर इशारा कर सकें। कैमरे सिर्फ़ एजेंट बनाता है — चैट में एक कैमरा माँगें।
• ऑब्जेक्ट · n — स्टेज पर मौजूद ऑब्जेक्ट। चुनने के लिए किसी पंक्ति पर, या व्यूपोर्ट में ऑब्जेक्ट पर क्लिक करें: दृश्यमान, पोज़िशन / रोटेशन / स्केल, आकार। इनमें भी @ होता है।
• एसेट्स — अपने कंप्यूटर से फ़ाइल अपलोड करें (GLB, टेक्सचर, HDR, ऑडियो…) (.glb / .gltf / .obj / .fbx, टेक्सचर, HDR, ऑडियो; हर फ़ाइल 100 MB तक); इस स्टेज पर इस स्टेज की फ़ाइलें दिखाता है, .glb फ़ाइलों के बगल में रखें के साथ; बोर्ड लाइब्रेरी · 3D बोर्ड की लाइब्रेरी में पहले से मौजूद 3D मॉडल दिखाता है, इनमें भी रखें और @ होते हैं।

नीचे प्लेयर: चलाएं / रोकें, लूप, समय का रीडआउट (उदाहरण के लिए 7.53 / 16.00), एक स्क्रबर, @ (इस पल को चैट में मेंशन करें, जो @time:7.5s डालता है — "अब तक कार मोड़ पार कर चुकी होनी चाहिए" कहना बस एक क्लिक दूर है) और फ़ुलस्क्रीन (कंट्रोल छिप जाते हैं; Esc उन्हें वापस लाता है)। टाइमलाइन डिफ़ॉल्ट रूप से 30 fps पर 10 s की होती है; एजेंट इसे बदल सकता है।

बाईं ओर की बातचीत में एजेंट का काम कार्ड के रूप में दिखता है: कैमरा मूव रेंडर करें · 0s–4s (एक कैमरे की अवधि को स्टेज के renders फ़ोल्डर में वीडियो के रूप में रेंडर करता है), बोर्ड पर एक्सपोर्ट करें (स्टिल / वीडियो का एक सेट " · 3D" शीर्षक वाले ग्रुप के रूप में, एक "हैंडऑफ़" नोट के साथ बोर्ड पर भेजता है) और परिणाम रिपोर्ट करें (रन का निष्कर्ष)। आप खुद फ़्रेम / मूवमेंट बोर्ड पर दबाएँ, तो बिना हैंडऑफ़ नोट के अकेले नोड बनते हैं।

प्रीविज़ से असली शॉट तक

1. बोर्ड पर, प्रीविज़ वीडियो नोड के ⊕ को ड्रैग करें → वीडियो; कोई ऐसा मॉडल चुनें जो मोशन रेफ़रेंस लेता हो (जैसे Seedance 2.5), प्रीविज़ वाले आस्पेक्ट के साथ।
2. प्रॉम्प्ट में बताएँ कि हर ब्लॉक क्या है, और उन्हें कैमरे के मुकाबले उनकी पोज़िशन से पहचानें ("कैमरे से सबसे दूर वाला सबसे चमकीला ब्लॉक भागती हुई काली सेडान है; कैमरे के सबसे पास वाला, जिसकी छत पर बार है, पुलिस क्रूज़र है, यह पूरे समय पीछे रहता है") — सिर्फ़ रंग से नहीं। वीडियो मॉडल प्रीविज़ के मोशन का पालन करता है, लेकिन भूमिकाएँ अपनी मर्ज़ी से तय करता है।
3. जनरेट करें। Night Run उदाहरण में चारों कैमरों में से हर एक ने एक प्रीविज़ क्लिप बनाई, हर क्लिप एक फ़ोटोरियल शॉट बनी, और वीडियो कंपोज़र में शॉट्स को काटकर 16 सेकंड का सीक्वेंस बनाया गया।

अपने 3D मॉडल इम्पोर्ट करना

Blender, C4D या किसी भी दूसरे टूल से एक्सपोर्ट की गई .glb फ़ाइल सीधे स्टेज पर आ जाती है: इंस्पेक्टर → एसेट्स → फ़ाइल अपलोड करें; अपलोड पूरा होते ही यह अपने-आप रख दी जाती है (" स्टेज पर है")। या पहले glb को बोर्ड पर एसेट के रूप में अपलोड करें और बोर्ड लाइब्रेरी · 3D से उसे रखें। स्टेज पर आने के बाद यह एजेंट के अपने ब्लॉक की तरह ही काम करती है — इसे चुनें, खिसकाएँ, फ़्रेम करें। Tripo और ऐसे ही दूसरे टूल से जनरेट किए गए 3D नोड भी इसी लाइब्रेरी में दिखते हैं।

स्टेज कब फ़ायदेमंद है: कई लोगों की ब्लॉकिंग, पीछा करने वाले सीन, अंदरूनी जगहों से होकर गुज़रना, ऐसा प्रोडक्ट जिसका आसपास के माहौल से तय रिश्ता हो, बिल्कुल एक ही कैमरे के कई वर्ज़न। साधारण पोर्ट्रेट या प्रोडक्ट क्लोज़-अप के लिए इसकी ज़रूरत नहीं है।

आधिकारिक उदाहरण: प्रेरणा पाएं में Night Run — car chase, 3D stage to Seedance ठीक इसी तरह बनाया गया था — व्हाइट स्टेज पर चार कैमरा मूव पक्के किए गए, फिर असली शॉट्स के लिए Seedance को भेजे गए। Florida House — floor plan to 3D cutaway एक और इस्तेमाल दिखाता है: एक फ़्लोर प्लान को टॉप-डाउन रेंडर में बदला गया, फिर स्टेज पर दीवार-दर-दीवार फ़र्निश्ड 3D कटअवे के रूप में दोबारा बनाया गया, और टॉप-डाउन व 45° बर्ड्स-आई स्टिल के रूप में एक्सपोर्ट किया गया।

30 सेकंड में डायरेक्टर स्टेज:

3D वर्ल्ड और रिगिंग

• 3D वर्ल्ड (नोड जोड़ें) / किसी इमेज पर 3D वर्ल्ड जनरेट करें: एक ऐसी जगह जिसे आप चारों ओर घुमाकर देख सकें और जिसके अंदर चल सकें, किसी विवरण या तस्वीर से जनरेट की गई; परिणाम वॉक-थ्रू व्यू वाला एक 3D नोड होता है।

• स्केलेटन रिग करें: एनिमेशन के लिए अपने-आप स्केलेटन रिगिंग। दायरा अहम है: यह सिर्फ़ Tripo से जनरेट किए गए मॉडल पर, और सिर्फ़ कैरेक्टर / जीवों पर काम करता है; अपलोड किए गए मॉडल, 3D वर्ल्ड और पहले से रिग किए गए परिणाम रिग नहीं किए जा सकते।

HTML पेज: तीन प्रकार, हर एक का अपना Studio

HTML नोड इमेज नहीं, बल्कि एक ऐसा पेज बनाता है जो चलता है और प्रतिक्रिया देता है। नोड जोड़ें → HTML (Beta) एक खाली कार्ड रखता है जिसका एकमात्र बटन स्टूडियो खोलें है; पहली बार खोलने पर पेज का प्रकार चुनें पूछता है:

प्रकार	डायलॉग में दिया गया विवरण	कैनवास	इसके Studio का नाम
पोस्टर	एक स्टिल डिज़ाइन। इसके टेक्स्ट और लेयर सीधे संपादित किए जा सकते हैं।	1080×1620	Design Studio
मोशन	एक HTML एनिमेशन: टाइमलाइन पर टेक्स्ट, आकृतियाँ और ट्रांज़िशन, वीडियो में रेंडर किए गए। — डायलॉग इसकी क्षमता को कम आँकता है; यह बोर्ड का After Effects है, नीचे देखें	1920×1080	Motion Studio
इंटरैक्टिव फ़िल्म	एक ब्रांचिंग वीडियो: दर्शक फ़ैसले वाले पलों पर विकल्प चुनते हैं। ब्राउज़र में चलता है और Steam व मोबाइल पर एक्सपोर्ट होता है।	1920×1080	Interactive Studio

हर कार्ड होवर करने पर एक छोटा प्रीव्यू चलाता है। सिर्फ़ इंटरैक्टिव फ़िल्म में दूसरा चरण होता है, फ़िल्म की UI थीम चुनें: चीनी शास्त्रीय (स्याही और सुनहरी लाह वाली नक्काशी, सिंदूरी मुहरें — ऐतिहासिक ड्रामा, वूशिया, दरबारी साज़िश), विज्ञान-कथा (गनमेटल पैनल, सियान लाइट बार — अंतरिक्ष, साइबरपंक), चीनी फ़ैंटेसी (पतली सुनहरी रेखाएँ, जामुनी नगों वाले अलंकरण, ताबीज़ वाली मुहरें — साधना, हाई फ़ैंटेसी, मिथक) और आधुनिक (फ़्रॉस्टेड ग्लास, बारीक बॉर्डर, नियॉन-पिंक एक्सेंट, चैट-बबल वाले विकल्प — शहरी, रोमांस, हॉरर, क्राइम)। थीम एक बार तय होती है; इसकी किट फ़िल्म के थीम फ़ोल्डर में जाती है और बाद में Studio में इसका स्टाइल बदला जा सकता है।

विकल्प चुनते ही Studio खुल जाता है ("स्टूडियो खुल रहा है…"), पेज पर एक लाइन के प्लेसहोल्डर के साथ, जैसे "चैट में अपने पोस्टर का वर्णन करें"। खाली Studio में कुछ शुरुआती विकल्प मिलते हैं जो कंपोज़र भर देते हैं: पोस्टर के लिए छोटे ब्रीफ़ से लॉन्च पोस्टर / मेरी कॉपी को टाइपोग्राफ़िक पोस्टर बनाएँ / मौजूदा पोस्टर का स्टाइल बदलें; मोशन के लिए इस पेज को पढ़ने के क्रम में एनिमेट करें / 6 सेकंड का टाइटल कार्ड / मोशन को नैरेशन के साथ टाइम करें; फ़िल्मों के लिए मेरी क्लिप से स्टोरी ग्राफ़ लिखें / जिन सेगमेंट की अभी ज़रूरत है उनकी योजना बनाएँ / कवर और विकल्पों का स्टाइल बदलें।

एक चौथा प्रकार भी है, ऐप (एक अपने-आप में पूरा इंटरैक्टिव पेज: कोई गेम, टूल या प्रोटोटाइप)। यह डायलॉग में नहीं है — जब किसी काम को इसकी ज़रूरत होती है तो एजेंट इसे बनाता है — और इसका Studio App Studio है।

नोड टूलबार प्रकार के अनुसार बदलता है (फ़ुलस्क्रीन और हटाएं हमेशा दाईं ओर होते हैं):

प्रकार	टूलबार
पोस्टर	लेयर्स एक्सपोर्ट करें, Design Studio
मोशन	रेंडर करें, Motion Studio
इंटरैक्टिव फ़िल्म	बिल्ड एक्सपोर्ट करें, बिल्ड डाउनलोड करें (बिल्ड बन जाने के बाद), Interactive Studio
ऐप	App Studio

जिस नोड का एजेंट-लिखित ब्रीफ़ अभी चला नहीं है, उस पर पहले चलाएं दिखता है। फ़ुलस्क्रीन पेज चलाता है (पोस्टर / फ़िल्म / ऐप) या कंपोज़िशन प्ले करता है (मोशन)।

पोस्टर: काम पूरा होने के बाद भी एक डिज़ाइन फ़ाइल

क्लिप: पोस्टर नोड → लेयर्स एक्सपोर्ट करें → बोर्ड पर एक लेयर दस्तावेज़ आता है → लेयर संपादित करें से लेयर एडिटर खुलता है → कोई लेयर बदलें → कैनवास में एक्सपोर्ट करें

Design Studio के अंदर

Design Studio फ़ुलस्क्रीन में खुलता है: बाईं ओर पोस्टर की अपनी बातचीत, दाईं ओर पेज।

• पहली टैब पंक्ति: चैट छिपाएँ / चैट दिखाएँ, डिज़ाइन फ़ाइलें, फ़ाइल टैब, एजेंट के सवाल पूछने पर प्रश्न; दाईं ओर एक्सपोर्ट ▾ (इमेज एक्सपोर्ट करें, PSD एक्सपोर्ट करें — पोस्टर की हर लेयर के लिए एक लेयर — और बोर्ड में लेयर्स एक्सपोर्ट करें) और प्रस्तुत करें।
• दूसरी पंक्ति: प्रीव्यू पुनः लोड करें, ट्वीक्स (एजेंट से एडजस्ट किए जा सकने वाले कंट्रोल माँगें), टिप्पणी (पेज के किसी तत्व पर टिप्पणी करें), संपादित करें (दाईं ओर एक ड्रॉअर: कैनवास पर किसी भी चीज़ पर क्लिक करके उसकी टाइपोग्राफ़ी, साइज़ और बॉक्स बदलें), ड्रॉ (निशान लगाएँ और एजेंट को भेजें), ज़ूम।
• लेयर्स पैनल: पोस्टर की हर लेयर (बिलिंग ब्लॉक, शीर्षक, टैगलाइन, की आर्ट…), हर एक में लेयर छिपाएँ / लेयर दिखाएँ के लिए आँख वाला आइकन; इमेज लेयर में छवि पुनः जनरेट करें मिलता है।
• बदलाव सीधे पेज में लिखे जाते हैं; कोई सेव बटन नहीं है। पूरा स्टाइल अलग चाहिए, तो चैट में कहें।

लेयर एक्सपोर्ट करें और लेयर एडिटर में फ़िनिश करें

1. बोर्ड पर वापस आकर, पोस्टर नोड चुनें और लेयर्स एक्सपोर्ट करें दबाएँ (कार्ड पर "लेयर एक्सपोर्ट हो रही हैं…" दिखता है)।
2. पूरा होने पर — "लेयर एक नए नोड में एक्सपोर्ट कर दी गईं" — पोस्टर के बगल में " layers" नाम का एक लेयर दस्तावेज़ आ जाता है, पोस्टर की हर लेयर के लिए एक लेयर (अधिकतम 128)। जिन लेयर को रास्टराइज़ नहीं किया जा सकता (जैसे SVG-फ़िल्टर वाला फ़िल्म ग्रेन), उन्हें "N लेयर छोड़ दी गईं: …" के साथ छोड़ दिया जाता है।
3. Photoshop जैसे लेयर एडिटर के लिए इसका लेयर संपादित करें दबाएँ: क्रम, अपारदर्शिता, ब्लेंड मोड, रीटचिंग, क्रॉपिंग, टाइपोग्राफ़ी — देखें बोर्ड और इमेज टूल।
4. परिणाम को नई इमेज के रूप में वापस लाने के लिए कैनवास में एक्सपोर्ट करें, या PNG / PSD डाउनलोड करें।

यह क्रम — पेज → लेयर्स एक्सपोर्ट करें → लेयर एडिटर → वापस बोर्ड — Media Studio में सबसे ज़्यादा अनदेखा और सबसे ज़्यादा काम का है: AI से बने लेआउट को दोबारा जनरेट करने के बजाय किसी डिज़ाइन फ़ाइल की तरह संपादित किया जा सकता है।

मोशन पेज: बोर्ड का After Effects

मोशन नोड "कोई छोटा-सा एनिमेशन" नहीं है। यह फ़्रेम-दर-फ़्रेम सटीकता से रेंडर होने वाली कंपोज़िशन है: Motion Studio एजेंट इसे HTML में लिखता है, और रेंडर करें इसे फ़्रेम-दर-फ़्रेम वीडियो में बदल देता है। बोर्ड पर यह वह पोस्ट-प्रोडक्शन पास है जो जनरेट की गई क्लिप खुद नहीं संभाल सकती — जब भी किसी फ़्रेम को एकदम सटीक होना हो, काम यहीं होता है:

• असली या जनरेट किए गए फ़ुटेज पर कॉपी, संख्याएँ, लोगो और ब्रांड टाइपोग्राफ़ी;
• टाइटल कार्ड, शीर्षक, लोअर थर्ड, एंड कार्ड;
• एक्सप्लेनर और डेटा स्टोरी: बार अक्ष से बढ़ते हैं, लाइनें अपने रास्ते पर खिंचती हैं, संख्याएँ अपने मान तक गिनती करती हैं;
• प्रोमो और प्रोडक्ट पीस, लॉन्च फ़िल्में, प्रोडक्ट अपडेट, HUD डेमो, ट्रेलर: ग्राफ़िक्स, टाइपोग्राफ़ी और इंटरफ़ेस मोशन से बनी पूरी रचनाएँ;
• नैरेशन ट्रैक से शब्द-दर-शब्द सिंक होने वाले कैप्शन (हाइलाइट, कराओके पिल, फ़ुलस्क्रीन स्लैम, नियॉन, ग्रेडिएंट फ़िल — या सादा उपशीर्षक बार और कॉर्पोरेट लोअर थर्ड);
• मास्क और ब्लेंड मोड, और सीन के बीच WebGL शेडर ट्रांज़िशन (क्रॉसफ़ेड, वाइप, रिपल, शटर, ग्लिच, ब्लर-स्वैप, फ़्लैश…);
• Three.js 3D: मॉडल, पार्टिकल, लाइट और कैमरा मूव — ऐसे 3D शॉट के लिए जिसे वीडियो मॉडल के अंदाज़े पर छोड़ने के बजाय फ़्रेम तक नियंत्रित करना हो;
• Lottie एनिमेशन, कई सीन वाली रचनाएँ (हर सीन के लिए एक सब-कंपोज़िशन) और पैरामीटर वाले टेम्पलेट (शीर्षक, रंग और लंबाई वेरिएबल के रूप में)।

सामग्री कैसे जुड़ती है: बोर्ड के वीडियो / इमेज / ऑडियो नोड को मोशन नोड से जोड़ें। वीडियो नीचे का पूरे फ़्रेम वाला फ़ुटेज बन जाता है (इसमें धीमा पुश या ऐसा ही कोई मूव हो सकता है), इमेज लेयर बन जाती हैं, ऑडियो नैरेशन या म्यूज़िक बेड बन जाता है — और रचना की रफ़्तार आवाज़ के हिसाब से तय होती है: ऑडियो नोड जुड़ा हो तो क्लिप की लंबाई और हर लाइन के दिखने का पल आवाज़ के अनुसार चलता है।

होम पेज के प्रेरणा पाएं से नौ HTML मोशन रचनाओं का एक कट (हर एक 5 सेकंड): ड्रोन फ़ुटेज पर एक HUD, एक लॉन्च फ़िल्म जिसका प्रोडक्ट UI मोशन में बनता है, लोगो में बदलते आइकन, स्क्रीन पर संख्याओं वाला एक प्रोडक्ट अपडेट, फ़ुटेज पर एक डेटा रिपोर्ट, एक नॉलेज वीडियो में खुद बनते चार्ट, 1:1 का मार्केटप्लेस वीडियो, एक पिक्सेल-गेम डेमो और VHS स्टाइल का एक ट्रेलर — हर एक मोशन नोड से रेंडर किया गया।

मोशन कब इस्तेमाल करें, और कब नहीं

आप चाहते हैं	इस्तेमाल करें
सटीक टेक्स्ट, संख्याएँ, लोगो या UI; टाइटल कार्ड, लोअर थर्ड, कैप्शन	मोशन
एक्सप्लेनर, डेटा रिपोर्ट, प्रोडक्ट अपडेट, लॉन्च फ़िल्म, HUD, ट्रेलर, मार्केटप्लेस वीडियो	मोशन (पूरी रचना)
पहले से जनरेट की गई क्लिप, साथ में शीर्षक / ब्रांड टाइपोग्राफ़ी / शब्द-दर-शब्द सिंक कैप्शन / डेटा ओवरले	मोशन: उस वीडियो नोड को जोड़ें, एक नया वीडियो नोड रेंडर करें; मूल क्लिप जस की तस रहती है
इंसानी अभिनय, प्राकृतिक दृश्य, लेंस का मिज़ाज, रोशनी	वीडियो जनरेशन; फिर जब टेक्स्ट सटीक होना ज़रूरी हो तो एक मोशन पास
सिर्फ़ क्लिप जोड़ना, उपशीर्षक बार, संगीत, एक्सपोर्ट	वीडियो कंपोज़र ज़्यादा तेज़ है
ऐसा स्टिल लेआउट जिसे आप संपादित करते रह सकें	पोस्टर

शुरुआत करना

एक ही जगह पहुँचने के तीन रास्ते:

1. एजेंट को बताएँ (आम तरीक़ा): रचना का वर्णन करें, "HTML मोशन पेज के रूप में" कहें, और प्रोडक्ट शॉट, फ़ुटेज, लोगो और नैरेशन जोड़ें या @-मेंशन करें। एजेंट पहले स्क्रिप्ट / स्पेक एक टेक्स्ट नोड में लिखता है, फिर मोशन नोड बनाकर उसे Studio को सौंपता है; रेंडर मोशन नोड के बगल वाला वीडियो नोड होता है, और जब आपको मास्टर चाहिए तो कंपोज़र SFX मिलाता है या ओपनर जोड़ता है — होम पेज के नौ उदाहरणों का ढाँचा एक जैसा है: स्पेक टेक्स्ट → मोशन नोड → रेंडर किया गया वीडियो → कंपोज़र।
2. नोड खुद रखें: नोड जोड़ें → HTML → स्टूडियो खोलें → मोशन, फिर Studio की चैट में ब्रीफ़ लिखें (लंबाई, सीन, हर सीन में कौन-सा टेक्स्ट दिखे, ब्रांड के रंग, SFX / नैरेशन)।
3. किसी उदाहरण से शुरू करें: होम पेज पर प्रेरणा पाएं के अंतर्गत कोई भी HTML मोशन कार्ड → कॉपी करें और जारी रखें, फिर अपने प्रोडक्ट का नाम, संख्याएँ और रंग डाल दें (हर उदाहरण में आगे बढ़ाने के लिए एक लाइन का प्रॉम्प्ट होता है; देखें रेसिपी 16)।

Motion Studio कैसे काम करता है

Motion Studio बातचीत से चलता है। ड्रैग करने के लिए कोई कीफ़्रेम टाइमलाइन नहीं है — एजेंट आपके विवरण के आधार पर फ़ुटेज, टेक्स्ट, ग्राफ़िक्स और ट्रांज़िशन को टाइमलाइन पर व्यवस्थित करता है; आप प्रीव्यू देखते हैं (प्रोग्रेस बार से किसी भी पल पर जा सकते हैं) और एक वाक्य से चीज़ें बदलते हैं।

क्लिप: ड्रोन फ़ुटेज पर HUD बदलना — Motion Studio खोलें → 12 s पर टारगेट लॉक तक चलाएँ → "एम्बर रेटिकल और नीचे बाईं ओर कॉन्फ़िडेंस रीडआउट" माँगें → एजेंट का काम पूरा होने पर प्रीव्यू पुनः लोड करें और फिर से चलाएँ → बंद करें → रेंडर करें → बोर्ड पर वीडियो नोड उसी जगह अपडेट हो जाता है

1. कोई मोशन नोड चुनें और Motion Studio दबाएँ (या कार्ड पर मौजूद बटन)। बातचीत बाईं ओर है (कंपोज़र में लिखा होता है "इस पेज के लिए आप जो मोशन चाहते हैं उसका वर्णन करें..."); प्लेयर दाईं ओर है, जिसके नीचे चलाएं, स्क्रब करने योग्य प्रोग्रेस बार, आवाज़ बंद करें और प्लेबैक की गति हैं।
2. जिस पल को बदलना है वहाँ तक स्क्रब करें और बदलाव बताएँ — "हेडलाइन को फ़ेड करने के बजाय बाईं ओर से स्लाइड करके लाओ; तीनों बड़ी संख्याओं को दो-दो सेकंड में गिनते हुए बढ़ाओ; लॉक रेटिकल को एम्बर करो; आखिरी लॉकअप को एक सेकंड ज़्यादा रोको"। एजेंट संक्षेप में बताता है कि उसने कौन-से क्यू पॉइंट बदले।
3. प्रीव्यू पुनः लोड करें दबाएँ और फिर से चलाएँ। ऊपर के बार में ड्रॉ (जगह पर गोला बनाकर एजेंट को भेजें) और बंद करें भी हैं।
4. Studio बंद करें, नोड चुनें और रेंडर करें दबाएँ: कार्ड पर "रेंडर हो रहा है…" और फिर "मोशन रेंडर हो गया" दिखता है, और उसी नाम का एक वीडियो नोड बगल में आ जाता है (या अपडेट हो जाता है)। दोबारा रेंडर करने पर वही वीडियो नोड उसी जगह अपडेट होता है — रेंडर एक के ऊपर एक जमा नहीं होते।
5. वह वीडियो नोड कट, मिक्स या ओपनर के लिए सीधे वीडियो कंपोज़र में जा सकता है।

जानने लायक बातें: मोशन नोड से कोई ऑडियो नोड जोड़ें तो रेंडर उसे नैरेशन मानता है और उसकी लंबाई से मेल खाता है; एक साथ दो रेंडर चलते हैं, हर एक लगभग 20 मिनट तक; एक मोशन पेज में अधिकतम 60 एलिमेंट नोड हो सकते हैं। पेज के अपने SFX, संगीत और नैरेशन रेंडर में शामिल होते हैं; और साउंड की परतें जोड़नी हों तो रेंडर किए गए वीडियो और ऑडियो नोड को एक साथ कंपोज़र में डालें। भारी कंपोज़िशन (3D, शेडर ट्रांज़िशन, कई सीन वाली लंबी रचनाएँ) के लिए Studio का मॉडल टियर अल्ट्रा या Mega पर सेट करें। जब Slides / Design पेज नैरेशन वाले वीडियो में बदलते हैं, तो हर पेज ऐसा ही एक मोशन नोड होता है — उसे बदलने के लिए उस पेज का Motion Studio खोलें, फिर सिर्फ़ उसी पेज को दोबारा रेंडर करें।

30 सेकंड में मोशन पेज:

इंटरैक्टिव फ़िल्में

इंटरैक्टिव फ़िल्म 5–15 सेकंड के सेगमेंट का एक ग्राफ़ है: दर्शक हर फ़ैसले वाले पल पर विकल्प चुनते हैं, कहानी शाखाओं में बँटती है, और कई अंतों में से किसी एक पर खत्म होती है।

क्लिप: फ़िल्म नोड चुनें → फ़ुलस्क्रीन से प्लेयर खुलता है → कवर → नया गेम → पहला सेगमेंट → फ़ैसले वाले पल पर चार विकल्प आते हैं → एक चुनें → कहानी शाखा में बँटती है → स्टोरी ट्री फ़्लोचार्ट दिखाता है → मेन्यू से पॉज़ कार्ड खुलता है → फिर से शुरू करें

इसे बनाना

• स्क्रिप्ट, सेगमेंट और शाखाएँ, सब प्रोजेक्ट में रहते हैं: story.json में शुरुआत, हर सेगमेंट का वीडियो, उपशीर्षक (.vtt), 1–6 विकल्प और आगे क्या आता है, साथ ही अध्याय, कैरेक्टर, उपलब्धियाँ और UI स्ट्रिंग होती हैं।
• सबसे आसान रास्ता इंटरैक्टिव फ़िल्म गेम स्किल है ("किसी कहानी को ब्रांचिंग इंटरैक्टिव फ़िल्म में बदलें: दर्शक फ़ैसले वाले पलों पर विकल्प चुनते हैं; कैनवास पर प्रीव्यू करें, Steam और मोबाइल पर एक्सपोर्ट करें।"): एक कहानी से एजेंट स्टोरी ग्राफ़ लिखता है, अभी ज़रूरी सेगमेंट की सूची बनाता है, उन्हें जनरेट करता है, और उन्हें प्लेयर से जोड़ देता है। बोर्ड पर आपको हर शाखा के लिए एक वीडियो नोड और एक "स्टोरी ट्री" टेक्स्ट नोड दिखता है।
• चैट के ज़रिए कवर, विकल्पों की कॉपी और थीम बदलने के लिए Interactive Studio इस्तेमाल करें।

प्लेयर के अंदर

• कवर: शीर्षक और टैगलाइन; चलाएं से टाइटल मेन्यू खुलता है: जारी रखें / नया गेम / अध्याय / लोड करें / अंत (n/4 अनलॉक) / उपलब्धियाँ / कैरेक्टर / सेटिंग्स / क्रेडिट्स।
• चलते समय: ऊपर बाईं ओर अध्याय का नाम; ऊपर दाईं ओर चार बैज — अध्याय / अंत / स्टोरी ट्री / मेन्यू; नीचे दाईं ओर CC (उपशीर्षक), 1.0× (गति), फ़ुलस्क्रीन। पहली बार देखते समय स्किप नहीं किया जा सकता ("पहली बार देखते समय स्किप नहीं"); देखे जा चुके सेगमेंट पर ⏭ देखा हुआ स्किप करें मिलता है।
• फ़ैसले वाले पल: किसी सेगमेंट के खत्म होने से कुछ सेकंड पहले विकल्प कार्ड आ जाते हैं (चाहें तो काउंटडाउन के साथ — समयबद्ध फ़ैसला; समय खत्म होने पर डिफ़ॉल्ट विकल्प चुन लिया जाता है: "चुप रहना भी एक विकल्प है")।
• स्टोरी ट्री: पूरी फ़िल्म का फ़्लोचार्ट, जिसमें देखे गए नोड रोशन रहते हैं, साथ में सब फ़िट करें / मौजूदा जगह खोजें / यहाँ से दोबारा देखें।
• मेन्यू (पॉज़ कार्ड): फिर से शुरू करें / सीन दोबारा चलाएँ / अध्याय / सेव करें / लोड करें / सेटिंग्स / टाइटल पर वापस; तीन सेव स्लॉट और साथ में ऑटोसेव।
• सेटिंग्स: वॉल्यूम, साउंड इफ़ेक्ट, प्लेबैक की गति, उपशीर्षक, उपशीर्षक स्टाइल (आउटलाइन / बार), वक्ता के नाम, उपशीर्षक का आकार, देखे गए सेगमेंट, सब डाउनलोड करें, डाउनलोड और सेव मिटाएँ, फ़ुलस्क्रीन।

पैकेजिंग और पब्लिश करना

1. नोड चुनें और बिल्ड एक्सपोर्ट करें दबाएँ: पॉपओवर में "बिल्ड तैयार हो रहा है…", "मीडिया अपलोड हो रहा है n/total", "बिल्ड पैकेज हो रहा है…" दिखता है।
2. काम पूरा होने पर बटन बिल्ड डाउनलोड करें बन जाता है, और पॉपओवर में लिखा आता है "zip डाउनलोड करें और इसे डेस्कटॉप ऐप GenCode को सौंप दें। यह वेब, डेस्कटॉप (Steam) और मोबाइल के लिए इसे पैकेज और पब्लिश करने में आपकी मदद करेगा।" (GenCode डाउनलोड पेज से लिंक होता है।)
3. zip में app/ (वेब बिल्ड: index.html, runtime, story.json, manifest), desktop/ (Steam डिपो स्क्रिप्ट वाला एक Electron प्रोजेक्ट), mobile/ (iOS और Android के लिए एक Capacitor प्रोजेक्ट) और एक README होता है। पब्लिश करने का काम खुद GenCode में होता है — कंटेंट जनरेट करना और उसे होस्ट करना जान-बूझकर अलग रखे गए हैं।

बोर्ड एक स्ट्रीम्ड बिल्ड एक्सपोर्ट करता है (मीडिया क्लाउड से लाया जाता है), इसलिए प्रोजेक्ट को पहले सार्वजनिक रूप से शेयर करना ज़रूरी है; वरना आपको दिखता है "प्रोजेक्ट सार्वजनिक रूप से शेयर नहीं है: जब तक यह शेयर न हो, स्ट्रीम्ड बिल्ड मीडिया नहीं ला सकते"।

आधिकारिक उदाहरण The Lighthouse Signal — interactive film चार अंतों वाला एक पूरा प्रोजेक्ट है; इसके सिर्फ़ पढ़ने योग्य बोर्ड पर हर शाखा का सेगमेंट और स्टोरी ट्री दिखता है।

30 सेकंड में इंटरैक्टिव फ़िल्में:

अक्सर पूछे जाने वाले सवाल

डायरेक्टर स्टेज, सीधे वीडियो जनरेट करने से कैसे अलग है?

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

क्या मैं अपने 3D मॉडल इस्तेमाल कर सकता/सकती हूँ?

हाँ। इंस्पेक्टर → एसेट्स → फ़ाइल अपलोड करें में .glb (और gltf / obj / fbx, टेक्सचर, HDR, ऑडियो; हर फ़ाइल 100 MB तक) अपलोड करें, या बोर्ड लाइब्रेरी · 3D से कोई मॉडल रखें। हालाँकि, स्केलेटन रिग करें सिर्फ़ Tripo से जनरेट किए गए मॉडल पर काम करता है — ये दोनों अलग चीज़ें हैं।

क्या फ़्रेम बोर्ड पर वही व्यू कैप्चर करता है जो मैं देख रहा/रही हूँ?

नहीं — यह सक्रिय कैमरे से रेंडर करता है। जिस कैमरे से आप देख रहे हैं उसे कैप्चर करने के लिए, कैमरे में उसे चुनें और सक्रिय सेट करें दबाएँ।

क्या HTML पेज बनने के बाद संपादित किया जा सकता है?

हाँ, कई स्तरों पर: पेज को उसके Studio में (चैट, संपादित करें ड्रॉअर, लेयर्स पैनल); पिक्सेल-स्तर के काम के लिए, लेयर्स एक्सपोर्ट करें इसे लेयर एडिटर के लिए एक लेयर दस्तावेज़ में बदल देता है।

Motion Studio में टाइमलाइन क्यों नहीं है?

यह बातचीत से चलता है: एजेंट आपके विवरण से मोशन व्यवस्थित करता है, आप प्रीव्यू देखते हैं और एक वाक्य से उसे बदलते हैं; टिप्पणी करने से पहले प्लेयर के प्रोग्रेस बार से किसी भी पल पर जा सकते हैं। फ़्रेम-स्तर के नियंत्रण के लिए, ब्रीफ़ में समय लिखें ("बार तीसरे सेकंड पर बढ़ें", "12 सेकंड पर लॉक") और एजेंट उन्हें सेकंड तक सटीक रखेगा — यही इसे वीडियो मॉडल से अलग करता है: फ़्रेम लिखा जाता है, अंदाज़े से नहीं बनता।

क्या इंटरैक्टिव फ़िल्म पब्लिश की जा सकती है?

हाँ — बिल्ड एक्सपोर्ट करें, फिर GenCode से वेब, डेस्कटॉप (Steam) और मोबाइल पर पब्लिश करें।

समस्या निवारण

स्टेज या Motion Studio नहीं खुलता

"इस अकाउंट के लिए 3D डायरेक्टर स्टेज चालू नहीं है" / "इस अकाउंट के लिए Motion Studio चालू नहीं है" का मतलब लगभग हमेशा यह होता है कि वर्कस्पेस एडमिन ने Media Studio बंद कर दिया है (वही स्विच जो बोर्ड के लिए है), या प्रोजेक्ट पर आपके पास लिखने की अनुमति नहीं है (सिर्फ़ पढ़ने योग्य शेयर)। सिर्फ़ पढ़ने योग्य प्रोजेक्ट में यह भी दिखता है: "यह स्टेज अभी सेट अप नहीं हुआ है। इसके मालिक से इसे एक बार खोलने के लिए कहें।"

स्टेज खाली है / "स्टेज लोड नहीं हो सका।"

पुनः लोड करें दबाएँ; अगर इससे मदद न मिले, तो एजेंट से इसे ठीक करने को कहें — एजेंट अपना कोड खुद जाँचता है।

मूवमेंट बोर्ड पर वाला वीडियो काला है या बहुत छोटा है

ब्राउज़र में रेंडर होते समय टैब न बदलें; सक्रिय कैमरा और टाइमलाइन की लंबाई जाँचें (प्लेयर की दाईं ओर कुल समय)।

एक्सपोर्ट की गई लेयर पोस्टर से मेल नहीं खातीं

लेयर्स एक्सपोर्ट करें हर एक्सपोर्ट किए जा सकने वाले तत्व को रास्टराइज़ करता है; SVG फ़िल्टर और कुछ ब्लेंड इफ़ेक्ट अलग लेयर नहीं बन सकते, इसलिए उन्हें छोड़ दिया जाता है और कार्ड पर "N लेयर छोड़ दी गईं" लिखा आता है।

रेंडर कुछ नहीं करता / "पहले से रेंडर हो रहा है"

एक नोड पर एक समय में एक रेंडर और एक प्रोजेक्ट में दो; "रेंडर हो रहा है…" हटने का इंतज़ार करें। पोस्टर में रेंडर करने के लिए कोई मोशन नहीं होता — उसके लिए लेयर्स एक्सपोर्ट करें चाहिए।