How to add Splash Screen to your Netxjs 13 Project

    Hi folks today we gonna talk about how to add Splash Screen to your NextJs 13 Project.
But first what is Splash Screen ?

Basicaly Splash Screen is an introduction page to your website.

Why to use a Splash Screen?

Build Brand Identity Occupies User Until App Loads in background

What we need to to start the project:
In this project we will need NextJs 13 and Tailwind CSS and anime.js. Let's Get Started 1 - Open Terminal or CMD and type the following: 

Initialize New Nextjs Project:

Change directory to the project folder:

install Tailwindcss and configure it:

- In your `tailwind.config.js` replace the content with:

Then add this to your global.css file:

after that create a directory in your root app named components and add a file we may call it SplashScreen.tsx where the function will be, and add the following: 

- And inside of your layout.tsx add the following: 

- When you do this and navigate to http://localhost:3000 you should see in your screen only : Splash Screen.
Now it's time to add anime.js to our project:
anime.js is a lightweight javascript animation library

pnpm install animejs --save

After that open your SplashScreen.tsx file again and add : 

- Now go back to your layout.tsx and modify the <SplashScreen /> to be like this:

<SplashScreen finishLoading={() => setIsLoading(false)} />

- This should give us like Pulsing effect !.
That's mean if we hit this point then the Animation is done, and should take us to the home page.
And this is the end .