कंटेंट पर जाएँ
charmotion
शुरू करें
लोगो लोडिंग एनिमेशन

आपके अपने लोगो से बना लोडिंग एनिमेशन।

अपना लोगो मार्क अपलोड करें। loading स्टेट आपके असली लोगो का सीमलेस लूप है, और इंतज़ार खत्म होने पर यह success या error रिएक्शन चलाकर वापस स्थिर हो सकता है। रिएक्ट करने वाले लोडर के लिए .riv, ओवरले के लिए ट्रांसपेरेंट WebM और MOV, और जहाँ सिर्फ़ साधारण फ़ाइल चलती हो वहाँ MP4 या GIF इस्तेमाल करें।

अपने ऐप में देखें प्लान देखें
लूप
सीमलेस, आपका लोगो जैसा है वैसा
आखिर में
success या error वन-शॉट
फ़ाइलें
.riv, WebM, MOV, MP4, GIF
प्लान
Starter, $20/माह
Sizzle, Charmotion का एक डेमो कैरेक्टर लाइव Rive फ़ाइल
लूप
एक बार चलाएँ

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

इंतज़ार करें, फिर नतीजा दिखाएँ

const vm = r.viewModelInstance;       // Character view model
vm.number("mood").value = 5;          // loading loop

try {
  await save();
  vm.number("mood").value = 0;        // rest on idle after the reaction
  vm.trigger("success").trigger();    // plays once
} catch {
  vm.number("mood").value = 0;
  vm.trigger("error").trigger();
}

ट्रिगर एक बार चलता है और मौजूदा मूड पर लौट आता है, इसलिए लोगो हमेशा idle पर आकर रुकता है।

काम की बातें

  • यह एक अनिश्चित (indeterminate) लोडर है: इसमें प्रतिशत पूरा होने का कोई इनपुट नहीं है। लंबे इंतज़ार के लिए इसके साथ प्रोग्रेस बार या टेक्स्ट दिखाएँ।
  • आपका लोगो जैसा है वैसा ही एनिमेट होता है। यह CSS, SVG या Lottie स्पिनर नहीं है।
  • GIF सॉलिड बैकग्राउंड पर मिलते हैं; ट्रांसपेरेंट GIF नहीं है। इमेज या वीडियो के ऊपर .riv, या Safari के लिए HEVC MOV के साथ WebM इस्तेमाल करें।
  • लगभग एक सेकंड से कम के इंतज़ार में कुछ न दिखाएँ: झट से दिखकर गायब होने वाला लोडर ज़्यादा धीमा लगता है। लोडिंग एनिमेशन कितनी देर चलने चाहिए, यह भी देखें।

एक लोडर, इंतज़ार की हर जगह के लिए

कहाँफ़ाइल
वेबसाइट प्रीलोडर.riv, या Safari के लिए HEVC MOV के साथ ट्रांसपेरेंट WebM
ऐप लोडिंग स्क्रीन.riv (mood 5), या iOS पर HEVC-alpha MOV
बटन या इनलाइन स्पिनरछोटे साइज़ में .riv
ईमेल, चैट, डॉक्ससॉलिड बैकग्राउंड पर GIF
वीडियो और प्रेज़ेंटेशनट्रांसपेरेंट MOV
असली आउटपुट

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

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 चाहिए, और पेज कंटेंट के ऊपर दिखने वाले लोडर के लिए ट्रांसपेरेंट WebM या MOV: दोनों हर पेड प्लान में हैं, 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 में।

क्या मैं लोगो लोडर को WordPress, Webflow या Framer प्रीलोडर के रूप में इस्तेमाल कर सकता हूँ?

हाँ। Webflow .riv को नेटिव रूप से चलाता है और Framer अपने आधिकारिक Rive प्लगइन से। WordPress में Rive प्लगइन या Custom HTML एम्बेड चाहिए, या वीडियो ब्लॉक में HEVC MOV सोर्स के साथ ट्रांसपेरेंट WebM इस्तेमाल करें। पेज तैयार होते ही प्रीलोडर छिपाएँ, किसी तय देरी के बाद नहीं।

क्या लोडिंग एनिमेशन का ट्रांसपेरेंट GIF वर्ज़न है?

नहीं। GIF 480 px पर सॉलिड बैकग्राउंड के साथ मिलते हैं, जो तब ठीक है जब लोडर मिलते-जुलते कलर पर हो। इमेज या वीडियो के ऊपर लोडर के लिए Chrome, Firefox और Edge के लिए ट्रांसपेरेंट WebM और Safari के लिए HEVC MOV इस्तेमाल करें, या .riv, जो हर जगह ट्रांसपेरेंट है।

क्या लोगो लोडिंग एनिमेशन सीमलेस लूप होता है?

हाँ। लूप एक ही पोज़ पर शुरू और खत्म होता है, इसलिए .riv, वीडियो या GIF में जोड़ पर कोई झटका नहीं दिखता। .riv में स्टेट बदलने पर यह success, error या idle में स्मूद तरीके से बदल भी जाता है।

क्या लोडर प्रतिशत में प्रोग्रेस दिखा सकता है?

नहीं। loading स्टेट एक अनिश्चित (indeterminate) लूप है, जिसमें प्रतिशत का कोई इनपुट नहीं है। लगभग दस सेकंड से लंबे इंतज़ार के लिए इसके पास प्रोग्रेस बार या टेक्स्ट दिखाएँ, और काम पूरा होने पर success ट्रिगर फ़ायर करें।

लोगो लोडिंग एनिमेशन की फ़ाइल कितनी बड़ी होती है?

फ़्लैट लोगो की .riv सभी 17 एनिमेशन के लिए आमतौर पर 35 से 45 KB होती है; डिटेल्ड या 3D लोगो अपने पिक्सेल बनाए रखते हैं, इसलिए लगभग 1 MB मानकर चलें। Rive वेब रनटाइम इसके ऊपर से जुड़ता है (canvas-lite build के लिए लगभग 373 KB brotli)। अगर लोडर को कभी रिएक्ट नहीं करना है, तो एक ट्रांसपेरेंट WebM लूप से रनटाइम की ज़रूरत नहीं पड़ती।

और जानें

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

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

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

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

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

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