Rive क्या है? इंटरैक्टिव एनिमेशन आसान भाषा में

Rive क्या है?

Rive इंटरैक्टिव ग्राफ़िक्स के लिए बना एक एनिमेशन प्लेटफ़ॉर्म है। इसके दो हिस्से हैं। Rive editor वह जगह है जहाँ डिज़ाइनर शेप बनाते हैं, बोन्स से कैरेक्टर को रिग करते हैं, एनिमेशन के keyframe बनाते हैं और उन्हें आपस में जोड़ते हैं। Rive रनटाइम वे लाइब्रेरी हैं जो एक्सपोर्ट की गई फ़ाइल को आपके प्रोडक्ट के अंदर लोड करती हैं और उसे रियल टाइम में रेंडर करती हैं।

वीडियो या GIF से फ़र्क यह है कि Rive एनिमेशन फ़्रेम का कोई तय सीक्वेंस नहीं होता। रनटाइम हर फ़्रेम पर वेक्टर शेप बनाता है, और फ़ाइल के अंदर मौजूद स्टेट मशीन तय करती है कि कौन-सा एनिमेशन चलेगा, एनिमेशन आपस में कैसे ब्लेंड होंगे, और आपके कोड से भेजी गई वैल्यू पर वे कैसे रिएक्ट करेंगे। एक मैस्कॉट idle रह सकता है, रिक्वेस्ट चलते समय loading लूप पर जा सकता है, और पूरा होने पर success रिएक्शन चला सकता है, सब एक ही फ़ाइल से।

इसलिए Rive ऐसे UI के लिए अच्छा है जो रिस्पॉन्ड करता है: बटन, ऑनबोर्डिंग कैरेक्टर, असिस्टेंट अवतार, प्रोग्रेस इंडिकेटर और गेम HUD। उदाहरण के लिए, Duolingo अलग-अलग कोर्स में अपने कैरेक्टर का लिप-सिंक करने के लिए Rive स्टेट मशीन का इस्तेमाल करता है। अगर आपको सिर्फ़ एक लीनियर क्लिप चाहिए जो कभी नहीं बदलती, तो आमतौर पर वीडियो फ़ाइल ज़्यादा आसान रहती है।

.riv फ़ाइल क्या है?

.riv फ़ाइल वह बाइनरी फ़ॉर्मेट है जिसे Rive editor एक्सपोर्ट करता है और रनटाइम पढ़ते हैं। यह रनटाइम फ़ाइल है, प्रोजेक्ट फ़ाइल नहीं: इसमें एनिमेशन चलाने के लिए ज़रूरी सब कुछ होता है, लेकिन आप इसे हाथ से एडिट नहीं करते।

एक .riv में ये हो सकते हैं:

• आर्टबोर्ड: वे कैनवास जिन पर आर्टवर्क रहता है। एक फ़ाइल में कई आर्टबोर्ड हो सकते हैं।
• टाइमलाइन एनिमेशन: keyframe वाली क्लिप, जैसे idle लूप या wave।
• स्टेट मशीन: ग्राफ़ जो तय करते हैं कि कौन-से एनिमेशन कब चलेंगे।
• इनपुट या view model: वह इंटरफ़ेस जिससे आपका कोड स्टेट मशीन को कंट्रोल करता है।

क्योंकि आर्टवर्क वेक्टर के रूप में और मोशन keyframe के रूप में सेव होता है, इसलिए कई एनिमेशन एक ही शेप शेयर कर सकते हैं। यही वजह है कि कैरेक्टर की सभी स्टेट वाली एक .riv फ़ाइल उसी कैरेक्टर के एक छोटे वीडियो से भी छोटी हो सकती है।

कोड से .riv को कंट्रोल करने के लिए आपको उसके आर्टबोर्ड, स्टेट मशीन और इनपुट या व्यू मॉडल के नाम चाहिए। अगला सेक्शन बताता है कि इन्हें फ़ाइल से ही कैसे पढ़ें।

.riv फ़ाइल को कैसे खोलें या देखें?

इसे ऐसे व्यूअर में लोड करें जो Rive रनटाइम इस्तेमाल करता हो। सबसे तेज़ तरीका है हमारा फ़्री Rive File Inspector: फ़ाइल उसमें डालें, और यह आर्टबोर्ड, एनिमेशन, स्टेट मशीन, इनपुट और Data Binding view model की लिस्ट दिखाता है, फिर हर एक को चलाने और इनपुट लाइव सेट करने देता है। यह आपके ब्राउज़र में चलता है और कुछ भी अपलोड नहीं करता।

डेवलपर के लिए वेब रनटाइम की कुछ लाइनें यही काम करती हैं: एक Rive इंस्टेंस बनाएँ जिसमें src फ़ाइल की ओर पॉइंट करे, और लोड होने के बाद rive.contents को लॉग करें, जो आर्टबोर्ड और उनकी स्टेट मशीन के बारे में बताता है।

देखना और एडिट करना एक बात नहीं है। Rive के कम्युनिटी डॉक्स बताते हैं कि रनटाइम .riv फ़ाइलों से वह डेटा हटा दिया जाता है जिसकी एडिटर को ज़रूरत होती है (जैसे स्टेट मशीन ग्राफ़ में हर स्टेट कहाँ रखी है), और एडिटर का "For backup" एक्सपोर्ट, यानी .rev फ़ाइल, सब कुछ रखता है और उसे वापस एडिटर में ड्रैग किया जा सकता है। अगर आपको किसी और की बनाई .riv में बदलाव करना है, तो सिर्फ़ .riv नहीं, बल्कि प्रोजेक्ट या .rev माँगें।

.riv को MP4 या GIF में कैसे बदलें?

इसे Rive editor से रेंडर करें। Animate मोड में आर्टबोर्ड पर एक Render Preset जोड़ें, H.264, GIF, WebM, PNG sequence या SVG sequence चुनें, एनिमेशन, FPS, ड्यूरेशन, बिट रेट और साइज़ सेट करें, फिर Render Queue से इसे चलाएँ और Cloud Renderer के Completed टैब से डाउनलोड करें। Rive के डॉक्स के अनुसार, "वीडियो और इमेज एक्सपोर्ट करना पेड प्लान में उपलब्ध है।"

इसके लिए सोर्स प्रोजेक्ट का एडिटर में खुला होना ज़रूरी है। अगर आपके पास सिर्फ़ .riv है, तो व्यावहारिक विकल्प यही है कि फ़ाइल को ब्राउज़र या ऐप में चलते हुए रिकॉर्ड करें। अगर आपको पूरे कैरेक्टर सेट के वीडियो वर्ज़न चाहिए, तो .riv बनाने वाले से उसी समय उन्हें रेंडर करने को कहें। दूसरे कन्वर्ज़न के लिए GIF, वीडियो या PNG को Rive या Lottie में बदलना देखें।

क्या Rive कमर्शियल इस्तेमाल के लिए फ़्री है?

रनटाइम फ़्री हैं। Rive के अनुसार उसके सभी ऑफ़िशियल रनटाइम MIT License के तहत ओपन सोर्स हैं और इन्हें पर्सनल और कमर्शियल ऐप्लिकेशन में इस्तेमाल किया जा सकता है। अपने ऐप में .riv शिप करने के लिए आपकी तरफ़ से Rive अकाउंट या पेड प्लान की ज़रूरत नहीं है।

एडिटर एक अलग प्रोडक्ट है जिसके अपने प्लान हैं। अक्टूबर 2026 तक, Rive का प्राइसिंग पेज (डिफ़ॉल्ट रूप से सालाना बिलिंग दिखती है) ये प्लान बताता है:

एडिटर के कुछ फ़ीचर सिर्फ़ पेड प्लान में हैं। एडिटर से वीडियो और इमेज सीक्वेंस (H.264, GIF, WebM, PNG या SVG सीक्वेंस) एक्सपोर्ट करने के लिए पेड प्लान चाहिए। कीमतें और प्लान की सीमाएँ बदलती रहती हैं, इसलिए बजट बनाने से पहले प्राइसिंग पेज देख लें।

क्या Rive रनटाइम ओपन सोर्स हैं?

हाँ, रनटाइम ओपन सोर्स हैं, लेकिन एडिटर नहीं। रनटाइम का source code GitHub पर rive-app organization में है, जैसे web पैकेज के लिए rive-wasm और React के लिए rive-react। आप code पढ़ सकते हैं, issues दर्ज कर सकते हैं और किसी भी दूसरी dependency की तरह versions pin कर सकते हैं।

MIT License का मतलब है कि आप runtime को closed-source कमर्शियल प्रोडक्ट में भी शिप कर सकते हैं। आपकी ज़िम्मेदारी वही है जो MIT code के लिए आम तौर पर होती है: library के साथ license notice बनाए रखें।

एडिटर एक hosted कमर्शियल ऐप्लिकेशन है। आप इसे Free प्लान पर इस्तेमाल कर सकते हैं, लेकिन इसका source code प्रकाशित नहीं है। एडिटर की licensing Rive के प्लान के तहत आती है, MIT License के तहत नहीं। व्यवहार में developers के लिए यह बँटवारा ज़्यादा मायने नहीं रखता: designers एडिटर इस्तेमाल करते हैं, और engineering टीम सिर्फ़ ओपन-सोर्स रनटाइम और एक्सपोर्ट की गई फ़ाइल के साथ काम करती है।

.riv फ़ाइल किन प्लेटफ़ॉर्म पर चल सकती है?

Rive मुख्य ऐप और web प्लेटफ़ॉर्म के लिए official रनटाइम मेंटेन करता है:

Web पर Rive अब ज़्यादातर मामलों के लिए @rive-app/webgl2 की सलाह देता है। यह Rive Renderer इस्तेमाल करता है और vector feathering जैसे फ़ीचर सपोर्ट करता है, जिन्हें Canvas2D-आधारित @rive-app/canvas अभी सपोर्ट नहीं करता। दोनों एक ही API देते हैं।

एक ही .riv फ़ाइल हर runtime पर चलती है, इसलिए एक एक्सपोर्ट से आपकी वेबसाइट, iOS ऐप और Android ऐप तीनों का काम चल सकता है। फ़र्क सिर्फ़ उस code में है जो आप इसे load करने और इसकी स्टेट मशीन को कंट्रोल करने के लिए लिखते हैं, और इसमें कि हर runtime अभी कौन-से control API सपोर्ट करता है।

प्लेटफ़ॉर्म गाइड: React और Next.js, SwiftUI, और Android, Flutter और React Native।

Rive runtime कितना बड़ा है?

Runtime आपके ऐप या पेज में एक तय साइज़ जोड़ता है, जो आपकी .riv फ़ाइलों के साइज़ से अलग है। Rive ये आँकड़े प्रकाशित करता है (आखिरी अपडेट जनवरी 2026)। तुलना के लिए, हमने 25 अक्टूबर 2026 को canvas-lite 2.44.0 web runtime को लगभग 373 KB brotli मापा, जो हर साइट के लिए एक बार डाउनलोड होता है:

Runtime हर ऐप या साइट के लिए एक बार डाउनलोड होता है। हर अतिरिक्त .riv फ़ाइल आमतौर पर छोटी होती है, इसलिए जितने ज़्यादा एनिमेशन जोड़ते हैं, सौदा उतना बेहतर होता जाता है। अगर किसी पेज पर सिर्फ़ एक सजावटी लूप है, तो एक छोटा वीडियो कुल मिलाकर हल्का हो सकता है; अगर कई स्टेट वाला इंटरैक्टिव कैरेक्टर है, तो आमतौर पर Rive बेहतर रहता है।

Web पर runtime को लेज़ी लोड करें (सिर्फ़ उन पेजों पर जहाँ ज़रूरत हो), ताकि यह first paint को न रोके। Browsers हर पेज पर WebGL contexts की संख्या भी सीमित रखते हैं; अगर आप webgl2 के साथ कई Rive instances रेंडर करते हैं, तो useOffscreenRenderer: true सेट करें ताकि वे एक ही context शेयर करें।

क्या Charmotion file इस्तेमाल करने के लिए Rive editor चाहिए?

नहीं। हर पेड प्लान पर, Charmotion एक तैयार .riv देता है, इसलिए आपको बस अपने प्लेटफ़ॉर्म का फ़्री रनटाइम चाहिए। फ़्री प्लान में कोई कैरेक्टर सेट नहीं है। आप किसी कैरेक्टर, मैस्कॉट या लोगो की इमेज अपलोड करते हैं, और Charmotion एक .riv फ़ाइल में 17 एनिमेशन का सेट लौटाता है (हमारे मापे गए एक फ़्लैट कैरेक्टर में सभी 17 मिलाकर 40 KB; हमारा मापा गया एक 3D लोगो लगभग 1.0 MB), साथ में MP4, GIF और ट्रांसपेरेंट WebM/MOV वर्ज़न और पेस्ट करने लायक वेब, React और SwiftUI कोड।

File में CharacterStateMachine नाम की स्टेट मशीन है। mood नाम का नंबर इनपुट 10 लूप में से एक चुनता है, और success और error जैसे ट्रिगर वन-शॉट रिएक्शन (एक बार चलने वाले रिएक्शन) चलाते हैं। दूसरी स्टेट मशीन, LaunchStateMachine, एक बार लॉन्च इंट्रो चलाती है और फिर idle में चली जाती है। स्टेट मशीन गाइड में यह wiring विस्तार से समझाई गई है।

Charmotion files दोनों control systems सपोर्ट करती हैं। CharacterViewModelMachine एक Character व्यू मॉडल से चलती है (Data Binding: एक mood नंबर और हर रिएक्शन के लिए एक ट्रिगर), जिसकी ज़रूरत नए Apple runtime और React Native Nitro v0.6+ को होती है। CharacterStateMachine, जो डिफ़ॉल्ट है, वही स्टेट web, React, Android, Flutter और legacy Apple runtimes के लिए legacy इनपुट के रूप में देती है।

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

क्या Rive, GIF या वीडियो से बेहतर है?

जब एनिमेशन को स्टेट या इनपुट के हिसाब से रिएक्ट करना हो, तब Rive बेहतर है, क्योंकि एक फ़ाइल में कई एनिमेशन होते हैं जिन्हें code से कंट्रोल किया जाता है। ऐसी तय क्लिप के लिए जो कभी नहीं बदलती, वीडियो आसान है और उसे किसी runtime की ज़रूरत नहीं होती। क्वालिटी और साइज़ के मामले में GIF सबसे कमज़ोर विकल्प है; इसे सिर्फ़ वहीं इस्तेमाल करें जहाँ वीडियो और Rive नहीं चल सकते।

क्या editor के बिना .riv फ़ाइल खोली जा सकती है?

हाँ, कोई भी official Rive runtime .riv फ़ाइल को load और play कर सकता है। आर्टवर्क या स्टेट मशीन एडिट करने के लिए Rive editor चाहिए। Code से playback कंट्रोल करने के लिए आपको बस फ़ाइल के अंदर के आर्टबोर्ड, स्टेट मशीन और इनपुट या view model properties के नाम चाहिए।

क्या Rive offline काम करता है?

हाँ, बशर्ते runtime खुद उपलब्ध हो। Runtime लोकली रेंडर करते हैं, इसलिए native ऐप के साथ bundle की गई .riv बिना Rive से कनेक्शन के चलती है। Web पर runtime डिफ़ॉल्ट रूप से अपनी WASM file CDN से load करता है, इसलिए अगर पेज को offline काम करना है या third-party requests से बचना है, तो setWasmUrl से इसे self-host करें।

Rive स्टेट मशीन इनपुट और Data Binding क्या हैं?

ये दो तरीके हैं जिनसे code किसी Rive file को कंट्रोल करता है। इनपुट स्टेट मशीन पर numbers, booleans और ट्रिगर होते हैं; Rive अब इन्हें deprecated मानता है, लेकिन मौजूदा फ़ाइलें काम करती रहती हैं। Data Binding ज़्यादा property types वाले view models इस्तेमाल करता है, और नए काम के लिए Rive इसी की सलाह देता है।

इस गाइड से झटपट जवाब

• Rive क्या है?
• क्या Rive फ़्री है?

स्रोत

• Runtimes: Getting started, Rive
• Canvas vs WebGL2, Rive
• Runtime sizes, Rive
• Rive pricing, Rive
• Exporting for video and static design, Rive
• Feature support, Rive
• Data binding migration guide, Rive
• How Duolingo animates world characters, Duolingo
• Exporting (community docs: .rev backup files), Rive Community