taos

package.json

@@ -21,6 +21,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^3.3.3",
+    "taos": "^1.0.5"
   }
 }

src/layouts/Layout.astro

@@ -18,6 +18,7 @@ const { title } = Astro.props;
       type="image/svg+xml"
       href="https://cdn.discordapp.com/attachments/1150283260107165757/1169712622879375400/sanity_esports_logo.png?ex=655666c5&is=6543f1c5&hm=13e26138cb844ec951b6d39a85a425af724cd176d85b8fe94d1f09cb648944cb&"
     />
+    <script>document.documentElement.classList.add('js')</script>
     <meta name="generator" content={Astro.generator} />
     <meta name="description" content="Sanity Esports - GoTo Esports Platform" />
     <title>Sanity Esports</title>
@@ -42,6 +43,7 @@ const { title } = Astro.props;
     <Navbar />
     <slot />
     <Footer />
+    <script src="https://unpkg.com/[email protected]/dist/taos.js"></script>
   </body>
   <script>
     const switchTheme = document.querySelector(

src/pages/index.astro

@@ -7,11 +7,11 @@ import Layout from '../layouts/Layout.astro';
 <Layout title="Sanity Esports">
 	<main>
     <div class="text-container">
-      <h1> <span class="first-text">Coming Soon</span> </h1>
-      <h2><span class="second-text">New Website Launching in</span></h2>
+      <h1> <span class="first-text delay-[300ms] duration-[600ms] taos:translate-x-[200px] taos:opacity-0" data-taos-offset="400">Coming Soon</span> </h1>
+      <h2><span class="second-text delay-[300ms] duration-[600ms] taos:translate-x-[-200px] taos:opacity-0" data-taos-offset="400">New Website Launching in</span></h2>
     </div>
 
-		<div id="countdown" class="countdown">
+		<div id="countdown" class="countdown delay-[100ms] duration-[600ms] taos:translate-y-[200px] taos:opacity-0" data-taos-offset="300">
 			<div  class="time">
 				<h2 class="text-gradient" id="days">00</h2>
 				<small>days</small>
@@ -29,8 +29,6 @@ import Layout from '../layouts/Layout.astro';
 				<small>seconds</small>
 			</div>
 		</div>
-
-
     <div id="countDownImage" class="countdown-image">
     </div>
 	</main>
@@ -186,7 +184,6 @@ const days = document.getElementById('days');
 const hours = document.getElementById('hours');
 const minutes = document.getElementById('minutes');
 const seconds = document.getElementById('seconds');
-const countdownImage = document.getElementById('countDownImage')
 
 // target date
 const targetTime = new Date(`March 7 2024 23:59:59`)

tailwind.config.cjs

@@ -1,6 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	safelist: [
+		'!duration-[0ms]',
+		'!delay-[0ms]',
+		'html.js :where([class*="taos:"]:not(.taos-init))'
+	  ],
+	  content: {
+		relative: true,
+		transform: (content) => content.replace(/taos:/g, ''),
+		files: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	  },
 	darkMode: "class",
 	theme: {
 		extend: {
@@ -19,5 +28,7 @@ module.exports = {
 			}
 		},
 	},
-	plugins: [],
-}
+	plugins: [
+		require('taos/plugin')
+	  ],
+	}