# Splash Screen

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.

> Composed · Pro · Mobile-Native — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/splash-screen
```

## Import

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

## Variants

- `curtain` — Curtain lift: `npx @lumioui/cli add pro/splash-screen-curtain`
- `fade` — Fade with slow launch: `npx @lumioui/cli add pro/splash-screen-fade`
- `light` — Light from above: `npx @lumioui/cli add pro/splash-screen-light`
- `zoom` — Zoom through: `npx @lumioui/cli add pro/splash-screen-zoom`

## Props

### SplashScreen

| Prop | Type | Notes |
| --- | --- | --- |
| `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" | "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 | Notes |
| --- | --- | --- |
| `index?` | `number` | Band position — header 0, hero 1, content 2… switches on 120ms apart. |
| `delay?` | `number` | Override the wait (ms) after the handoff starts, e.g. rows at 40ms. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/splash-screen