कंटेंट पर जाएँ
charmotion
शुरू करें
वेबसाइट मैस्कॉट

एक मैस्कॉट जो आपकी वेबसाइट पर होने वाली गतिविधियों पर रिएक्ट करता है।

अपना मैस्कॉट अपलोड करें और उसे Rive कैनवस के रूप में एम्बेड करें, जिसका मूड आपका पेज होवर, स्क्रॉल, फ़ॉर्म फ़ोकस या पूरे हुए चेकआउट पर सेट करता है। अगर सिर्फ़ मोशन चाहिए, तो HEVC MOV फ़ॉलबैक के साथ ट्रांसपेरेंट WebM आपके पेज के ऊपर Chrome, Firefox, Edge और Safari में चलता है।

अपने ऐप में देखें प्लान देखें
एम्बेड
Rive कैनवस, मूड 0-9 + ट्रिगर
वीडियो
ट्रांसपेरेंट WebM + HEVC MOV
कोड
वेब एम्बेड + React कंपोनेंट
प्लान
Starter, $20/माह
Kiko, Charmotion का एक डेमो कैरेक्टर लाइव Rive फ़ाइल
लूप
एक बार चलाएँ

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

पेज इवेंट, मैस्कॉट से जुड़े हुए

पेज इवेंटमैस्कॉटइनपुट
पेज लोड होता हैenter, फिर idleट्रिगर, मूड 0
कॉल टू एक्शन पर होवरwave या happymood 2 या 1
कीमतों वाला सेक्शन स्क्रॉल होकर दिखता हैattentionmood 9
फ़ॉर्म फ़ील्ड पर फ़ोकस आता हैlisteningmood 6
फ़ॉर्म सबमिट हो रहा हैloadingmood 5
साइन इन हुआ, मैसेज भेजा गयाsuccessट्रिगर
गलत पासवर्डerror या noट्रिगर
कोई सर्च रिज़ल्ट नहींsad या sleepingmood 4 या 8

इसे अपने पेज से जोड़ें

const vm = r.viewModelInstance;       // after onLoad
const mood = (n) => (vm.number("mood").value = n);

cta.addEventListener("mouseenter", () => mood(2));   // wave
cta.addEventListener("mouseleave", () => mood(0));   // idle
email.addEventListener("focus", () => mood(6));      // listening
form.addEventListener("submit", () => mood(5));      // loading

// when your API answers:
vm.trigger(ok ? "success" : "no").trigger();

डिलीवर किया गया वेब एम्बेड और React कंपोनेंट (mood prop और play() के साथ) Rive इंस्टेंस सेट अप करते हैं।

यह कहाँ चलता है

Webflow में नेटिव Rive एलिमेंट है और Framer में आधिकारिक Rive प्लगइन। WordPress और Shopify में .riv को एम्बेड के ज़रिए, या ट्रांसपेरेंट वीडियो को वीडियो ब्लॉक में लगाया जा सकता है। वेबसाइट में एनिमेशन जोड़ने के बारे में भी पढ़ें।

साफ़-साफ़ सीमाएँ

  • कर्सर को फ़ॉलो करने वाली आँखें नहीं: मैस्कॉट अपने 17 एनिमेशन के बीच स्विच करता है।
  • पेज पर चलकर आना-जाना नहीं: enter और exit अपनी जगह पर ही चलते हैं।
  • चेहरे के एक्सप्रेशन और हाथ हिलाने के लिए फ़्लैट आर्टवर्क चाहिए; 3D मैस्कॉट पूरे के पूरे एक साथ हिलते हैं।
असली आउटपुट

डिलीवर की गई फ़ाइलें, ठीक वैसी ही जैसी आप डाउनलोड करेंगे।

MP4 हर सेट

1080 × 1080, 60 fps पर। यहाँ: Gummo का हाथ हिलाना (wave), डिलीवर किए गए सेट से।

ट्रांसपेरेंट WebM और MOV हर सेट

अल्फ़ा चैनल शामिल है, इसलिए पीछे का चेकरबोर्ड दिखता है। MOV, Apple ऐप और एडिटर के लिए अल्फ़ा के साथ HEVC है।

Kiko thinking, GIF आउटपुट

GIF हर सेट

डॉक्स, ईमेल और चैट के लिए हल्के प्रीव्यू। Kiko का “thinking” लूप।

9:16 लॉन्च वीडियो हर सेट

स्टोरीज़ और स्प्लैश स्क्रीन के लिए 1080 × 1920। Sizzle का लॉन्च इंट्रो।

kiko.riv · 150 KB

CharacterStateMachine
नंबर इनपुट mood
0-9: idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention
ट्रिगर: success · error · yes · no · enter · exit
LaunchStateMachine
launch → idle, एक बार चलता है

Rive स्टेट मशीन हर सेट

17 वीडियो की जगह एक छोटी-सी फ़ाइल। इसी से इस पेज के ऊपर वाला डेमो चलता है।

import { useRive, useStateMachineInput } from "@rive-app/react-canvas";

export function Kiko({ mood = 0 }) {
  const { rive, RiveComponent } = useRive({
    src: "/kiko.riv",
    stateMachine: "CharacterStateMachine",
    autoplay: true,
  });
  const input = useStateMachineInput(rive, "CharacterStateMachine", "mood");
  if (input) input.value = mood; // 0 idle · 1 happy · 2 wave · 3 thinking · 4 sad · 5 loading …
  return <RiveComponent style={{ width: 320, height: 320 }} />;
}

पेस्ट करने के लिए तैयार कोड हर सेट

आपके कैरेक्टर के नाम वाले वेब, React और SwiftUI कंपोनेंट।

हर प्लान में शामिल फ़ॉर्मेट
फ़ॉर्मेटस्पेसिफ़िकेशनStarter और All in one
MP41080 × 1080, 60 fps, सभी 17 एनिमेशनशामिल
9:16 लॉन्च वीडियो1080 × 1920 MP4शामिल
GIF480 px प्रीव्यू, सॉलिड बैकग्राउंडशामिल
Rive (.riv)वेक्टर; Data Binding व्यू मॉडल + लेगेसी इनपुट: लूप के लिए मूड, वन-शॉट के लिए ट्रिगर, लॉन्च मशीनशामिल
ट्रांसपेरेंट WebMअल्फ़ा के साथ VP9, 1080 × 1080शामिल
ट्रांसपेरेंट MOVअल्फ़ा के साथ HEVCशामिल
कोडवेब (HTML), React और SwiftUI कंपोनेंटशामिल
सब डाउनलोड करें (.zip)Rive फ़ाइल, कोड, README और पोस्टर एक ही आर्काइव मेंशामिल
वीडियो एक्सपोर्टMP4, GIF, ट्रांसपेरेंट WebM और MOV, 9:16: सेट पेज पर फ़ॉर्मेट और एनिमेशन चुनें, लगभग एक मिनट में तैयारशामिल
AI असिस्टेंट (MCP)Claude, Cursor, VS Code और Codexशामिल
प्लान

फ़्री में शुरू करें। ज़रूरत हो तो अपग्रेड करें।

इंटरैक्टिव .riv, ट्रांसपेरेंट वीडियो और वेब कोड हर पेड प्लान में हैं, Starter ($20/माह) से। MP4 और GIF का बैकग्राउंड सॉलिड होता है, जो सिर्फ़ उसी रंग वाले पेज पर घुल-मिल जाता है। कीमतें USD में; टैक्स की गणना चेकआउट पर Creem करता है।

Free

$0हमेशा के लिए

अपने लोगो और कैरेक्टर के साथ आज़माएँ।

फ़्री में शुरू करें
  • लोगो एनिमेशन आइडिया (3 कॉन्सेप्ट)
  • आपके कैरेक्टर का ऐप-स्क्रीन प्रीव्यू
  • कार्ड की ज़रूरत नहीं
  • 2 AI डिज़ाइन (लोगो या कैरेक्टर)
  • Claude, Cursor, Codex से काम करता है
  • ईमेल सपोर्ट
सबसे लोकप्रिय

Starter

$20/माह

एक ऐप या वेबसाइट के लिए।

Starter लें
  • 3 लोगो एनिमेशन हर महीने
  • 3 कैरेक्टर सेट हर महीने
  • Rive, ट्रांसपेरेंट वीडियो और कोड
  • 12 AI डिज़ाइन हर महीने
  • 1 रिफ़ाइन हर लोगो एनिमेशन पर
  • सपोर्ट टिकट

All in one

$100/माह

टीमों और कई ब्रांड के लिए।

All in one लें
  • 15 लोगो एनिमेशन हर महीने
  • 10 कैरेक्टर सेट हर महीने
  • सिनेमैटिक 3D वीडियो शामिल
  • 40 AI डिज़ाइन हर महीने
  • 3 रिफ़ाइन हर लोगो एनिमेशन पर
  • प्रायोरिटी बिल्ड और सपोर्ट
FAQ

शुरू करने से पहले।

ज़्यादा जानकारी पूरे FAQ में।

क्या मैं मैस्कॉट को Webflow, WordPress, Framer या Shopify में जोड़ सकता हूँ?

हाँ। Webflow का Rive एलिमेंट और Framer का Rive प्लगइन इंटरैक्शन से इनपुट चला सकते हैं। WordPress में Rive प्लगइन या Custom HTML ब्लॉक चाहिए। Shopify में Rive सेक्शन नहीं है, इसलिए फ़ाइल अपलोड करें और Custom Liquid से एम्बेड करें, या थीम के वीडियो सेक्शन में ट्रांसपेरेंट वीडियो इस्तेमाल करें।

क्या ट्रांसपेरेंट मैस्कॉट वीडियो Safari में चलता है?

हाँ, अगर आप दोनों फ़ाइलें लिस्ट करें। Safari VP9 alpha को नज़रअंदाज़ करता है, इसलिए HEVC-alpha MOV को type='video/quicktime; codecs="hvc1.1.6.H120.b0"' के साथ पहले रखें और WebM को दूसरे नंबर पर। Safari MOV चुनता है; Chrome, Firefox और Edge WebM लेते हैं। .riv हर ब्राउज़र में ट्रांसपेरेंट रहता है।

क्या वेबसाइट मैस्कॉट से मेरे पेज की स्पीड कम होगी?

नहीं, अगर यह आपके मुख्य कंटेंट के बाद लोड हो। फ़्लैट-आर्ट .riv लगभग 40 KB की होती है, लेकिन Rive वेब रनटाइम लगभग 373 KB brotli (canvas-lite) जोड़ता है, इसलिए मैस्कॉट के स्क्रॉल होकर दिखने पर इसे लेज़ी लोड करें। कैनवस को तय चौड़ाई और ऊँचाई दें ताकि लोड होते समय कुछ भी अपनी जगह से न खिसके।

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

हाँ। किसी फ़ील्ड पर फ़ोकस आने पर, फ़ॉर्म सबमिट होते समय और सेक्शन के स्क्रॉल होकर दिखने पर मूड सेट करें (इसके लिए IntersectionObserver अच्छा काम करता है), फिर नतीजे के हिसाब से success, error, yes या no ट्रिगर फ़ायर करें। लॉगिन फ़ॉर्म मैस्कॉट गाइड में पूरी वायरिंग समझाई गई है।

क्या मैस्कॉट की आँखें कर्सर को फ़ॉलो कर सकती हैं?

नहीं। सेट में नज़र (gaze) या पॉइंटर का कोई इनपुट नहीं है, इसलिए मैस्कॉट पॉइंटर को ट्रैक करने के बजाय अपने 17 एनिमेशन के बीच स्विच करता है। आई ट्रैकिंग के लिए किसी एनिमेटर से कस्टम Rive रिग बनवाना होगा। फिर भी होवर पर मूड बदलने से मैस्कॉट रिस्पॉन्सिव लगता है।

वेबसाइट मैस्कॉट के साथ मोशन कम करें सेटिंग का ध्यान कैसे रखें?

matchMedia('(prefers-reduced-motion: reduce)') चेक करें; अगर यह मैच हो, तो मैस्कॉट को idle पर रखें या Rive इंस्टेंस को पॉज़ करें, और वीडियो लूप ऑटोप्ले न करें। WCAG 2.2 के तहत, दूसरे कंटेंट के पास पाँच सेकंड से ज़्यादा चलने वाले लूपिंग मोशन के लिए पॉज़ कंट्रोल भी ज़रूरी है।

और जानें

इस काम के लिए गाइड।

पहले अपने कैरेक्टर के साथ देखें।

फ़्री, आपके ब्राउज़र में। आपकी इमेज आपके डिवाइस पर ही रहती है, जब तक आप छोटी एनिमेटेड क्लिप नहीं माँगते।

फ़्री प्रीव्यू

लोग Charmotion का और किन तरीकों से इस्तेमाल करते हैं

PNG से RiveAI मैस्कॉट एनिमेटरइमेज से कैरेक्टर एनिमेशनiOS ऐप के लिएRive एनिमेशन सर्विसएनिमेटेड लोगो मेकरएनिमेटेड चैटबॉट अवतारस्प्लैश स्क्रीन एनिमेशनलोगो लोडिंग एनिमेशनट्रांसपेरेंट लोगो एनिमेशनमोबाइल ऐप के लिए मैस्कॉटAI मैस्कॉट जनरेटरमैस्कॉट एक्सप्रेशन शीट