Words Preloader
Greeting cycle preloader that exits with a curved SVG wipe. Replay from the demo.
3.6 KB
•Updated on September 3, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-words-preloaderUsage
Code
import { WordsPreloader } from '@/components/spaceui/words-preloader'
export default function SpaceUI() {
return (
<WordsPreloader words={['Hello', 'bonjour', 'Ciao']} duration={2000}>
<YourPage />
</WordsPreloader>
)
}Files
| File | Role |
|---|---|
words-preloader/index.tsx | Overlay, word index, SVG path wipe |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
words | string[] | greetings | Sequence shown before the wipe |
duration | number | 2000 | Milliseconds before exit |
className | string | — | Root class |
children | ReactNode | fallback copy | Content revealed after the preloader |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
On This Page
Powered by