कंटेंट पर जाएँ
charmotion
शुरू करें
एनिमेटेड चैटबॉट अवतार

एनिमेटेड चैटबॉट अवतार जो आपके एजेंट के हिसाब से रिएक्ट करता है।

अपना मैस्कॉट या लोगो अपलोड करें और अपने AI चैटबॉट या वॉइस एजेंट के लिए ऐसा अवतार पाएँ जिसमें बातचीत के लिए ज़रूरी सभी स्टेट हों: idle, listening, thinking, loading और talking लूप, साथ में success, error, yes और no रिएक्शन। एजेंट इवेंट आने पर आपका कोड एक मूड नंबर सेट करता है और ट्रिगर फ़ायर करता है, और पूरा कैरेक्टर एक छोटी .riv फ़ाइल में आता है।

अपने ऐप में देखें प्लान देखें
इनपुट
आपका मैस्कॉट, लोगो या एक विवरण
स्टेट
listening, thinking, talking + 14 और
फ़ाइल
.riv, फ़्लैट आर्ट के लिए लगभग 40 KB
प्लान
Starter, $20/माह
Gummo, Charmotion का एक डेमो कैरेक्टर लाइव Rive फ़ाइल
लूप
एक बार चलाएँ

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

एजेंट इवेंट और उनसे जुड़ी अवतार स्टेट

एजेंट इवेंटअवतार स्टेटइनपुट
चैट खुलती है, सेशन कनेक्ट होता हैenter, फिर idleट्रिगर, फिर मूड 0
यूज़र बोलना या टाइप करना शुरू करता हैlisteningmood 6
यूज़र रुक जाता है, मॉडल काम कर रहा हैthinkingmood 3
टूल कॉल या रिट्रीवल चल रहा हैloadingmood 5
जवाब स्ट्रीम हो रहा है या ऑडियो चल रहा हैtalkingmood 7
टास्क पूरा हुआsuccessट्रिगर
रिक्वेस्ट फ़ेल हुईerrorट्रिगर
पुष्टि या इनकारyes, noट्रिगर
काफ़ी देर से किसी ने टाइप नहीं कियाsleepingmood 8
सेशन खत्म होता हैexitट्रिगर

एक नंबर और कुछ ट्रिगर

// One Character view model: number "mood" + triggers
const MOOD = { idle: 0, thinking: 3, loading: 5, listening: 6, talking: 7 };
const vm = r.viewModelInstance;
const mood = (m) => (vm.number("mood").value = MOOD[m]);

// Event names are examples: use your SDK's own.
agent.on("user_speech_started", () => mood("listening"));
agent.on("user_speech_stopped", () => mood("thinking"));
agent.on("tool_call_started",   () => mood("loading"));
agent.on("audio_started",       () => mood("talking"));
agent.on("audio_finished",      () => mood("idle"));
agent.on("task_done",  () => vm.trigger("success").trigger());
agent.on("error",      () => vm.trigger("error").trigger());

डिलीवर किया गया वेब और React कोड Rive इंस्टेंस सेट अप करता है; अपने एजेंट के इवेंट आप कनेक्ट करते हैं। OpenAI Realtime और ElevenLabs की गाइड में सटीक इवेंट नाम दिए गए हैं।

आपको क्या मिलता है

Character व्यू मॉडल वाली .riv फ़ाइल (नंबर mood 0 से 9 और हर रिएक्शन के लिए एक ट्रिगर), वही ग्राफ़ क्लासिक इनपुट के रूप में भी, एक लॉन्च इंट्रो, हर स्टेट का ट्रांसपेरेंट WebM और MOV, और वेब, React और SwiftUI कोड। फ़्लैट आर्टवर्क में सभी 17 एनिमेशन मिलाकर लगभग 40 KB होते हैं।

यह क्या नहीं है

  • लिप-सिंक नहीं: talking एक लूप है जिसे ऑडियो चलते समय चालू किया जाता है, हर आवाज़ के लिए अलग मुँह के आकार नहीं।
  • फ़ोटोरियल इंसानी अवतार या वीडियो प्रेज़ेंटर नहीं।
  • कोई होस्टेड चैट विजेट नहीं: अवतार आपके अपने UI या लॉन्चर में लगता है।
असली आउटपुट

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

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 में।

क्या एनिमेटेड चैटबॉट अवतार आवाज़ के साथ लिप-सिंक करता है?

नहीं। talking स्टेट एक लूप है जिसे आप ऑडियो चलते समय चलाते हैं, और नैचुरल एहसास के लिए आप इसे आवाज़ के लेवल के हिसाब से चालू और बंद कर सकते हैं। हर फ़ोनीम के लिए मुँह के आकार (visemes) सेट का हिस्सा नहीं हैं। लिप-सिंक बनाम एम्प्लिट्यूड पर हमारी गाइड बताती है कि यह कब काफ़ी है।

OpenAI Realtime, ElevenLabs या Vapi इवेंट से अवतार की स्टेट कैसे बदलें?

SDK के इवेंट सुनें और मूड नंबर सेट करें। OpenAI Realtime में input_audio_buffer.speech_started का मतलब listening है और speech_stopped का मतलब thinking; ElevenLabs का onModeChange speaking या listening बताता है; Vapi का वेब SDK speech-start और speech-end भेजता है। कोई टास्क पूरा होने पर success या error ट्रिगर फ़ायर करें।

क्या मैं अवतार को Intercom, Crisp या अपने चैट लॉन्चर में लगा सकता हूँ?

अपने लॉन्चर या चैट UI में, हाँ: अवतार एक canvas या वीडियो एलिमेंट है जिसे आप कंट्रोल करते हैं। Intercom और Crisp अपना मैसेंजर अपने ही फ़्रेम में दिखाते हैं, इसलिए यह उनकी मैसेज लिस्ट के अंदर एनिमेट नहीं हो सकता। जो तरीका काम करता है: उनका डिफ़ॉल्ट लॉन्चर छिपाएँ और मैसेंजर को अपने उस बटन से खोलें जिसमें एनिमेटेड अवतार है।

क्या एनिमेटेड चैटबॉट अवतार मेरी साइट को धीमा कर देगा?

फ़्लैट आर्टवर्क की .riv फ़ाइल सभी 17 स्टेट के लिए लगभग 40 KB की होती है; Motion मोड में 3D आर्ट अपने पिक्सेल बनाए रखता है, इसलिए उसकी फ़ाइल बड़ी होती है (हमारे Aegis डेमो के लिए लगभग 1 MB)। ज़्यादा बड़ा खर्च Rive वेब रनटाइम का है, canvas-lite बिल्ड के लिए लगभग 373 KB brotli, इसलिए इसे पेज के साथ नहीं, बल्कि चैट खुलने पर लोड करें।

AI एजेंट के लिए इंसानी अवतार की जगह मैस्कॉट क्यों इस्तेमाल करें?

कोई भी बने हुए कैरेक्टर को इंसान नहीं समझता, इसलिए यह ईमानदार उम्मीदें तय करता है। यह हर स्टेट में एक जैसा दिखता है, आपके ब्रांड को चैट तक ले जाता है और स्ट्रीम किए गए वीडियो की जगह एक छोटी फ़ाइल से चलता है। फ़ोटोरियल टॉकिंग हेड एक अलग प्रोडक्ट हैं, और Charmotion उन्हें नहीं बनाता।

चैटबॉट अवतार को मोशन कम करें सेटिंग को कैसे संभालना चाहिए?

prefers-reduced-motion: reduce चेक करें और अगर यह सेट है, तो अवतार को idle पर रखें या पॉज़ कर दें। स्टेट को कभी सिर्फ़ मोशन पर निर्भर न रहने दें: "सोच रहा है…" जैसा टेक्स्ट role="status" एलिमेंट में दिखाएँ ताकि स्क्रीन रीडर भी उसे सुन सकें।

और जानें

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

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

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

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

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

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