# Preloader

> he Preloader React component creates an animated loading screen using Framer Motion and React hooks. It cycles through greeting words in various languages ("Hello", "Bonjour", etc.) with a fade-in effect and a small animated dot. A morphing SVG path animates at the end, sliding up to reveal content. The component is responsive, adjusting to window size changes, and supports an optional onComplete callback triggered after the exit animation. It features a full-screen black background with centered, responsive text.

- Author: [shakeeb](https://21st.dev/@info-mdshakeeb)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@info-mdshakeeb/components/preloader

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/info-mdshakeeb/preloader?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt