AI Prompts to Add an Animated Splash or Loading Mascot

By the Charmotion team · Updated October 25, 2026

AI coding tools such as Cursor, Claude Code, Lovable, Bolt and v0 can add an animated splash or loading mascot when the prompt states what they usually guess wrong: the OS splash stays static, the intro plays on the first screen, the exact state machine name, a 2.6-second timer because the file fires no end event, one background color and a reduced-motion fallback.

Key takeaways

Paste the shared rules block into the prompt or your project rules so every tool gets the same facts.
Tell the tool the OS launch screen must stay static; otherwise it may try to animate it.
State that the launch file fires no end event, or the tool will invent a callback that never fires.
Name the framework, package and file paths; vague prompts produce Lottie code for a .riv file.
Review the result against a short checklist: color match, timer, safety timeout, reduced motion.

Already have a character or logo? See your character in real app screens: splash, onboarding, loading and empty-state screens. It's free, runs in your browser and uploads nothing.

Why do AI coding tools get animated splash screens wrong?

Because the most common answer in their training data is the wrong one for your app. Ask for "an animated splash screen" with no detail and you often get one of these:

An attempt to put animation in LaunchScreen.storyboard, which may only use standard UIKit classes with no code connections (Apple).
A Lottie component pointed at a .riv file, or a new animation library you did not ask for.
A listener for an "animation finished" event that the file never fires, so the app hangs on the intro.
Rive code run in Expo Go, which cannot load native modules (Rive).
A white flash, because the splash, root view and intro use different colors.
No reduced-motion path at all.

The fix is to give the tool the facts up front. Put them in persistent project instructions so you don't repeat them: Claude Code reads CLAUDE.md and can read AGENTS.md (Claude Code Docs), Cursor reads project rules in .cursor/rules as .mdc files and supports AGENTS.md (Cursor Docs), and Lovable has workspace and project Knowledge that is always in context (Lovable Docs). For Bolt and v0, paste the rules at the top of the chat.

What rules should every splash prompt include?

Paste this block before any framework prompt below, and replace the bracketed values. It assumes a Charmotion launch file (LaunchStateMachine, 2.6-second intro, no end event); if your file differs, change those 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.

Why the timer rule matters: a Rive state machine only emits the events its author built in. A Charmotion launch file plays once, settles on the resting pose and emits nothing, so the only correct way to continue is to wait for its length. Telling the tool not to invent an event name prevents the most common hang.

Charmotion's downloads also include web, React and SwiftUI code next to the .riv, so you can attach a working sample to the prompt instead of describing it.

What prompt adds an animated splash in SwiftUI?

For Cursor or Claude Code in an Xcode project:

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.

The full, hand-written version of this, including the new Rive Apple runtime, is in animated splash screen in SwiftUI.

What prompt adds an animated splash in Expo or React Native?

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.

Background on each step: animated splash in Expo and React Native and Rive in Expo.

What prompt adds an animated splash in Flutter?

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().

The same code, written out and explained: animated splash screen in Flutter.

What prompt adds an animated intro in Next.js, Lovable, Bolt or v0?

Web apps have no OS splash, so the equivalent is a hero or first-paint intro. Lovable, Bolt and v0 typically generate React, so one prompt covers them:

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.

For an interactive mascot on the web instead of video, ask for @rive-app/react-webgl2 with stateMachine: "CharacterViewModelMachine" and autoBind: true (Rive). The source order and codecs follow Jake Archibald's cross-browser approach (Jake Archibald); see transparent video on a website.

What prompt adds a loading mascot instead of a splash?

The same character file can drive loading states. This prompt assumes the file layout from the rules above (a Character view model); rename the properties to match yours:

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.

More on loader timing and accessibility in how to add a loading animation.

How do you check what the AI tool wrote?

Run through this before you merge:

The OS splash is untouched or static. No code in the launch storyboard, no animated drawable outside drawable-v31 on Android.
One background color on splash, root and intro, in light and dark mode.
A timer, not an invented event, ends the intro, plus a safety timeout.
The splash hides after the file loads, not before (no blank frame).
Reduced motion skips the intro (check with the OS setting on, using prefers-reduced-motion on the web) (MDN).
No surprise dependencies. Remove any library the tool added on its own.
Tested on a release build for Expo, and on a real device for all platforms.

Frequently asked questions

Which AI coding tool is best for adding a splash animation?

The tool matters less than the prompt. Cursor and Claude Code work inside your existing native or Expo project; Lovable, Bolt and v0 are strongest on web React apps. Any of them succeeds when you give the state machine names, the fixed intro length, the shared background color and the reduced-motion rule.

Why does my AI-generated splash intro never finish?

Usually because the code waits for an end event the animation file does not fire. A Charmotion LaunchStateMachine emits no event when its 2.6-second intro ends. Replace the listener with a 2,600 ms timer and add a safety timeout so the app always continues.

Should I put splash rules in CLAUDE.md or Cursor rules?

Yes, if more than one person or session will touch the launch flow. Claude Code loads CLAUDE.md (and can read AGENTS.md) every session, and Cursor applies .mdc rules from .cursor/rules, so the timer, color and reduced-motion rules stay in force on every edit.

Quick answers from this guide

Can AI coding tools add an animated splash screen?

Sources

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