कंटेंट पर जाएँ
charmotion
शुरू करें
स्प्लैश स्क्रीन एनिमेशन

आपके ऐप आइकन से लॉन्च एनिमेशन, आपकी पहली स्क्रीन के लिए तैयार।

अपना ऐप आइकन, लोगो या मैस्कॉट अपलोड करें। आपको लगभग 2.6 सेकंड का लॉन्च इंट्रो मिलता है जो आपके कैरेक्टर के शांत पोज़ पर खत्म होता है, फिर ऐप तैयार होने तक idle या loading पर चला जाता है। यह Rive LaunchStateMachine, ट्रांसपेरेंट HEVC MOV और WebM, 1080 × 1920 वीडियो और वेब, React और SwiftUI कोड के रूप में मिलता है।

अपने ऐप में देखें प्लान देखें
इंट्रो
लगभग 2.6 सेकंड, idle पर खत्म
फ़ाइलें
.riv, MOV, WebM, MP4, 9:16
कोड
वेब, React, SwiftUI
प्लान
Starter, $20/माह
Sizzle, Charmotion का एक डेमो कैरेक्टर लाइव Rive फ़ाइल
लूप
एक बार चलाएँ

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

इंट्रो कहाँ चलता है: नेटिव स्प्लैश के ठीक बाद

1. नेटिव स्प्लैश स्थिर रहता है

iOS आपका कोड चलने से पहले एक स्टैटिक लॉन्च स्क्रीन दिखाता है, और Android 12 का SplashScreen API सिर्फ़ AnimatedVectorDrawable आइकन को एनिमेट करता है। दोनों को स्टैटिक रखें, उसी बैकग्राउंड कलर और आइकन पोज़िशन के साथ जो आपकी पहली स्क्रीन पर है।

2. आपकी पहली स्क्रीन इंट्रो चलाती है

LaunchStateMachine इंट्रो को एक बार चलाता है और idle पर रुक जाता है। यह खत्म होने पर कोई इवेंट फ़ायर नहीं करता, इसलिए हैंड-ऑफ़ का समय इंट्रो की लंबाई (लगभग 2.6 सेकंड) के हिसाब से रखें या ऐप तैयार होते ही आगे बढ़ें।

3. loading या होम पर हैंड-ऑफ़ करें

डेटा लोड होते समय CharacterViewModelMachine पर स्विच करें और mood को 5 (loading) पर सेट करें, या सीधे अपनी होम स्क्रीन पर जाएँ। कैरेक्टर कभी किसी अटपटे फ़्रेम पर नहीं रुकता।

हर प्लेटफ़ॉर्म पर क्या इस्तेमाल करें

प्लेटफ़ॉर्मफ़ाइलकैसे
iOS (SwiftUI, UIKit).riv या HEVC-alpha MOVडिलीवर किया गया SwiftUI व्यू, या MOV के लिए AVPlayer
Android.rivसिस्टम स्प्लैश के बाद, आपकी पहली Activity पर rive-android
Flutter.riv + READMErive पैकेज; इंट्रो शुरू होते ही flutter_native_splash हटा दें
React Native, Expo.riv + READMEडेवलपमेंट बिल्ड में @rive-app/react-native
वेब और PWA.riv या ट्रांसपेरेंट WebM + MOVडिलीवर किया गया वेब और React कोड

शामिल नहीं है: Lottie फ़ाइलें, एनिमेटेड नेटिव OS स्प्लैश (Android के लिए AnimatedVectorDrawable चाहिए) और एनिमेटेड होम-स्क्रीन आइकन (iOS या Android पर थर्ड-पार्टी ऐप के लिए उपलब्ध नहीं)।

असली आउटपुट

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

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, ट्रांसपेरेंट MOV और WebM और कोड हर पेड प्लान में हैं, Starter ($20/माह) से। हर सेट में लॉन्च MP4, GIF और 9:16 वीडियो के रूप में भी है, जो स्टोर लिस्टिंग या सोशल पोस्ट के लिए ठीक है। कीमतें 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 में।

क्या iOS की लॉन्च स्क्रीन खुद एनिमेट हो सकती है?

नहीं। Apple की लॉन्च स्क्रीन एक स्टैटिक storyboard है, जिसे iOS आपका कोड चलने से पहले दिखाता है। इंट्रो को अपने पहले SwiftUI या UIKit व्यू में उसी बैकग्राउंड पर चलाएँ, ताकि लॉन्च स्क्रीन से एनिमेशन पर स्विच दिखाई ही न दे।

क्या लॉन्च इंट्रो Android 12 SplashScreen API के साथ काम करता है?

उसके अंदर नहीं: SplashScreen API सिर्फ़ AnimatedVectorDrawable आइकन को एनिमेट करता है, जो हम नहीं बनाते। वहाँ स्टैटिक आइकन रखें, सिस्टम स्प्लैश को जल्दी हटाएँ, फिर अपनी पहली स्क्रीन पर उसी बैकग्राउंड पर Rive इंट्रो चलाएँ।

क्या मैं स्प्लैश एनिमेशन को Flutter, React Native या Expo में इस्तेमाल कर सकता हूँ?

हाँ, .riv और उसके README के साथ; डिलीवर किए गए कोड स्निपेट सिर्फ़ वेब, React और SwiftUI के लिए हैं। Flutter में flutter_native_splash को स्टैटिक रखें और इंट्रो शुरू होते ही उसे हटा दें। Expo में SplashScreen.preventAutoHideAsync() कॉल करें और Rive व्यू ड्रॉ होने लगे तब hideAsync() कॉल करें; Rive के लिए डेवलपमेंट बिल्ड चाहिए, Expo Go नहीं।

स्प्लैश स्क्रीन एनिमेशन कितना लंबा होना चाहिए?

छोटा। हमारा लॉन्च इंट्रो लगभग 2.6 सेकंड चलता है और idle पर खत्म होता है, और ऐप तैयार होते ही आप loading या अपनी होम स्क्रीन पर जा सकते हैं। अगर आपका ऐप जल्दी शुरू होता है, तो इसे हर कोल्ड स्टार्ट पर नहीं, सिर्फ़ पहली बार लॉन्च पर चलाने पर विचार करें।

क्या लॉन्च एनिमेशन से ऐप स्टार्ट धीमा हो जाएगा?

नहीं, अगर यह स्टार्टअप के काम से पहले नहीं, बल्कि उसके साथ-साथ चले। इंट्रो चलते समय नेटवर्क और डेटाबेस का काम शुरू करें और दोनों पूरे होते ही आगे बढ़ें। फ़्लैट-आर्ट .riv लगभग 40 KB की होती है, लेकिन Rive रनटाइम आपके ऐप का साइज़ बढ़ाता है, इसलिए अगर साइज़ की सीमा कड़ी है तो वह आँकड़ा जाँच लें।

स्प्लैश एनिमेशन Lottie में मिलता है या Rive में?

Rive में, साथ में ट्रांसपेरेंट वीडियो भी। Rive ऐसे इंट्रो के लिए सही है जो उसी फ़ाइल में एक इंटरैक्टिव मैस्कॉट पर आगे बढ़ता है; डिटेल्ड 3D आइकन बिना किसी रनटाइम के HEVC MOV या WebM के रूप में भी काम करते हैं। हम Lottie JSON डिलीवर नहीं करते। ज़्यादा जानकारी स्प्लैश स्क्रीन के लिए Lottie बनाम Rive में।

और जानें

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

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

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

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

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

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