# Motion Logo Reveal

App splash while the first data loads.

- id: `motion-logo-reveal`
- Page: https://agentic-ui-kit.com/components/motion-logo-reveal
- Live preview: https://agentic-ui-kit.com/live/component/motion-logo-reveal

## Install

```bash
agentic-ui add motion-logo-reveal
npx shadcn@4.17.0 add @agentic-ui/motion-logo-reveal
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** supplied-svg-logo, stroke-draw-then-fill, mask-wipe-variant, splash-sequence-variant, wait-for-app-ready, skippable-splash, fullscreen-splash-focus-handling, static-state-previews, replay, pause-offscreen, semantic-colour-tokens, reduced-motion-fallback
- **Intents:** communicate, track-status
- **Suits domains:** saas, ai-workspace, personal-productivity, ecommerce
- **Interaction:** skip, replay
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** App splash while the first data loads, Loading screen for a desktop or installed web app, Brand moment on a welcome or onboarding screen
- **Avoid when:** Every navigation or route change, where it would delay work that is already loaded, Billing, healthcare, legal or enterprise form screens, where the policy turns it off, Logos made of open strokes or text outlines that do not read as closed shapes
- **Preserve when adapting:** accessible-brand-name, finished-logo-without-motion, wait-for-ready, work-only-in-view, stroke-mark-within-160px
- **Replace when adapting:** logo, brand-tones, wordmark, tagline, labels, duration
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion