Lovable ऐप में Rive मैस्कॉट कैसे जोड़ें

क्या Lovable, Rive runtime इंस्टॉल कर सकता है?

हाँ। Lovable के docs के मुताबिक, प्रोजेक्ट चैट में package का नाम लें या फ़ीचर का वर्णन करें, और Lovable उसे इंस्टॉल और इंटीग्रेट कर देता है; आपको terminal चलाने या package.json एडिट करने की ज़रूरत नहीं। यह packages को Bun से इंस्टॉल करता है।

Install @rive-app/react-webgl2 and pin the exact version.

Rive एक ही API वाले तीन React packages पब्लिश करता है। @rive-app/react-webgl2 वही है जिसे Rive की React गाइड इंस्टॉल करती है, और यह हर फ़ीचर सपोर्ट करता है। अगर किसी पेज पर एक साथ कई एनिमेशन दिखेंगे, तो @rive-app/react-canvas चुनें, क्योंकि ब्राउज़र प्रति पेज WebGL contexts की संख्या सीमित रखते हैं।

Lovable बताता है कि वह third-party packages की गारंटी नहीं दे सकता, इसलिए जाँच लें कि उसने क्या इंस्टॉल किया: Rive packages को Rive ने @rive-app scope के तहत पब्लिश किया है। अगर बाद में आप प्रोजेक्ट को Lovable के बाहर चलाते हैं, तो Bun से इंस्टॉल करें ताकि वर्ज़न bun.lock के साथ सिंक रहें।

.riv फ़ाइल को प्रोजेक्ट में कैसे जोड़ें?

.riv को एक static फ़ाइल के रूप में serve होना चाहिए जिसे ब्राउज़र fetch कर सके। Lovable के docs मीडिया जोड़ने के तीन तरीके बताते हैं, और एक अतिरिक्त storage विकल्प भी:

GitHub sync के साथ, Lovable के अनुसार active branch (आमतौर पर main) पर किए गए push वापस प्रोजेक्ट में सिंक होते हैं। public/ की फ़ाइलें root से serve होती हैं, इसलिए component /mascot.riv लोड करता है, /public/mascot.riv नहीं।

.riv के लिए साइज़ शायद ही कभी समस्या होता है, लेकिन Lovable किसी प्रोजेक्ट में 10 MB से बड़ी फ़ाइलें सेव नहीं कर सकता, और GitHub 100 MB से बड़ी फ़ाइलें रिजेक्ट कर देता है।

कौन सा प्रॉम्प्ट मैस्कॉट component जोड़ता है?

"एक एनिमेटेड मैस्कॉट जोड़ें" जैसी सामान्य रिक्वेस्ट से अंदाज़े वाले नाम और हाथ से लिखा CSS एनिमेशन मिलता है। Lovable को फ़ाइल की सही जानकारी दें। यह प्रॉम्प्ट मानकर चलता है कि फ़ाइल में Character व्यू मॉडल है; properties के नाम अपनी फ़ाइल के हिसाब से बदल लें:

Add an animated mascot component.

- Install @rive-app/react-webgl2 (pin the exact version you install).
- The file is /mascot.riv (in public/). State machine: "CharacterViewModelMachine".
  Use useRive with autoplay: true and autoBind: true.
- View model "Character": number "mood" (0 idle, 1 happy, 2 wave, 3 thinking,
  4 sad, 5 loading, 6 listening, 7 talking, 8 sleeping, 9 attention) and triggers
  "success", "error", "yes", "no", "enter", "exit".
- Create components/Mascot.tsx with props mood: number and celebrateKey: number.
  Set mood with useViewModelInstanceNumber("mood", rive?.viewModelInstance) in a
  useEffect; fire useViewModelInstanceTrigger("success", ...) when celebrateKey
  increases.
- Wrap RiveComponent in a div with a fixed 240 x 240 px size (no layout shift).
- If prefers-reduced-motion is reduce, render /mascot-poster.webp instead.
- Render it only in the browser (client-only), never during server rendering.
- Do not add Lottie or any other animation library.

आखिरी दो नियम सबसे अहम हैं। फ़िक्स्ड साइज़ वाले wrapper के बिना, canvas अपना साइज़ बिना height वाले parent के हिसाब से तय करता है और कुछ नहीं दिखाता। client-only रेंडरिंग के बिना, नया Lovable प्रोजेक्ट server rendering के दौरान fail हो सकता है (अगला सेक्शन देखें)।

मैस्कॉट की जगह स्प्लैश स्क्रीन या loading इंट्रो के लिए, एनिमेटेड स्प्लैश या लोडिंग मैस्कॉट के लिए AI prompts इस्तेमाल करें; इनमें Cursor, Claude Code, Bolt और v0 के साथ Lovable भी शामिल है।

मूड को ऐप events से कैसे जोड़ें?

मैपिंग एक बार तय करें और उसे एक ही जगह रखें, जैसे कोई छोटा context या store, ताकि हर पेज पर कैरेक्टर का व्यवहार एक जैसा रहे:

फिर Lovable से इसे जोड़ने को कहें:

Create a MascotContext with setMood(n) and celebrate().
Show the Mascot in the dashboard header.
- While any data query is loading: mood 5.
- When a save succeeds: celebrate() and mood 1.
- When a save fails or validation fails: mood 4.
- When the project list is empty: mood 8.
Do not change any other behavior.

आखिरी लाइन बदलाव को सीमित रखती है। code view में नतीजा जाँचें: मूड effects या event handlers में सेट होना चाहिए, render के दौरान कभी नहीं।

नए Lovable प्रोजेक्ट में मैस्कॉट खाली क्यों दिखता है या crash क्यों होता है?

Lovable ने 13 मई 2026 को TanStack Start को नए प्रोजेक्ट के लिए डिफ़ॉल्ट बना दिया। TanStack Start हर पेज को पहले सर्वर पर HTML में रेंडर करता है, और Lovable के अपने docs चेतावनी देते हैं कि कुछ browser-only libraries server rendering को तोड़ सकती हैं। Rive ब्राउज़र में canvas और WebAssembly से ड्रॉ करता है, इसलिए मैस्कॉट को client-only रेंडर करें। TanStack Router का ClientOnly component यही करता है, और client लोड होने तक एक fallback दिखाता है:

import { ClientOnly } from "@tanstack/react-router";

<ClientOnly fallback={<img src="/mascot-poster.webp" alt="" width={240} height={240} />}>
  <Mascot mood={mood} celebrateKey={cheer} />
</ClientOnly>

Lovable के React और Vite template पर पहले बनाए गए प्रोजेक्ट सिर्फ़ ब्राउज़र में रेंडर होते हैं और उन्हें इस wrapper की ज़रूरत नहीं है। अगर मैस्कॉट फिर भी खाली दिखे, तो इस क्रम में जाँचें:

1. network tab में /mascot.riv status 200 के साथ लोड होता दिखे, 404 नहीं।
2. स्टेट मशीन का नाम फ़ाइल से बिल्कुल मेल खाता हो, case समेत।
3. wrapper की width और height साफ़ तौर पर तय हो।
4. होस्ट की गई .riv के लिए browser console में कोई CORS error न हो।

इन स्टेट वाली मैस्कॉट फ़ाइल कहाँ से मिल सकती है?

आप Rive editor में खुद स्टेट बना सकते हैं या किसी animator को हायर कर सकते हैं; दोनों ही तरीकों में mood number और नाम वाले ट्रिगर माँगें, क्योंकि ऊपर के prompts यही मानकर चलते हैं।

Charmotion आपके कैरेक्टर या लोगो की एक इमेज से सेट बनाता है: 17 एनिमेशन एक .riv के रूप में, जिसमें CharacterViewModelMachine और इस पेज पर इस्तेमाल होने वाला Character व्यू मॉडल, mood इनपुट वाली एक क्लासिक CharacterStateMachine, और एक LaunchStateMachine इंट्रो है, साथ में MP4, GIF, ट्रांसपेरेंट WebM और MOV, और React कोड। .riv और ट्रांसपेरेंट WebM और MOV हर पेड प्लान पर हैं ($20/माह से), साथ में सॉलिड बैकग्राउंड पर MP4, GIF और 9:16 लॉन्च वीडियो।

Lovable ऐप में Rive मैस्कॉट जोड़ें

1. रनटाइम इंस्टॉल करें. चैट में कहें: @rive-app/react-webgl2 इंस्टॉल करें और सटीक वर्ज़न pin करें।
2. .riv जोड़ें. public/mascot.riv को सिंक की गई GitHub branch पर push करें, या इसे CORS वाले CDN पर होस्ट करके Lovable को URL दें।
3. component के लिए प्रॉम्प्ट दें. स्टेट मशीन, व्यू मॉडल और property के नाम, फ़िक्स्ड साइज़ wrapper, मोशन कम करें (reduced motion) का सपोर्ट और client-only रेंडरिंग वाला प्रॉम्प्ट पेस्ट करें।
4. सर्वर रेंडरिंग के लिए रैप करें. TanStack Start प्रोजेक्ट में मैस्कॉट को ClientOnly के अंदर, poster fallback के साथ रेंडर करें।
5. इवेंट को मूड से मैप करें. एक MascotContext बनाने के लिए कहें और loading, success, error और एम्प्टी स्टेट को मूड और ट्रिगर से मैप करें।
6. जाँचें. जाँचें कि .riv status 200 के साथ लोड होती है, नाम मेल खाते हैं, और रेंडर के दौरान कुछ भी सेट नहीं होता।

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

Lovable यह क्यों कहता है कि उसे mascot.riv नहीं मिल रही?

आमतौर पर वजह path होता है। public/ की फ़ाइलें साइट के root से सर्व होती हैं, इसलिए component को /mascot.riv लोड करनी चाहिए। यह भी पक्का करें कि फ़ाइल प्रोजेक्ट तक पहुँची है: अगर आपने उसे GitHub पर push किया है, तो वह उसी branch पर होनी चाहिए जिसे Lovable अभी sync कर रहा है, वरना वह दिखाई नहीं देगी।

क्या मैं Lovable में इसकी जगह Lottie फ़ाइल इस्तेमाल कर सकता हूँ?

हाँ, Lovable से @lottiefiles/dotlottie-react जैसा कोई Lottie player install करने के लिए कहें। लेकिन Lottie फ़ाइल एक ही sequence चलाती है, इसलिए मूड और रिएक्शन वाले मैस्कॉट के लिए हर स्टेट की अलग फ़ाइल और उन्हें बदलने का code चाहिए। स्टेट मशीन वाली एक ही Rive फ़ाइल से यह झंझट नहीं होता।

क्या Rive मैस्कॉट मेरे Lovable ऐप को धीमा करेगा?

इससे Rive रनटाइम (compress होने पर कई सौ किलोबाइट का WASM module) और .riv फ़ाइल जुड़ती है। इसे सिर्फ़ उन्हीं पेजों पर लोड करें जहाँ मैस्कॉट दिखता है, पहले एक छोटा स्थिर poster रेंडर करें, और अगर विज़िटर ने मोशन कम करें सेटिंग चुनी है तो canvas बिल्कुल न दिखाएँ।

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

• क्या Lovable, Rive runtime इंस्टॉल कर सकता है?
• Lovable प्रोजेक्ट में .riv फ़ाइल कैसे डालें?

स्रोत

• Use npm packages, Lovable Docs
• Using images, Lovable Docs
• Sync your Lovable project with GitHub, Lovable Docs
• Upgrade a project to TanStack Start, Lovable Docs
• Storage, Lovable Docs
• ClientOnly component, TanStack Router
• React runtime, Rive
• React runtime: Data binding, Rive
• Runtime sizes, Rive