Carrd साइट में एनिमेशन कैसे जोड़ें

हर तरह के एनिमेशन के लिए कौन-सा Carrd प्लान चाहिए?

Carrd का प्लान पेज और docs फ़ीचर्स को इस तरह बाँटते हैं (कीमतें अक्टूबर 2026 में carrd.com/pro पर दी गई, सालाना बिलिंग):

Carrd के docs में Pro Lite और Pro Standard की शर्तें साफ़ लिखी हैं; फ़्री प्लान की अपलोड सीमाएँ वे प्रकाशित नहीं करते, इसलिए उस पर निर्भर होने से पहले एक बड़ा GIF टेस्ट कर लें।

Embed element से Rive एनिमेशन कैसे जोड़ें?

1. Add Element पर क्लिक करें, फिर Embed चुनें।
2. Type को Code पर सेट करें।
3. Style को Inline पर सेट करें, इससे कोड ठीक वहीं आता है जहाँ element पेज पर है।
4. snippet को Code में पेस्ट करें, अपने .riv URL के साथ।
5. साइट पब्लिश करें। Carrd के अनुसार builder में embed कुछ भी नहीं दिखाता।

<div style="width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto">
  <canvas id="mascot" style="width: 100%; height: 100%"
          role="img" aria-label="Animated mascot"></canvas>
</div>
<script src="https://unpkg.com/@rive-app/webgl2@2.47.1"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const canvas = document.getElementById("mascot");
  const mascot = new rive.Rive({
    src: "https://YOUR-CDN.example.com/mascot.riv",
    canvas,
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => mascot.resizeDrawingSurfaceToCanvas(),
  });
  // Play the yes reaction when someone clicks the character.
  canvas.addEventListener("click", () => {
    mascot.viewModelInstance?.trigger("yes")?.trigger();
  });
</script>

wrapper मैस्कॉट को 360 पिक्सेल तक सीमित रखता है और फ़ोन पर उसे square रखता है। अपने लेआउट के हिसाब से max-width बदलें। अगर आप कई Rive embeds लगाते हैं, तो runtime एक ही बार लोड करें: <script src> वाली लाइन को एक अलग Embed में रखें, जिसका Style Hidden और location Head हो, और inline में सिर्फ़ canvas और start-up कोड रखें। runtime के लिए Body End इस्तेमाल न करें: वह inline embeds के बाद लोड होता है, इसलिए उनका start-up कोड rive मौजूद होने से पहले चल जाएगा।

Carrd चेतावनी देता है कि embed कोड में एक syntax error पूरी पब्लिश की गई साइट को खाली कर सकता है। अगर पब्लिश करने के बाद पेज खाली दिखे, तो browser console खोलें, error ठीक करें और फिर से पब्लिश करें।

Carrd के लिए .riv फ़ाइल कहाँ होस्ट करें?

Carrd के बाहर। Carrd में अपलोड Image, Video और Audio जैसे elements से जुड़े होते हैं, इसलिए .riv अपलोड करके उसका लिंक पाने की कोई जगह नहीं है। फ़ाइल को किसी static host पर रखें और उसका HTTPS URL src में पेस्ट करें।

host को cross-origin requests की अनुमति देनी चाहिए, क्योंकि runtime आपके Carrd पेज के domain से .riv fetch करता है। GitHub Pages access-control-allow-origin: * भेजता है (अक्टूबर 2026 में जाँचा गया), और Cloudflare R2 जैसे object stores में आप CORS policy जोड़ सकते हैं। किसी URL को इससे जाँचें:

curl -sI -H "Origin: https://yourname.carrd.co" \
  https://YOUR-CDN.example.com/mascot.riv | grep -i access-control

इस snippet में runtime खुद unpkg से लोड होता है, अपनी WASM फ़ाइल के साथ, इसलिए उन्हें आपको होस्ट नहीं करना पड़ता।

बिना कोड के लूपिंग MP4 या GIF कैसे जोड़ें?

Video element (Pro Lite और ऊपर): H.264 में encoded MP4 अपलोड करें, फिर loop playback चालू करें और player controls बंद करें, ताकि वह डिज़ाइन का हिस्सा लगे। Carrd दूसरे codecs वाली MP4 फ़ाइलें स्वीकार नहीं करता, इसलिए अपलोड फ़ेल हो तो अपने editor से H.264 में फिर से एक्सपोर्ट करें।

अगर Autoplay चेक होने पर भी वीडियो ऑटोप्ले न हो, तो Carrd का troubleshooting पेज आम कारण बताता है: audio track (उसे म्यूट करें या track पूरी तरह हटा दें), low-power या data-saver मोड में फ़ोन, या ऑटोप्ले रोकने वाला browser extension। एनिमेशन क्लिप बिना audio के एक्सपोर्ट करें, तो पहला कारण खत्म हो जाता है।

GIF: एक Image element जोड़ें और GIF अपलोड करें। Carrd बताता है कि Ezgif से बने GIF कभी-कभी पब्लिश फ़ेल करवा देते हैं, इसलिए पब्लिश फ़ेल हो तो किसी दूसरे टूल से फिर एक्सपोर्ट करें। GIF छोटे रखें; वे उसी क्लिप के MP4 से काफ़ी बड़े होते हैं।

दोनों फ़ॉर्मेट एक तय लूप चलाते हैं और विज़िटर्स पर रिएक्ट नहीं कर सकते। रंगीन सेक्शन के ऊपर ट्रांसपेरेंट क्लिप के लिए, <video> tag और दो sources वाला Embed इस्तेमाल करें, जैसा वेबसाइट पर ट्रांसपेरेंट वीडियो में बताया गया है।

क्या मैस्कॉट क्लिक या Carrd फ़ॉर्म पर रिएक्ट कर सकता है?

हाँ, Inline embed के साथ। उसका कोड पेज में चलता है, इसलिए वह बाकी पेज को सुन सकता है। ऊपर का snippet कैरेक्टर पर क्लिक होने पर पहले से yes रिएक्शन चलाता है। फ़ॉर्म सबमिट होने के बाद जश्न दिखाने के लिए submit event का listener जोड़ें, जो हर फ़ॉर्म से ऊपर bubble होता है:

<script>
  // Add below the snippet above: celebrate when any form on the page is submitted.
  document.addEventListener("submit", () => {
    mascot.viewModelInstance?.trigger("success")?.trigger();
  });
</script>

मूड भी इसी तरह काम करते हैं: कुछ pending हो तब mascot.viewModelInstance.number("mood").value को 5 (loading) पर सेट करें, या call to action की ओर ध्यान खींचने के लिए 9 (attention) पर। हर बदलाव के बाद पब्लिश करें और फ़ोन पर टेस्ट करें, क्योंकि embeds builder में नहीं चलते।

Carrd साइट के लिए कौन-सी फ़ाइलें एक्सपोर्ट करें?

फ़ाइलें प्लान के हिसाब से चुनें: Basic के लिए GIF, Pro Lite के लिए H.264 MP4, और Pro Standard व उससे ऊपर के लिए .riv के साथ एक स्थिर poster इमेज।

Charmotion आपके कैरेक्टर या लोगो की एक इमेज से ये सब बनाता है। हर सेट में सॉलिड बैकग्राउंड के साथ 1080x1080 पर MP4, 9:16 वीडियो और GIF हैं। सेट पेड प्लान के साथ मिलते हैं ($20/माह से), इस पेज के स्निपेट में इस्तेमाल होने वाले Character व्यू मॉडल (mood 0 से 9 और success, error, yes, no, enter और exit ट्रिगर) वाली .riv के साथ, साथ में ट्रांसपेरेंट WebM और HEVC MOV।

Carrd साइट पर Rive मैस्कॉट जोड़ें

1. प्लान जाँचें. Embeds के लिए Pro Standard या उससे ऊपर चाहिए; Pro Lite सिर्फ़ वीडियो अपलोड जोड़ता है।
2. .riv होस्ट करें. फ़ाइल को ऐसे static host पर अपलोड करें जो Access-Control-Allow-Origin भेजता हो, जैसे GitHub Pages या CORS policy वाला R2 bucket।
3. Embed जोड़ें. Add Element पर क्लिक करें, फिर Embed चुनें, और Type को Code व Style को Inline पर सेट करें।
4. Snippet पेस्ट करें. canvas, pinned Rive web runtime और अपने .riv URL वाली start-up script पेस्ट करें।
5. पब्लिश करें और टेस्ट करें. साइट पब्लिश करें, क्योंकि builder में embeds कुछ नहीं दिखाते, फिर क्लिक, फ़ॉर्म और फ़ोन पर टेस्ट करें।

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

मेरा Carrd embed editor में खाली क्यों है?

यह सामान्य है। Carrd के अनुसार Embed element builder में कुछ भी नहीं दिखाता, इसलिए उसे देखने के लिए साइट पब्लिश करनी होगी। अगर पब्लिश की गई साइट पर भी खाली है, तो browser console में script error या blocked .riv request देखें।

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

नहीं। Carrd में अपलोड Image, Video और Audio जैसे elements से जुड़े होते हैं, इसलिए .riv के लिए कोई field नहीं है। इसे GitHub Pages, CORS policy वाले किसी object store या किसी दूसरे CDN पर होस्ट करें, और HTTPS URL को embed में पेस्ट करें।

क्या Carrd, Lottie को सपोर्ट करता है?

built-in element के रूप में नहीं। Rive की तरह Lottie को भी एक player script चाहिए, यानी Pro Standard या उससे ऊपर के प्लान पर Embed element। निचले प्लान पर एनिमेशन को H.264 MP4 या GIF में बदलें।

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

• Carrd का कौन-सा प्लान embed की अनुमति देता है?

स्रोत

• Embedding custom code, Carrd Docs
• Pro plans, Carrd Docs
• Carrd Pro, Carrd
• Adding videos, Carrd Docs
• Troubleshooting, Carrd Docs
• Cross-Origin Resource Sharing (CORS), MDN Web Docs
• Configure CORS, Cloudflare R2 docs
• Web (JS) runtime, Rive
• Web runtime: Data binding, Rive