# Motion Preloader Split

Page preloader with a split screen reveal.

- id: `motion-preloader-split`
- Page: https://agentic-ui-kit.com/components/motion-preloader-split
- Live preview: https://agentic-ui-kit.com/live/component/motion-preloader-split?piece=motion-preloader-split

## Install

```bash
agentic-ui add motion-preloader-split
npx shadcn@4.17.0 add @agentic-ui/motion-preloader-split
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** split-reveal, tiles-reveal, counter-reveal, tile-order-diagonal-random-centre, timed-or-real-progress, done-callback, escape-to-skip, contained-or-fullscreen, reduced-motion-skip
- **Intents:** communicate, navigate
- **Suits domains:** marketing, saas, ecommerce, media, social, music
- **Interaction:** keyboard-navigation
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** page preloader with a split screen reveal, loading screen with a percentage counter that slides away, tiles preloader that dissolves to show the page, intro animation for a landing page that skips with reduced motion
- **Avoid when:** Pages that already load fast, where a preloader only adds delay, Dashboards and tools opened many times a day, Real progress without a clear 0 to 100 (use motion-top-loading-bar or motion-progress-animated), Content that must be readable immediately for assistive technology
- **Preserve when adapting:** status-region-once, escape-to-skip, render-nothing-when-done, css-hidden-under-reduced-motion
- **Replace when adapting:** variant, duration, exit-duration, progress, direction, order, brand, label, on-done
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion