Search Documentation

Search guides, functions, classes, interfaces, and more

Create a MobyApps splash screen

Scaffold a static HTML splash for native app startup. Uses @mobyapps/splash only — no @mobyapps/sdk or bridge. Author logic in src/main.ts (import from @mobyapps/splash and motion); pnpm build emits one minified classic dist/main.js via tsup (splash + Motion + app) and cssnano dist/styles.css.

Prerequisites

Scaffold

pnpm create @mobyapps/splash@latest my-splash
cd my-splash
pnpm install
pnpm dev

pnpm create @mobyapps/splash runs the @mobyapps/create-splash scaffold. The runtime library is @mobyapps/splash.

Scripts

CommandPurpose
pnpm devWatch + live reload on :8080
pnpm buildCompile static dist/
pnpm previewBuild once and serve

Ship the dist/ folder.

Deploy modes

ModeHow
AZip dist/ as splash.zip and embed in the native app build
BPut contents under splash/ at the root of the boot miniapp archive (preferred when present)

Native prefers B when present; otherwise A.

Animations with Motion

The scaffold depends on Motion and bundles it with your app and @mobyapps/splash into a single classic dist/main.js (tsup IIFE). Author against the ESM API in src/main.ts:

import { animate } from 'motion'
import splash from '@mobyapps/splash'

animate('#splash_el', { opacity: [0, 1] }, { duration: 0.45, ease: 'easeOut' })

animate('#splash_logo', {
  opacity: [0, 1],
  scale: [0.88, 1],
  y: [16, 0],
}, {
  delay: 0.08,
  type: 'spring',
  stiffness: 260,
  damping: 20,
})
<script src="main.js" defer></script>

Tips:

  • Prefer CSS or a few Motion calls — keep an eye on size budget (main.js ships Motion + splash + your code).
  • Run intro animation on load; keep the update handler focused on progress / complete (see lifecycle).
  • Do not load Motion from a CDN — it must live inside the splash archive for offline cold starts.
  • A smaller motion/mini path is possible later if you drop independent transforms / rich springs.

Next steps