feat: preloder for loding website

.eslintrc.js

@@ -1,8 +1,8 @@
 module.exports = {
-  parser: '@typescript-eslint/parser',
+  parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaVersion: 2021,
-    sourceType: 'module',
+    sourceType: "module",
     ecmaFeatures: {
       jsx: true,
     },
@@ -14,51 +14,51 @@ module.exports = {
   },
   root: true,
   extends: [
-    'next',
-    'eslint:recommended',
-    'prettier',
-    'next/core-web-vitals',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react/recommended',
-    'plugin:prettier/recommended',
-    'plugin:react-hooks/recommended',
+    "next",
+    "eslint:recommended",
+    "prettier",
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended",
   ],
-  plugins: ['prettier', '@typescript-eslint', 'react', 'react-hooks'],
+  plugins: ["prettier", "@typescript-eslint", "react", "react-hooks"],
   rules: {
-    'prefer-const': 'warn',
-    'no-var': 'warn',
-    'no-unused-vars': 'warn',
-    'object-shorthand': 'warn',
-    'quote-props': ['warn', 'as-needed'],
-    '@typescript-eslint/array-type': [
-      'warn',
+    "prefer-const": "warn",
+    "no-var": "warn",
+    "no-unused-vars": "warn",
+    "object-shorthand": "warn",
+    "quote-props": ["warn", "as-needed"],
+    "@typescript-eslint/array-type": [
+      "warn",
       {
-        default: 'array',
+        default: "array",
       },
     ],
-    '@typescript-eslint/consistent-type-assertions': [
-      'warn',
+    "@typescript-eslint/consistent-type-assertions": [
+      "warn",
       {
-        assertionStyle: 'as',
-        objectLiteralTypeAssertions: 'never',
+        assertionStyle: "as",
+        objectLiteralTypeAssertions: "never",
       },
     ],
-    'react/jsx-fragments': ['warn', 'syntax'],
-    'react/jsx-filename-extension': [
-      'warn',
+    "react/jsx-fragments": ["warn", "syntax"],
+    "react/jsx-filename-extension": [
+      "warn",
       {
-        extensions: ['ts', 'tsx'],
+        extensions: ["ts", "tsx"],
       },
     ],
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'warn',
-    'react/react-in-jsx-scope': 'off',
-    'react/prop-types': 'off',
-    'prettier/prettier': 'warn',
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "prettier/prettier": "warn",
   },
   settings: {
     react: {
-      version: 'detect',
+      version: "detect",
     },
   },
 };

components/Animations/index.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Loader from "../Loder";
 import ScrollAmount from "./ScrollAmount";
 import SmoothScrolling from "./SmoothScrolling";
 
@@ -8,6 +9,7 @@ export default function Animations({
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <SmoothScrolling>
+      <Loader />
       <ScrollAmount />
       {children}
     </SmoothScrolling>

components/Loder.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from "react";
+
+export default function Loader() {
+  const loaderRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const loader = loaderRef.current;
+    if (loader) {
+      setTimeout(() => {
+        loader.style.opacity = "0";
+        setTimeout(() => {
+          loader.style.display = "none";
+        }, 1000);
+      }, 1500);
+    }
+  }, []);
+  return (
+    <div
+      className="fixed z-[1000] flex h-screen w-screen items-center justify-center bg-black text-gray-100 transition-opacity duration-1000"
+      ref={loaderRef}
+    >
+      <svg
+        className="h-16 w-16 animate-bump md:h-20 md:w-20 lg:h-24 lg:w-24"
+        viewBox="0 0 128 128"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <linearGradient id="pl-grad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="hsl(193,90%,55%)" />
+            <stop offset="100%" stopColor="hsl(223,90%,55%)" />
+          </linearGradient>
+        </defs>
+        <circle
+          className="pl__ring"
+          r="56"
+          cx="64"
+          cy="64"
+          fill="none"
+          stroke="rgb(255, 255, 255, 0.3)"
+          strokeWidth="16"
+          strokeLinecap="round"
+        />
+        <path
+          className="pl__worm animate-worm"
+          d="M92,15.492S78.194,4.967,66.743,16.887c-17.231,17.938-28.26,96.974-28.26,96.974L119.85,59.892l-99-31.588,57.528,89.832L97.8,19.349,13.636,88.51l89.012,16.015S81.908,38.332,66.1,22.337C50.114,6.156,36,15.492,36,15.492a56,56,0,1,0,56,0Z"
+          fill="none"
+          stroke="url(#pl-grad)"
+          strokeWidth="16"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeDasharray="44 1111"
+          strokeDashoffset="10"
+        />
+      </svg>
+    </div>
+  );
+}

package.json

@@ -19,7 +19,7 @@
     "axios": "^1.7.7",
     "clsx": "^2.1.1",
     "cors": "^2.8.5",
-    "framer-motion": "^11.4.0",
+    "framer-motion": "^11.9.0",
     "gsap": "^3.12.5",
     "next": "14.2.7",
     "react": "^18",

tailwind.config.ts

@@ -1,19 +1,39 @@
-import type { Config } from 'tailwindcss';
+import type { Config } from "tailwindcss";
 
 const config: Config = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
+    keyframes: {
+      bump: {
+        "44%": { transform: "translate(1.33%, 6.75%)" },
+        "53%": { transform: "translate(-16.67%, -0.54%)" },
+        "61%": { transform: "translate(3.66%, -2.46%)" },
+        "69%": { transform: "translate(-0.59%, 15.27%)" },
+        "76%": { transform: "translate(-1.92%, -4.68%)" },
+        "83%": { transform: "translate(9.38%, 0.96%)" },
+        "90%": { transform: "translate(-4.55%, 1.98%)" },
+      },
+      worm: {
+        from: { strokeDashoffset: "10" },
+        "25%": { strokeDashoffset: "295" },
+        to: { strokeDashoffset: "1165" },
+      },
+    },
+    animation: {
+      bump: "bump 3s linear infinite",
+      worm: "worm 3s cubic-bezier(0.42, 0.17, 0.75, 0.83) infinite",
+    },
   },
   plugins: [],
 };