Bolt.new, v0 और Replit में Rive मैस्कॉट कैसे जोड़ें

Rive मैस्कॉट के लिए Bolt, v0 और Replit में क्या फ़र्क है?

Code हर जगह वही React component है। Builders में फ़र्क उनके default stack और इस बात में है कि binary फ़ाइल प्रोजेक्ट में कैसे पहुँचती है:

तीनों कहने पर npm पैकेज install करते हैं, इसलिए @rive-app/react-webgl2 के लिए एक लाइन की request काफ़ी है। अगर आपका प्रोजेक्ट React के अलावा कोई और framework इस्तेमाल करता है, तो सीधे Rive का web runtime @rive-app/webgl2 इस्तेमाल करें।

Bolt.new में .riv फ़ाइल कैसे जोड़ें?

Chat नहीं, Code view इस्तेमाल करें। Bolt के docs के अनुसार chatbox में attach की गई फ़ाइल सिर्फ़ उसी request के लिए इस्तेमाल होती है और प्रोजेक्ट में स्थायी रूप से नहीं जुड़ती, जबकि Code view में जोड़ी गई फ़ाइल प्रोजेक्ट फ़ाइलों में सेव रहती है।

1. Code view खोलने के लिए <> आइकन पर क्लिक करें।
2. Public folder खोलें और mascot.riv को उसमें drag करें।
3. फ़ाइल पर right-click करें और Copy Relative Path चुनें।
4. पिछले सेक्शन का prompt paste करें और URL के रूप में /mascot.riv इस्तेमाल करें।

Bolt की supported file types की सूची में इमेज, documents, code और data files हैं, लेकिन .riv नहीं। अगर Code view फ़ाइल स्वीकार न करे, तो उसे CORS वाले CDN पर host करें और Bolt को URL दें। फ़्री प्लान पर फ़ाइलें 10 MB तक और paid प्लान पर 100 MB तक हो सकती हैं।

अगर आपका Bolt प्रोजेक्ट Expo से बना mobile ऐप है, तो web पैकेज लागू नहीं होते। Rive के React Native runtime के लिए development build चाहिए; देखें Expo में Rive।

v0 में क्या बदलता है, जो Next.js बनाता है?

दो बातें: v0 फ़ाइल सीधे स्वीकार करता है, और प्रोजेक्ट Next.js होता है। v0 के upload docs में इमेज, वीडियो, fonts और 3D models के साथ RIV भी supported attachment types में है। फ़्री प्लान पर chat attachments 5 MB तक और paid प्लान पर 20 MB तक हो सकते हैं। + आइकन से mascot.riv attach करें और बताएँ कि इसे कहाँ रखना है:

Save the attached mascot.riv as public/mascot.riv and load it from /mascot.riv.

नई v0 chats shadcn/ui और Tailwind वाले Next.js ऐप से शुरू होती हैं, और v0 backends को App Router conventions के साथ बनाता है। इसलिए मैस्कॉट "use client" वाला Client Component होना चाहिए, जिसे Server Component page import करे, और matchMedia जैसे browser checks effects में होने चाहिए। अगर build में window is not defined आए, तो v0 से कहें कि component को किसी Client Component के अंदर से next/dynamic और ssr: false के साथ लोड करे। पूरी जानकारी, सही version पर rive.wasm को self-host करने समेत, Next.js App Router में Rive में है।

Replit में .riv कैसे जोड़ें?

Replit के docs chat से अपलोड करने का तरीका बताते हैं: prompt box में plus बटन पर क्लिक करें और Upload a file चुनें, या फ़ाइल को prompt box में drag करें। फिर Agent को बताएँ कि इसे कहाँ रखना है:

Save the attached mascot.riv into the front end's static assets folder
(public/ for Vite or Next.js) so it is served at /mascot.riv in the
published app. Then confirm the path.

मैस्कॉट के लिए App Storage को public host के रूप में इस्तेमाल न करें। Replit के अनुसार App Storage buckets हमेशा private होते हैं, और उनकी फ़ाइलों के links signed URLs होते हैं जो expire हो जाते हैं। यह यूज़र अपलोड के लिए ठीक है, उस फ़ाइल के लिए नहीं जिसे हर विज़िटर का ब्राउज़र fetch करता है। Static folder या CORS वाला external CDN ही सही जगह है।

Publish करने से पहले प्रीव्यू का network tab खोलें और पक्का करें कि /mascot.riv 200 लौटाती है। फिर published ऐप को भी इसी तरह जाँचें, क्योंकि ship वही static folder होता है।

कौन सा प्रॉम्प्ट तीनों builders में काम करता है?

Builder को फ़ाइल के नाम और वे नियम दें जो आम गलतियों से बचाते हैं। यह प्रॉम्प्ट 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.

उस प्रॉम्प्ट के नाम एक Charmotion फ़ाइल से मेल खाते हैं, जिसमें Character व्यू मॉडल के साथ CharacterViewModelMachine, पुराने कोड के लिए mood इनपुट वाली एक क्लासिक CharacterStateMachine, और एक LaunchStateMachine इंट्रो होता है जो खत्म होने पर कोई इवेंट नहीं भेजता (इसकी अवधि लगभग 2.6 सेकंड मानकर चलें)। .riv हर पेड प्लान के साथ मिलती है ($20/माह से)।

इन्हीं टूल्स में स्प्लैश स्क्रीन और लोडिंग इंट्रो के लिए देखें एनिमेटेड स्प्लैश या लोडिंग मैस्कॉट के लिए AI prompts।

Publish करने से पहले नतीजा कैसे जाँचें?

AI builders अक्सर ऐसा code बनाते हैं जो सही दिखता है पर कुछ रेंडर नहीं करता। इसी क्रम में जाँचें, क्योंकि हर स्टेप अगले की एक संभावित वजह को हटा देता है:

1. फ़ाइल लोड होती है। Network tab में mascot.riv status 200 के साथ दिखती है। 404 का मतलब है path गलत है (/mascot.riv, न कि /public/mascot.riv); CORS error का मतलब है host को Access-Control-Allow-Origin चाहिए।
2. नाम मेल खाते हैं। Code में स्टेट मशीन और property के नाम फ़ाइल से बिल्कुल मेल खाते हैं, case समेत।
3. Box का साइज़ तय है। Wrapper की width और height साफ़ तौर पर दी गई है।
4. Values effects में सेट होती हैं। Render के दौरान कोई Rive call नहीं चलती।
5. मोशन कम करें। OS सेटिंग चालू होने पर पेज उसकी जगह poster दिखाता है।
6. Versions pinned हैं। package.json में Rive का exact version है, latest नहीं।

Bolt.new, v0 या Replit में Rive मैस्कॉट जोड़ें

1. रनटाइम इंस्टॉल करें. Builder से @rive-app/react-webgl2 install करने और exact version pin करने को कहें।
2. .riv जोड़ें. Bolt: Code view में इसे Public में drag करें। v0: इसे attach करें और public/mascot.riv के रूप में सेव करने को कहें। Replit: chat में अपलोड करें और Agent से इसे static folder में सेव करने को कहें।
3. Prompt paste करें. स्टेट मशीन, व्यू मॉडल और property के नाम, fixed-size wrapper, मोशन कम करें का ध्यान और client-only rendering बताएँ।
4. Framework के नियम लागू करें. v0 या किसी भी Next.js प्रोजेक्ट में मैस्कॉट को "use client" component में और browser checks को effects में रखें।
5. नतीजा जाँचें. पक्का करें कि .riv 200 लौटाती है, नाम मेल खाते हैं, wrapper का साइज़ तय है और versions pinned हैं।

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

क्या मैं v0 पर .riv फ़ाइल अपलोड कर सकता हूँ?

हाँ। v0 के upload docs में RIV supported attachment types में शामिल है। इसे + आइकन से attach करें या chat में drag करें, फिर v0 से इसे public/mascot.riv के रूप में सेव करने को कहें। फ़्री प्लान पर attachments 5 MB तक और paid प्लान पर 20 MB तक हो सकते हैं।

Bolt chat में attach की गई फ़ाइल क्यों नहीं रखता?

Bolt के docs के अनुसार chatbox attachments उसी request के लिए इस्तेमाल होते हैं, लेकिन आपकी प्रोजेक्ट फ़ाइलों में स्थायी रूप से नहीं जुड़ते। फ़ाइल रखनी हो तो उसे Code view में जोड़ें, जैसे Public folder में drag करके, फिर अपने प्रॉम्प्ट में उसका path दें।

क्या मैं मैस्कॉट फ़ाइल को Replit App Storage में होस्ट कर सकता हूँ?

यह सही विकल्प नहीं है। Replit के अनुसार App Storage buckets हमेशा private होते हैं, और उनकी फ़ाइलों के लिंक signed URL होते हैं जो एक्सपायर हो जाते हैं। जिस मैस्कॉट को हर विज़िटर लोड करता है, उसे ऐप के static folder में या ऐसे CDN पर रखें जो CORS headers भेजता हो।

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

• क्या v0 और Bolt अपलोड की गई .riv फ़ाइल इस्तेमाल कर सकते हैं?

स्रोत

• Attach files to your project, Bolt Support
• bolt.new README, StackBlitz on GitHub
• Expo for mobile apps, Bolt Support
• Images, videos, and file uploads, v0 Docs
• Full-stack apps, v0 Docs
• Upload and use files, Replit Docs
• App Storage, Replit Docs
• React runtime, Rive
• React runtime: Data binding, Rive