Greetings Preloader

Refresh to view loader again

Hello

Installation

Usage

import GreetingPreloader from '@/registry/components/preloaders/greetings';

<GreetingPreloader
  greetings={[
    { text: 'Hello', language: 'English' },
    { text: 'Bonjour', language: 'French' },
    { text: '안녕하세요', language: 'Korean' },
    { text: 'Hola', language: 'Spanish' },
    { text: 'Ciao', language: 'Italian' },
    { text: 'नमस्ते', language: 'Hindi' },
    { text: 'こんにちは', language: 'Japanese' },
  ]}
  intervalMs={600}
/>;

How It Works

Cycles through a list of greetings using setInterval.
Uses Framer Motion (AnimatePresence + motion.div) for vertical text transitions.
Uses GSAP for overlay exit animation and page reveal sequencing.
Supports both full-page preloader mode and inline mode.

Greeting Animation

Each greeting fades and slides in (y: 20 → 0).
Previous greeting exits upward (y: -100).
After the final greeting:
- Interval stops.
- onComplete triggers overlay animation.

Overlay Exit (Full Page Mode)

Preloader slides upward (yPercent: -110).
Navbar, headings, and other elements animate into view.
Uses staggered GSAP timeline for smooth sequencing.

API Reference

GreetingPreloader

Prop	Type	Default
`greetings?`	`Array<{ text: string; language: string }>`	-
`intervalMs?`	`number`	`300`
`fullPage?`	`boolean`	`true`

Examples

Custom Greetings

<GreetingPreloader
  greetings={[
    { text: 'Hello', language: 'English' },
    { text: 'Hola', language: 'Spanish' },
    { text: 'नमस्ते', language: 'Hindi' },
  ]}
  intervalMs={500}
/>

Inline Mode (Non-Full Page)

<GreetingPreloader fullPage={false} intervalMs={400} />

Greetings Preloader

On this page