एनिमेटेड स्प्लैश या लोडिंग मैस्कॉट जोड़ने के लिए AI प्रॉम्प्ट

AI coding tools एनिमेटेड splash screens में गलती क्यों करते हैं?

क्योंकि उनके training data में सबसे आम जवाब आपके ऐप के लिए गलत होता है। बिना किसी detail के "एक एनिमेटेड splash screen" माँगें, तो अक्सर इनमें से कुछ मिलता है:

• LaunchScreen.storyboard में एनिमेशन डालने की कोशिश, जबकि उसमें सिर्फ़ स्टैंडर्ड UIKit classes इस्तेमाल हो सकती हैं और कोई code connection नहीं हो सकता (Apple)।
• .riv फ़ाइल की ओर इशारा करता Lottie component, या कोई नई animation library जो आपने माँगी ही नहीं।
• किसी "animation finished" event का listener, जिसे फ़ाइल कभी फ़ायर नहीं करती, इसलिए ऐप इंट्रो पर ही अटक जाता है।
• Expo Go में चलाया गया Rive code, जबकि Expo Go native modules लोड नहीं कर सकता (Rive)।
• सफ़ेद flash, क्योंकि splash, root view और इंट्रो अलग-अलग कलर इस्तेमाल करते हैं।
• मोशन कम करें सेटिंग के लिए कोई रास्ता ही नहीं।

इसका हल यह है कि tool को ज़रूरी तथ्य शुरू में ही दे दें। उन्हें स्थायी project instructions में रखें ताकि बार-बार दोहराना न पड़े: Claude Code CLAUDE.md पढ़ता है और AGENTS.md भी पढ़ सकता है (Claude Code Docs), Cursor .cursor/rules में project rules को .mdc फ़ाइलों के रूप में पढ़ता है और AGENTS.md को सपोर्ट करता है (Cursor Docs), और Lovable में workspace और project Knowledge होता है जो हमेशा context में रहता है (Lovable Docs)। Bolt और v0 के लिए rules को chat में सबसे ऊपर पेस्ट करें।

हर splash prompt में कौन से rules होने चाहिए?

नीचे दिए किसी भी framework prompt से पहले यह block पेस्ट करें और brackets वाली values बदल दें। यह मानकर चलता है कि आपके पास Charmotion की launch फ़ाइल है (LaunchStateMachine, 2.6 सेकंड का इंट्रो, कोई end event नहीं); अगर आपकी फ़ाइल अलग है, तो वे lines बदल दें।

Rules for the launch animation (follow exactly):
- The OS launch screen stays static. Do not try to animate
  LaunchScreen.storyboard, UILaunchScreen, the Expo splash config
  or flutter_native_splash. The animation plays on the FIRST SCREEN.
- Asset: [assets/launch.riv]. State machine: "LaunchStateMachine".
  It plays a 2.6 s intro once and settles on the resting icon.
- The file fires NO end event. Do not listen for "introDone",
  "onComplete" or any other event. Wait 2.6 s with a timer, then
  continue. Add a 4 s safety timeout in case the file fails to load.
- Background color [#0E1116] must be identical on the native
  splash, the root view and the intro screen (light and dark).
- Show the intro at the same size and center position as the icon
  on the native splash, so there is no visible jump.
- Reduced motion: if the user has it enabled, skip the intro and
  show the still icon [assets/icon_rest.png], then continue.
- Never block the app longer than the intro. Do not add extra delay.
- Do not add Lottie or any other animation library.

timer वाला rule क्यों ज़रूरी है: Rive स्टेट मशीन सिर्फ़ वही events भेजती है जो उसके author ने बनाए हैं। Charmotion की launch फ़ाइल एक बार चलती है, रुके हुए pose पर ठहर जाती है और कोई event नहीं भेजती, इसलिए आगे बढ़ने का एकमात्र सही तरीका उसकी अवधि तक इंतज़ार करना है। tool को कोई event name न गढ़ने के लिए कहने से ऐप के अटकने की सबसे आम समस्या टल जाती है।

Charmotion के downloads में .riv के साथ web, React और SwiftUI code भी मिलता है, इसलिए आप प्रॉम्प्ट में उसका वर्णन करने के बजाय एक काम करता sample जोड़ सकते हैं।

SwiftUI में एनिमेटेड splash जोड़ने के लिए कौन सा प्रॉम्प्ट इस्तेमाल करें?

Xcode project में Cursor या Claude Code के लिए:

Add a launch intro to this SwiftUI app.

[paste the rules block]

Details:
- Add the RiveRuntime Swift package (rive-ios) if it is missing.
- Bundle launch.riv in the app target.
- Create LaunchIntroView: full-screen Color("LaunchBackground"),
  centered 160x160 RiveViewModel(fileName: "launch",
  stateMachineName: "LaunchStateMachine").view().
- In the App struct, show LaunchIntroView over ContentView with a
  @State showIntro = true. After 2.6 s (Task.sleep), set it to false
  with a 0.25 s opacity transition.
- Read @Environment(\.accessibilityReduceMotion). If true, do not
  show the intro at all.
- Set UILaunchScreen in Info.plist: UIColorName = LaunchBackground,
  UIImageName = IconRest (same size as the intro's icon).
- Do not modify LaunchScreen.storyboard beyond static views.
Show me the files you changed.

इसका पूरा, हाथ से लिखा version, नए Rive Apple runtime के साथ, SwiftUI में एनिमेटेड स्प्लैश स्क्रीन में है।

Expo या React Native में एनिमेटेड splash जोड़ने के लिए कौन सा प्रॉम्प्ट इस्तेमाल करें?

Add an animated launch intro to this Expo app (Expo Router).

[paste the rules block]

Details:
- Use expo-splash-screen: call SplashScreen.preventAutoHideAsync()
  in global scope in app/_layout.tsx. Call SplashScreen.hideAsync()
  only after the Rive file has loaded.
- In app.json, set the expo-splash-screen plugin backgroundColor,
  image (assets/icon-rest.png), imageWidth 160 and dark options, and
  the same root "backgroundColor". Install expo-system-ui if needed.
- Use @rive-app/react-native with react-native-nitro-modules, installed
  with npx expo install. This needs a development build, not Expo Go.
- Add "riv" to resolver.assetExts in metro.config.js.
- Create components/LaunchIntro.tsx: useRiveFile(require(...)),
  RiveView with stateMachineName="LaunchStateMachine", autoPlay,
  160x160, centered on the background color. Call onDone after
  2600 ms with setTimeout. Add a 4000 ms safety timeout.
- Check AccessibilityInfo.isReduceMotionEnabled(); if true, hide the
  splash and call onDone immediately.
- Do not use Lottie. Do not listen for any Rive event.

हर स्टेप की पूरी जानकारी: Expo और React Native में एनिमेटेड splash और Expo में Rive।

Flutter में एनिमेटेड splash जोड़ने के लिए कौन सा प्रॉम्प्ट इस्तेमाल करें?

Add an animated launch intro to this Flutter app.

[paste the rules block]

Details:
- Keep flutter_native_splash for the native splash (color [#0E1116],
  image assets/icon_rest.png). It stays static.
- In main(): binding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: binding);
  await RiveNative.init();
- Add the rive package. Create IntroPage (StatefulWidget) as home:
  load File.asset('assets/launch.riv', riveFactory: Factory.rive),
  create RiveWidgetController with
  StateMachineSelector.byName('LaunchStateMachine'), render
  RiveWidget in a 160x160 SizedBox centered on the background color.
- Call FlutterNativeSplash.remove() after the file loads, wait
  2600 ms, then Navigator.pushReplacement to the existing home page.
- If MediaQuery.disableAnimationsOf(context) (or
  platformDispatcher.accessibilityFeatures.disableAnimations) is true,
  show Image.asset('assets/icon_rest.png') and navigate immediately.
- Dispose the controller and the file in dispose().

यही code, विस्तार से लिखा और समझाया गया: Flutter में एनिमेटेड स्प्लैश स्क्रीन।

Next.js, Lovable, Bolt या v0 में एनिमेटेड इंट्रो जोड़ने के लिए कौन सा प्रॉम्प्ट इस्तेमाल करें?

Web apps में OS splash नहीं होता, इसलिए इसका विकल्प hero या first-paint इंट्रो है। Lovable, Bolt और v0 आमतौर पर React generate करते हैं, इसलिए एक ही प्रॉम्प्ट तीनों के लिए काम करता है:

Add an animated logo intro to the hero of this React / Next.js page.

Assets (in /public):
- logo-intro.webm (VP9 with alpha), logo-intro.mov (HEVC with alpha),
  logo-rest.webp (the still final frame, same size).

Rules:
- Render a <video autoplay muted playsinline> with poster="/logo-rest.webp",
  fixed width and height (no layout shift), and two sources in this
  order: logo-intro.mov with type 'video/mp4; codecs="hvc1"', then
  logo-intro.webm with type "video/webm".
- Do not loop. When it ends, keep the last frame (it matches the poster).
- If play() rejects, keep showing the poster.
- With prefers-reduced-motion: reduce, render only the poster image.
- In Next.js, make the component a client component.
- Do not add Lottie, GSAP or any other animation library.

वेब पर वीडियो के बजाय interactive मैस्कॉट के लिए @rive-app/react-webgl2 माँगें, साथ में stateMachine: "CharacterViewModelMachine" और autoBind: true (Rive)। sources का क्रम और codecs Jake Archibald के cross-browser तरीके पर आधारित हैं (Jake Archibald); देखें वेबसाइट पर ट्रांसपेरेंट वीडियो।

splash के बजाय loading मैस्कॉट जोड़ने के लिए कौन सा प्रॉम्प्ट इस्तेमाल करें?

यही कैरेक्टर फ़ाइल loading स्टेट भी चला सकती है। यह प्रॉम्प्ट ऊपर के rules वाला file layout मानकर चलता है (एक Character view model); properties के नाम अपनी फ़ाइल के हिसाब से बदलें:

Show the mascot while [the image generation request] is pending.

- File: [assets/character.riv]. State machine: "CharacterViewModelMachine".
  View model "Character" with a number property "mood" and triggers
  "success" and "error".
- Mood values: 0 idle, 3 thinking, 5 loading.
- Before the request: set mood = 5. On success: fire "success",
  then set mood = 0. On failure: fire "error", then set mood = 0.
  Triggers play once and return to the current mood by themselves.
- Only show the mascot if the request takes longer than 600 ms.
- Keep visible "Loading…" text with role="status" (web) or an
  accessibility label (native). Hide the animation itself from
  screen readers.
- Reduced motion: show the still image and the text, no animation.
- If the file has no "Character" view model, fall back to the
  legacy "CharacterStateMachine" with the same input names.

loader की timing और एक्सेसिबिलिटी के बारे में और जानकारी loading एनिमेशन कैसे जोड़ें में है।

AI tool ने जो लिखा है, उसे कैसे जाँचें?

merge करने से पहले यह सब जाँच लें:

1. OS splash में कोई बदलाव नहीं है या वह static है। launch storyboard में कोई code नहीं, और Android पर drawable-v31 के बाहर कोई animated drawable नहीं।
2. एक ही बैकग्राउंड रंग splash, root और इंट्रो पर, light और dark mode दोनों में।
3. इंट्रो एक timer से खत्म होता है, किसी गढ़े गए event से नहीं, साथ में एक safety timeout भी है।
4. splash फ़ाइल load होने के बाद छिपता है, पहले नहीं (कोई खाली फ़्रेम नहीं)।
5. मोशन कम करें चालू होने पर इंट्रो skip होता है (OS setting चालू करके जाँचें, वेब पर prefers-reduced-motion का इस्तेमाल करके) (MDN)।
6. कोई अनचाही dependency नहीं। tool ने अपने आप जो भी library जोड़ी हो, उसे हटा दें।
7. Expo के लिए release build पर टेस्ट किया गया, और सभी platforms के लिए असली device पर।

अक्सर पूछे जाने वाले सवाल

splash एनिमेशन जोड़ने के लिए कौन सा AI coding tool सबसे अच्छा है?

tool से ज़्यादा प्रॉम्प्ट मायने रखता है। Cursor और Claude Code आपके मौजूदा native या Expo project के अंदर काम करते हैं; Lovable, Bolt और v0 web React apps पर सबसे अच्छे हैं। जब आप स्टेट मशीन के नाम, इंट्रो की तय अवधि, साझा बैकग्राउंड रंग और reduced-motion rule बता देते हैं, तो इनमें से कोई भी tool काम कर जाता है।

मेरा AI से बना splash इंट्रो कभी खत्म क्यों नहीं होता?

आमतौर पर इसलिए कि code एक ऐसे end event का इंतज़ार करता है जो एनिमेशन फ़ाइल कभी फ़ायर नहीं करती। Charmotion का LaunchStateMachine अपना 2.6 सेकंड का इंट्रो खत्म होने पर कोई event नहीं भेजता। listener की जगह 2,600 ms का timer लगाएँ और एक safety timeout जोड़ें ताकि ऐप हमेशा आगे बढ़े।

क्या splash rules को CLAUDE.md या Cursor rules में रखना चाहिए?

हाँ, अगर launch flow पर एक से ज़्यादा लोग या sessions काम करेंगे। Claude Code हर session में CLAUDE.md load करता है (और AGENTS.md भी पढ़ सकता है), और Cursor .cursor/rules से .mdc rules लागू करता है, इसलिए timer, रंग और reduced-motion rules हर edit पर लागू रहते हैं।

इस गाइड से झटपट जवाब

• क्या AI coding tools एनिमेटेड स्प्लैश स्क्रीन जोड़ सकते हैं?

स्रोत

• Specifying your app's launch screen, Apple Developer Documentation
• Adding Rive to Expo, Rive
• How Claude remembers your project (CLAUDE.md, AGENTS.md), Claude Code Docs
• Rules, Cursor Docs
• Knowledge, Lovable Docs
• Web (JS) runtime, Rive
• Video with alpha transparency on the web, Jake Archibald
• prefers-reduced-motion, MDN Web Docs