feat: add meteor shower on homepage

sumitkolhe · Mar 17, 2024 · 8703399 · 8703399
1 parent 76e792d
commit 8703399
Showing 1 changed file with 44 additions and 7 deletions.
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -2,6 +2,26 @@ import { Hono } from 'hono'
 
 export const Home = new Hono()
 
+export const Meteors = ({ number }: { number: number }) => {
+  return (
+    <>
+      {Array.from({ length: number || 20 }, (_, idx) => (
+        <span
+          key={idx}
+          class="meteor animate-[meteorAnimation_3s_linear_infinite] absolute h-0.5 w-0.5 rounded-[9999px] shadow-[0_0_0_1px_#ffffff10] rotate-[215deg]"
+          style={{
+            top: 0,
+            left: `${Math.floor(Math.random() * (400 - -400) + -400)}px`,
+            animationDelay: `${Math.random() * (0.8 - 0.2) + 0.2}s`,
+            animationDuration: `${Math.floor(Math.random() * (10 - 2) + 2)}s`,
+            transform: 'translate(-50%, -50%)'
+          }}
+        ></span>
+      ))}
+    </>
+  )
+}
+
 Home.get('/', (c) => {
   const title = 'JioSaavn API'
   const description =
@@ -41,15 +61,33 @@ Home.get('/', (c) => {
         <script src="https://cdn.tailwindcss.com" />
         <style
           dangerouslySetInnerHTML={{
-            __html: `* { font-family: 'Inter', sans-serif; } 
+            __html: `
+            * { font-family: 'Inter', sans-serif; } 
             @keyframes borderAnimation {
-            0%, 100% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
+              0%, 100% { background-position: 0% 50%; }
+              50% { background-position: 100% 50%; }
+            }
+            @keyframes meteorAnimation {
+              0% { transform: rotate(215deg) translateX(0); opacity: 1; }
+              70% { opacity: 1; }
+              100% { transform: rotate(215deg) translateX(-500px); opacity: 0; }
+            }
+            .meteor::before {
+              content: '';
+              position: absolute;
+              top: 50%;
+              transform: translateY(-50%);
+              width: 50px;
+              height: 1px;
+              background: linear-gradient(90deg, #64748b, transparent);
+            }
+            .animate-meteor-effect {
+              animation-name: meteorAnimation;
             }`
           }}
         />
       </head>
-      <body class="bg-black mx-auto md:min-h-screen max-w-screen-lg flex flex-col overflow-auto">
+      <body class="bg-black mx-auto md:min-h-screen max-w-screen-lg flex flex-col overflow-auto overflow-x-hidden">
         <main class="mx-auto my-auto flex flex-col space-y-8 px-4 py-10">
           <div class="flex flex-row items-center space-x-4 ml-6">
             <svg class="sm:h-12 sm:w-12 h-8 w-8 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -69,7 +107,7 @@ Home.get('/', (c) => {
               JioSaavn API
               <span class="uppercase text-sm ml-3 text-gray-500 font-normal sm:hidden">Unofficial</span>
             </p>
-
+            <Meteors number={15} />
             <p class="hidden sm:block animate-[borderAnimation_3s_linear_infinite] rounded bg-gradient-to-r from-red-500 via-purple-500 to-blue-500 bg-[length:400%_400%] p-1">
               <span class="block rounded px-1.5 py-0.5 text-xs text-white uppercase tracking-wider">Unofficial</span>
             </p>
@@ -155,9 +193,8 @@ Home.get('/', (c) => {
                     rel="noopener noreferrer"
                     className="hover:underline text-pink-500"
                   >
-                    Telegram
+                    Telegram.
                   </a>
-                  .
                 </div>
               </div>
             </div>