Splash Screen

Pro

Launch screen that shows your mark while the app loads, then hands off smoothly to the first screen. Slow starts get a gentle breathing glow instead of a spinner.

Preview

Installation

npx @lumioui/cli add pro/splash-screen

Usage

import { SplashBand, SplashScreen } from "@/components/ui/splash-screen/splash-screen";
<SplashScreen />

Also exported: SplashBand.

Examples

Curtain lift

A food-delivery launch: the orange field lifts away like a shutter, wordmark riding with it, while the home feed rises 32pt into place underneath.

Fade with slow launch

A bank's quiet launch: wordmark on the plain canvas, a "Protected" footer, and a slow sign-in (1.8s) so the light breathes over the mark from 1s — no spinner.

Light from above

A running app's launch, lit from above in green.

Zoom through

A group-chat app's launch: the green field holds the wordmark, it dips, then flies through the screen while the inbox settles in from 1.04×.

API reference

SplashScreen

Prop Type Default
ready* boolean

App is ready (fonts, session, first data). The handoff starts once this is true.

 —
mark* React.ReactNode

The launch mark — your logo or wordmark, sized as on the native splash.

 —
animation
"light" | "zoom" +2 "light" | "zoom" | "fade" | "curtain"

Handoff style. Default "light".

 —
minDuration number

Hold the mark at least this long (ms) so a fast launch doesn't flash. Default 700.

 —
slowAfter number

Breathe the light (or show loadingIndicator) if not ready after this many ms. Default 2000; 0 disables.

 —
loadingIndicator React.ReactNode

Shown on slow launches in place of the breathing light.

 —
footer React.ReactNode

Bottom slot — a "from Company" line or legal text.

 —
onHidden () => void

Fires once the splash has finished and unmounted.

 —
className string

Classes for the splash field. Default "bg-background".

 —
contentClassName string

Classes for the content wrapper.

 —
children React.ReactNode

The app content revealed by the handoff.

 —

SplashBand

Prop Type Default
index number

Band position — header 0, hero 1, content 2… switches on 120ms apart.

 0
delay number

Override the wait (ms) after the handoff starts, e.g. rows at 40ms.

 —
className string —