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

आपका ऐप जिन भी प्लेटफ़ॉर्म पर चलता है, सबके लिए एक ही मैस्कॉट फ़ाइल।

अपना मैस्कॉट अपलोड करें और साफ़ लिखे कॉन्ट्रैक्ट के साथ एक .riv पाएँ: लूपिंग स्टेट के लिए 0 से 9 तक का मूड नंबर, और success, error, yes, no, enter और exit के लिए ट्रिगर। यही फ़ाइल Flutter, React Native, Android, iOS और वेब पर एक ही कैरेक्टर चलाती है, इसलिए स्ट्रीक, क्विज़ के जवाब और खाली स्क्रीन हर जगह एक जैसे दिखते हैं।

अपने ऐप में देखें प्लान देखें
कॉन्ट्रैक्ट
mood 0-9 + 6 ट्रिगर
रनटाइम
Flutter, RN, Android, iOS, वेब
कोड
SwiftUI, React, वेब + README
प्लान
Starter, $20/माह
Pebble, Charmotion का एक डेमो कैरेक्टर लाइव Rive फ़ाइल
लूप
एक बार चलाएँ

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

हर रनटाइम पर एक ही कॉन्ट्रैक्ट

आपका कोड किससे बात करता है

CharacterViewModelMachine, Character व्यू मॉडल के साथ: नंबर इनपुट mood (0 idle, 1 happy, 2 wave, 3 thinking, 4 sad, 5 loading, 6 listening, 7 talking, 8 sleeping, 9 attention) और ट्रिगर success · error · yes · no · enter · exit।

CharacterStateMachine यही ग्राफ़ क्लासिक इनपुट के रूप में देता है, और LaunchStateMachine इंट्रो चलाता है।

हर प्लेटफ़ॉर्म के लिए

  • iOS: दोनों Apple रनटाइम के लिए SwiftUI व्यू, शामिल।
  • वेब और React: एम्बेड और कंपोनेंट, शामिल।
  • Flutter: rive पैकेज।
  • Android: app.rive:rive-android।
  • React Native: @rive-app/react-native; व्यू मॉडल इस्तेमाल करें, क्योंकि Nitro v0.6 में इनपुट API हटा दिए गए थे।

Flutter, Android और React Native के लिए आपको .riv और कॉन्ट्रैक्ट वाला README मिलता है, कोड स्निपेट नहीं। Android, Flutter और React Native पर Rive गाइड देखें।

स्ट्रीक, क्विज़ और खाली स्क्रीन के लिए बना

ऐप का पलएनिमेशनप्रकार
रोज़ की स्ट्रीक बनी रहीsuccess, फिर happyवन-शॉट, लूप
सही जवाबsuccess या yesवन-शॉट
गलत जवाबerror या noवन-शॉट
लेसन या सिंक लोड हो रहा हैloadingलूप
स्ट्रीक खतरे में, रिमाइंडरattentionलूप
स्ट्रीक टूट गईsadलूप
खाली स्क्रीनsleepingलूप
ऑनबोर्डिंगwave, enterलूप, वन-शॉट

यह Duolingo जैसा मैस्कॉट फ़ीडबैक है: शांत लूप के बीच छोटे रिएक्शन, जिन्हें आपका कोड फ़ायर करता है। शामिल नहीं: Lottie फ़ाइलें और 17 एनिमेशन के अलावा कस्टम सीन।

असली आउटपुट

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

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

क्या एक ही मैस्कॉट फ़ाइल Flutter और React Native में काम करती है?

हाँ। Flutter इसे rive पैकेज से चलाता है और React Native @rive-app/react-native से। इनके लिए हम कोड की जगह एक README देते हैं जिसमें स्टेट मशीन के नाम, मूड वैल्यू और ट्रिगर के नाम होते हैं। React Native के Nitro रनटाइम पर Data Binding के साथ CharacterViewModelMachine इस्तेमाल करें, क्योंकि v0.6 में इनपुट API हटा दिए गए थे।

क्या मैस्कॉट Duolingo के उल्लू की तरह स्ट्रीक का जश्न मना सकता है?

हाँ, उसी तरीके से: Duolingo अपने कैरेक्टर को Rive स्टेट मशीन से एनिमेट करता है, जिन्हें ऐप का कोड चलाता है। स्ट्रीक बनी रहने या सही जवाब पर success फ़ायर करें, गलत जवाब पर error या no, और बीच में मूड को happy या sad पर सेट करें। सेट में तय 17 एनिमेशन होते हैं; कस्टम सीन के लिए किसी एनिमेटर की ज़रूरत होगी।

एनिमेटेड मैस्कॉट से मेरे ऐप का साइज़ कितना बढ़ता है?

फ़्लैट आर्टवर्क के लिए .riv फ़ाइल सभी 17 एनिमेशन के साथ लगभग 35 से 45 KB की होती है; Motion मोड में 3D या डिटेल्ड आर्ट के लिए करीब 1 MB। इसके अलावा Rive रनटाइम आपकी बाइनरी का साइज़ बढ़ाता है, इसलिए अगर साइज़ की सीमा कड़ी है तो अपने प्लेटफ़ॉर्म के लिए इसे जाँच लें। MP4 और HEVC MOV फ़ाइलें बिना किसी रनटाइम के चलती हैं।

ऐप मैस्कॉट के लिए Lottie की जगह Rive क्यों?

मैस्कॉट आपके ऐप के चलते समय स्टेट बदलता रहता है। Rive स्टेट मशीन यह काम एक ही फ़ाइल में करती है और स्टेट के बीच ब्लेंड करती है; Lottie के साथ आपके कोड को अलग-अलग लीनियर एनिमेशन बदलने पड़ते हैं। हम Rive और वीडियो देते हैं, Lottie JSON नहीं।

क्या ऐप मैस्कॉट ऑफ़लाइन काम करता है?

हाँ। .riv फ़ाइल को अपने ऐप के साथ बंडल करें, फिर यह बिना कनेक्शन के चलती है; हमारे सर्वर से कुछ भी स्ट्रीम नहीं होता। MP4, MOV और WebM फ़ाइलें भी ऑफ़लाइन काम करती हैं।

और जानें

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

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

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

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

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

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