Preloader

Text 300

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Preloader to your project and fits it to your theme.

Code

How Preloader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { motion } from "framer-motion"
import { useState, useCallback } from "react"
import Preloader from "@/components/ui/preloader"

const DemoOne = () => {
  const [showPreloader, setShowPreloader] = useState(true)

  const handleComplete = useCallback(() => {
    setShowPreloader(false)
  }, [])

  const handleReplay = useCallback(() => {
    setShowPreloader(true)
  }, [])



  return (
    <>
      {showPreloader && <Preloader onComplete={handleComplete} />}
      <main className="min-h-screen bg-background flex flex-col items-center justify-center p-4">
        <motion.div
          className="text-center space-y-8 max-w-3xl"
          initial="hidden"
          animate="visible"
        >
          <h1 className="text-4xl md:text-6xl font-bold tracking-tight text-foreground">Welcome</h1>
          <p className="text-xl text-muted-foreground">
            Your content has loaded successfully. The preloader animation has completed.
          </p>
          <button
            onClick={handleReplay}
            className="px-6 py-3 mt-6 text-base font-medium text-white bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg shadow-md hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95"
          >
            Replay Preloader
          </button>
        </motion.div>
      </main>
    </>
  )
}

export { DemoOne }