From 1afa58a2615620559afd50764b73ce47dae1e4e2 Mon Sep 17 00:00:00 2001
From: mooenz <joss92821@hotmail.com>
Date: Tue, 24 Mar 2026 20:11:04 -0500
Subject: [PATCH] =?UTF-8?q?fix(theme):=20mejoras=20en=20las=20animaciones?=
 =?UTF-8?q?=20de=20transici=C3=B3n=20claro/oscuro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/layout/Footer.astro  |  32 +--
 web/src/components/layout/Header.astro  |  18 +-
 web/src/components/ui/Enlace.astro      |   2 +-
 web/src/components/ui/Logo.astro        |   2 +-
 web/src/components/ui/ToggleTheme.astro |   2 +-
 web/src/layouts/Layout.astro            |   2 +-
 web/src/pages/index.astro               | 264 +++++++++++++++---------
 7 files changed, 202 insertions(+), 120 deletions(-)

diff --git a/web/src/components/layout/Footer.astro b/web/src/components/layout/Footer.astro
index de536a3..c6fdc6e 100644
--- a/web/src/components/layout/Footer.astro
+++ b/web/src/components/layout/Footer.astro
@@ -55,18 +55,18 @@ const FOOTER_LINKS = [
 ---
 
 <footer
-  class='relative mt-32 overflow-hidden border-t border-slate-200 bg-slate-50/50 pt-20 pb-10 dark:border-slate-800 dark:bg-[#080808]/50'
+  class='relative mt-32 overflow-hidden border-t border-slate-200 bg-slate-50/50 pt-20 pb-10 dark:border-slate-800 dark:bg-[#080808]/50 transition-colors duration-300 ease-in-out'
 >
   <div
-    class='absolute top-0 left-1/2 h-px w-full -translate-x-1/2 bg-linear-to-r from-transparent via-blue-500/20 to-transparent dark:via-blue-500/10'
+    class='absolute top-0 left-1/2 h-px w-full -translate-x-1/2 bg-linear-to-r from-transparent via-blue-500/20 to-transparent dark:via-blue-500/10 transition-colors duration-300 ease-in-out'
   >
   </div>
   <div
-    class='absolute -top-24 left-1/4 size-64 rounded-full bg-blue-500/5 blur-[100px] dark:bg-blue-600/5'
+    class='absolute -top-24 left-1/4 size-64 rounded-full bg-blue-500/5 blur-[100px] dark:bg-blue-600/5 transition-colors duration-300 ease-in-out'
   >
   </div>
   <div
-    class='absolute right-1/4 -bottom-24 size-64 rounded-full bg-blue-500/5 blur-[100px] dark:bg-blue-600/5'
+    class='absolute right-1/4 -bottom-24 size-64 rounded-full bg-blue-500/5 blur-[100px] dark:bg-blue-600/5 transition-colors duration-300 ease-in-out'
   >
   </div>
 
@@ -80,14 +80,14 @@ const FOOTER_LINKS = [
             iconClass='size-6 animate-float-subtle group-hover:animate-pulse'
           />
           <span
-            class='text-2xl font-bold tracking-tight text-slate-900 transition-colors group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400'
+            class='text-2xl font-bold tracking-tight text-slate-900 transition-colors duration-300 ease-in-out group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400'
           >
             Tailwind <span class='text-blue-500'>Animations</span>
           </span>
         </div>
 
         <p
-          class='max-w-sm text-base leading-relaxed text-slate-600 dark:text-slate-400'
+          class='max-w-sm text-base leading-relaxed text-slate-600 dark:text-slate-400 transition-colors duration-300 ease-in-out'
         >
           Elevate your user experience with high-performance animations. Open
           source, community-driven, and designed for Tailwind CSS.
@@ -99,7 +99,7 @@ const FOOTER_LINKS = [
             target='_blank'
             rel='noopener noreferrer'
             aria-label='GitHub'
-            class='group flex items-center justify-center rounded-full bg-white p-2.5 text-slate-400 shadow-sm ring-1 ring-slate-200 transition-all hover:text-slate-900 hover:ring-slate-300 dark:bg-slate-900 dark:text-slate-500 dark:ring-slate-800 dark:hover:text-white dark:hover:ring-slate-700'
+            class='group flex items-center justify-center rounded-full bg-white p-2.5 text-slate-400 shadow-sm ring-1 ring-slate-200 transition-all duration-300 ease-in-out hover:text-slate-900 hover:ring-slate-300 dark:bg-slate-900 dark:text-slate-500 dark:ring-slate-800 dark:hover:text-white dark:hover:ring-slate-700'
           >
             <Github class='size-5' />
           </a>
@@ -108,7 +108,7 @@ const FOOTER_LINKS = [
             target='_blank'
             rel='noopener noreferrer'
             aria-label='X (Twitter)'
-            class='group flex items-center justify-center rounded-full bg-white p-2.5 text-slate-400 shadow-sm ring-1 ring-slate-200 transition-all hover:text-slate-900 hover:ring-slate-300 dark:bg-slate-900 dark:text-slate-500 dark:ring-slate-800 dark:hover:text-white dark:hover:ring-slate-700'
+            class='group flex items-center justify-center rounded-full bg-white p-2.5 text-slate-400 shadow-sm ring-1 ring-slate-200 transition-all duration-300 ease-in-out hover:text-slate-900 hover:ring-slate-300 dark:bg-slate-900 dark:text-slate-500 dark:ring-slate-800 dark:hover:text-white dark:hover:ring-slate-700'
           >
             <svg viewBox='0 0 24 24' class='size-5' fill='currentColor'>
               <path
@@ -124,7 +124,7 @@ const FOOTER_LINKS = [
         {
           FOOTER_LINKS.map((section) => (
             <div class='flex flex-col gap-4'>
-              <h3 class='text-xs font-bold tracking-[0.2em] whitespace-nowrap text-slate-900 uppercase dark:text-white'>
+              <h3 class='text-xs font-bold tracking-[0.2em] whitespace-nowrap text-slate-900 uppercase transition-colors duration-300 ease-in-out dark:text-white'>
                 {section.title}
               </h3>
               <ul class='flex flex-col gap-3'>
@@ -134,8 +134,10 @@ const FOOTER_LINKS = [
                     <li>
                       <a
                         href={link.href}
-                        class='text-sm text-slate-500 transition-colors hover:text-blue-500 dark:text-slate-400 dark:hover:text-white'
-                        {...(isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+                        class='text-sm text-slate-500 transition-colors duration-300 ease-in-out hover:text-blue-500 dark:text-slate-400 dark:hover:text-white'
+                        {...(isExternal
+                          ? { target: '_blank', rel: 'noopener noreferrer' }
+                          : {})}
                       >
                         {link.name}
                         {isExternal && (
@@ -154,7 +156,7 @@ const FOOTER_LINKS = [
 
     <!-- Bottom Section -->
     <div
-      class='mt-20 flex flex-col items-center justify-between gap-6 border-t border-dashed border-slate-200 pt-10 md:flex-row dark:border-slate-800'
+      class='mt-20 flex flex-col items-center justify-between gap-6 border-t border-dashed border-slate-200 pt-10 md:flex-row dark:border-slate-800 transition-colors duration-300 ease-in-out'
     >
       <a
         href='https://discord.gg/midudev'
@@ -163,7 +165,7 @@ const FOOTER_LINKS = [
         class='group/community flex flex-col items-center gap-2 md:items-start'
       >
         <p
-          class='text-sm font-bold text-slate-900 transition-colors group-hover/community:text-blue-500 dark:text-white dark:group-hover/community:text-blue-400'
+          class='text-sm font-bold text-slate-900 transition-colors duration-300 ease-in-out group-hover/community:text-blue-500 dark:text-white dark:group-hover/community:text-blue-400'
         >
           Join our community!
         </p>
@@ -176,7 +178,7 @@ const FOOTER_LINKS = [
       </a>
 
       <div class='flex flex-col items-center gap-4 md:items-end'>
-        <div class='flex items-center gap-2 text-sm text-slate-500'>
+        <div class='flex items-center gap-2 text-sm text-slate-500 transition-colors duration-300 ease-in-out'>
           <span>Created with</span>
           <span class='animate-pulse text-red-500'>❤️</span>
           <span>by</span>
@@ -184,7 +186,7 @@ const FOOTER_LINKS = [
             href='https://x.com/midudev'
             target='_blank'
             rel='noopener noreferrer'
-            class='font-bold text-slate-900 transition-all hover:scale-105 hover:text-blue-500 dark:text-white'
+            class='font-bold text-slate-900 transition-all duration-300 ease-in-out hover:scale-105 hover:text-blue-500 dark:text-white'
           >
             midudev
           </a>
diff --git a/web/src/components/layout/Header.astro b/web/src/components/layout/Header.astro
index b539058..ae0c806 100644
--- a/web/src/components/layout/Header.astro
+++ b/web/src/components/layout/Header.astro
@@ -58,6 +58,16 @@ import Enlace from '@components/ui/Enlace.astro'
     const progress = Math.min(scrollY / 100, 1)
     header?.style.setProperty('--header-opacity', String(progress))
     logoContainer?.style.setProperty('--logo-opacity', String(progress))
+
+    if (progress >= 0.1) {
+      header?.classList.add('transition-colors', 'duration-300', 'ease-in-out')
+    } else {
+      header?.classList.remove(
+        'transition-colors',
+        'duration-300',
+        'ease-in-out'
+      )
+    }
   }
 
   window.addEventListener('scroll', handleScroll)
@@ -72,21 +82,21 @@ import Enlace from '@components/ui/Enlace.astro'
 
 <header
   id='header'
-  class='fixed z-20 w-screen border-b px-3 py-5 header-scroll'
+  class='header-scroll fixed z-20 w-screen border-b px-3 py-5'
   role='banner'
 >
   <div class='mx-auto grid w-full max-w-6xl grid-cols-2 grid-cols-[auto_auto]'>
     <!-- Title of Web -->
     <div
       id='logo-container'
-      class='flex items-center gap-1 sm:gap-2 logo-scroll'
+      class='logo-scroll flex items-center gap-1 sm:gap-2'
     >
       <Logo
         class='aspect-square size-7 shrink-0 sm:size-9'
         iconClass='size-4 sm:size-6 animate-float-subtle'
       />
       <span
-        class='text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-white'
+        class='text-2xl font-bold tracking-tight text-slate-900 transition-colors duration-300 ease-in-out sm:text-3xl dark:text-white'
         aria-hidden='true'
       >
         Tailwind <span class='text-blue-500'>Animations</span>
@@ -131,7 +141,7 @@ import Enlace from '@components/ui/Enlace.astro'
           href='https://github.com/midudev/tailwind-animations'
           target='_blank'
           rel='noopener noreferrer'
-          class='text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200'
+          class='text-slate-400 transition-colors duration-300 ease-in-out hover:text-slate-600 dark:hover:text-slate-200'
         >
           <Github class='size-7' />
         </a>
diff --git a/web/src/components/ui/Enlace.astro b/web/src/components/ui/Enlace.astro
index 9bece68..adc3ebf 100644
--- a/web/src/components/ui/Enlace.astro
+++ b/web/src/components/ui/Enlace.astro
@@ -8,7 +8,7 @@ const { href, target = '_self', className = '' } = Astro.props
   href={href}
   target={target}
   draggable='false'
-  class='text-slate-600 transition-colors select-none hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200'
+  class='text-slate-600 transition-colors duration-300 ease-in-out select-none hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200'
   data-enlace
 >
   <slot />
diff --git a/web/src/components/ui/Logo.astro b/web/src/components/ui/Logo.astro
index 4529ea8..76fd7bd 100644
--- a/web/src/components/ui/Logo.astro
+++ b/web/src/components/ui/Logo.astro
@@ -9,7 +9,7 @@ const { class: className, iconClass } = Astro.props
 
 <div
   class:list={[
-    'flex items-center justify-center rounded-xl bg-blue-500 shadow-lg shadow-blue-500/20 transition-all duration-300',
+    'flex items-center justify-center rounded-xl bg-blue-500 shadow-lg shadow-blue-500/20 transition-all duration-300 ease-in-out',
     className
   ]}
 >
diff --git a/web/src/components/ui/ToggleTheme.astro b/web/src/components/ui/ToggleTheme.astro
index 5a5d036..e4487db 100644
--- a/web/src/components/ui/ToggleTheme.astro
+++ b/web/src/components/ui/ToggleTheme.astro
@@ -5,7 +5,7 @@ import MoonIcon from '../icons/moon.astro'
 
 <button
   id='theme-toggle'
-  class='inline-flex cursor-pointer text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200'
+  class='inline-flex cursor-pointer text-slate-400 transition-colors duration-300 ease-in-out hover:text-slate-600 dark:hover:text-slate-200'
   aria-label='Toggle theme'
 >
   <SunIcon id='sun-icon' class='hidden size-6 dark:block' />
diff --git a/web/src/layouts/Layout.astro b/web/src/layouts/Layout.astro
index 168a212..3babb38 100644
--- a/web/src/layouts/Layout.astro
+++ b/web/src/layouts/Layout.astro
@@ -54,7 +54,7 @@ const ogImage = `${siteUrl}/og.jpg`
     </script>
   </head>
   <body
-    class='relative h-fit w-full bg-white text-slate-900 transition-colors duration-300 dark:bg-[#050505] dark:text-slate-50'
+    class='relative h-fit w-full bg-white text-slate-900 transition-colors duration-300 ease-in-out dark:bg-[#050505] dark:text-slate-50'
   >
     <slot />
   </body>
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index 19230d5..73f3a2b 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -102,7 +102,7 @@ const packageManagers = [
       <!-- Version badge -->
       <div class='animate-fade-in-up mb-8'>
         <span
-          class='inline-flex items-center rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-blue-700/10 ring-inset dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30'
+          class='inline-flex items-center rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-blue-700/10 transition-colors duration-300 ease-in-out ring-inset dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30'
         >
           v{version}
         </span>
@@ -120,13 +120,13 @@ const packageManagers = [
               iconClass='size-7 animate-float-subtle'
             />
             <h1
-              class='text-3xl font-bold tracking-tight text-slate-900 sm:text-5xl dark:text-white'
+              class='text-3xl font-bold tracking-tight text-slate-900 transition-colors duration-300 ease-in-out sm:text-5xl dark:text-white'
             >
               Tailwind <span class='text-blue-500'>Animations</span>
             </h1>
           </div>
           <p
-            class='animate-fade-in-up animate-delay-200 mb-10 max-w-md text-base leading-7 text-slate-600 sm:text-lg dark:text-slate-400'
+            class='animate-fade-in-up animate-delay-200 mb-10 max-w-md text-base leading-7 text-slate-600 transition-all duration-300 ease-in-out sm:text-lg dark:text-slate-400'
           >
             The easiest way to add stunning animations to your Tailwind CSS
             projects. Zero configuration, pure performance.
@@ -135,10 +135,10 @@ const packageManagers = [
           <!-- Install Command Box -->
           <div class='animate-fade-in-up animate-delay-300 flex flex-col gap-5'>
             <div
-              class='overflow-hidden rounded-xl border border-slate-200 bg-white/50 p-1 shadow-xl shadow-slate-200/50 backdrop-blur-sm dark:border-white/10 dark:bg-black/40 dark:shadow-none'
+              class='overflow-hidden rounded-xl border border-slate-200 bg-white/50 p-1 shadow-xl shadow-slate-200/50 backdrop-blur-sm transition-all duration-300 ease-in-out dark:border-white/10 dark:bg-black/40 dark:shadow-none'
             >
               <div
-                class='flex items-center justify-between border-b border-slate-200 px-1 sm:px-4 dark:border-white/10'
+                class='flex items-center justify-between border-b border-slate-200 px-1 transition-all duration-300 ease-in-out sm:px-4 dark:border-white/10'
               >
                 <div
                   class='scrollbar-hide flex items-center gap-1 overflow-x-auto py-2 max-sm:grid max-sm:grid-flow-col max-sm:grid-rows-2 max-sm:overflow-x-auto'
@@ -148,7 +148,7 @@ const packageManagers = [
                   {
                     packageManagers.map((pm, index) => (
                       <button
-                        class={`package-manager-btn flex items-center gap-2 rounded-full px-2 py-1 text-xs font-bold transition-all ${index === 0 ? 'bg-black/10 text-slate-900 dark:bg-white/5 dark:text-white' : 'text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200'}`}
+                        class={`package-manager-btn flex items-center gap-2 rounded-full px-2 py-1 text-xs font-bold transition-all duration-300 ease-in-out ${index === 0 ? 'bg-black/10 text-slate-900 dark:bg-white/5 dark:text-white' : 'text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200'}`}
                         data-pm={pm.name}
                         data-command={pm.command}
                         aria-pressed={index === 0 ? 'true' : 'false'}
@@ -165,7 +165,7 @@ const packageManagers = [
                 </div>
                 <button
                   id='copyNpmInstall'
-                  class='group flex shrink-0 items-center gap-2 text-xs font-semibold text-slate-500 transition-colors hover:text-blue-500'
+                  class='group flex shrink-0 items-center gap-2 text-xs font-semibold text-slate-500 transition-colors duration-300 ease-in-out hover:text-blue-500'
                   aria-label='Copy install command to clipboard'
                 >
                   <CopyIcon class='size-4 group-active:scale-90' />
@@ -174,7 +174,7 @@ const packageManagers = [
               <div class='flex items-center gap-4 p-4'>
                 <div class='scrollbar-hide flex-1 overflow-x-auto text-left'>
                   <code
-                    class='font-mono text-sm text-slate-800 dark:text-slate-200'
+                    class='font-mono text-sm text-slate-800 transition-all duration-300 ease-in-out dark:text-slate-200'
                   >
                     <span class='text-blue-500 select-none'>$ </span><span
                       id='install-command'>{packageManagers[0].command}</span
@@ -185,14 +185,18 @@ const packageManagers = [
             </div>
 
             <div
-              class='overflow-hidden rounded-xl border border-slate-200 bg-white/50 p-1 backdrop-blur-sm dark:border-white/10 dark:bg-black/40'
+              class='overflow-hidden rounded-xl border border-slate-200 bg-white/50 p-1 backdrop-blur-sm transition-all duration-300 ease-in-out dark:border-white/10 dark:bg-black/40'
             >
               <div
-                class='flex items-center justify-between border-b border-slate-200 px-4 py-2 dark:border-white/10'
+                class='flex items-center justify-between border-b border-slate-200 px-4 py-2 transition-all duration-300 ease-in-out dark:border-white/10'
               >
-                <div class='flex gap-1' role='tablist' aria-label='Tailwind version'>
+                <div
+                  class='flex gap-1'
+                  role='tablist'
+                  aria-label='Tailwind version'
+                >
                   <button
-                    class='version-tab rounded-full bg-black/10 px-3 py-1 text-[10px] font-bold tracking-widest text-slate-900 uppercase transition-all dark:bg-white/5 dark:text-white'
+                    class='version-tab rounded-full bg-black/10 px-3 py-1 text-[10px] font-bold tracking-widest text-slate-900 uppercase transition-all duration-300 ease-in-out dark:bg-white/5 dark:text-white'
                     data-version='v4'
                     role='tab'
                     aria-selected='true'
@@ -202,7 +206,7 @@ const packageManagers = [
                     Tailwind v4
                   </button>
                   <button
-                    class='version-tab rounded-full px-3 py-1 text-[10px] font-bold tracking-widest text-slate-500 uppercase transition-all hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200'
+                    class='version-tab rounded-full px-3 py-1 text-[10px] font-bold tracking-widest text-slate-500 uppercase transition-all duration-300 ease-in-out hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200'
                     data-version='v3'
                     role='tab'
                     aria-selected='false'
@@ -220,7 +224,7 @@ const packageManagers = [
                   </div>
                   <button
                     id='copyCode'
-                    class='group flex shrink-0 items-center gap-2 text-xs font-semibold text-slate-500 transition-colors hover:text-blue-500'
+                    class='group flex shrink-0 items-center gap-2 text-xs font-semibold text-slate-500 transition-colors duration-300 ease-in-out hover:text-blue-500'
                     aria-label='Copy code to clipboard'
                   >
                     <CopyIcon class='size-4 group-active:scale-90' />
@@ -228,7 +232,12 @@ const packageManagers = [
                 </div>
               </div>
               <div class='overflow-x-auto p-4 text-left dark:border-none'>
-                <div id='code-v4' class='version-code' role='tabpanel' aria-labelledby='tab-v4'>
+                <div
+                  id='code-v4'
+                  class='version-code'
+                  role='tabpanel'
+                  aria-labelledby='tab-v4'
+                >
                   <Code
                     class='text-sm'
                     wrap={true}
@@ -238,7 +247,12 @@ const packageManagers = [
 @import 'tailwind-animations';`}
                   />
                 </div>
-                <div id='code-v3' class='version-code hidden' role='tabpanel' aria-labelledby='tab-v3'>
+                <div
+                  id='code-v3'
+                  class='version-code hidden'
+                  role='tabpanel'
+                  aria-labelledby='tab-v3'
+                >
                   <Code
                     class='text-sm'
                     wrap={true}
@@ -266,11 +280,11 @@ export default {
         <div class='animate-fade-in-up animate-delay-500 relative'>
           <!-- Demo Window -->
           <div
-            class='relative overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 shadow-2xl shadow-blue-500/10 dark:border-slate-700/50 dark:bg-slate-900'
+            class='relative overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 shadow-2xl shadow-blue-500/10 transition-all duration-300 ease-in-out dark:border-slate-700/50 dark:bg-slate-900'
           >
             <!-- Window Header -->
             <div
-              class='flex items-center justify-between border-b border-slate-200 bg-slate-100 px-4 py-3 dark:border-slate-700/50 dark:bg-slate-800/50'
+              class='flex items-center justify-between border-b border-slate-200 bg-slate-100 px-4 py-3 transition-all duration-300 ease-in-out dark:border-slate-700/50 dark:bg-slate-800/50'
             >
               <div class='flex items-center gap-2'>
                 <div class='size-3 rounded-full bg-red-500'></div>
@@ -285,7 +299,7 @@ export default {
 
             <!-- Preview Area -->
             <div
-              class='relative flex min-h-[280px] items-center justify-center overflow-hidden bg-linear-to-br from-slate-50 via-white to-slate-50 p-8 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900'
+              class='0 relative flex min-h-70 items-center justify-center overflow-hidden bg-linear-to-br from-slate-50 via-white to-slate-50 p-8 transition-colors duration-300 ease-in-out dark:from-slate-900 dark:via-slate-800 dark:to-slate-900'
             >
               <!-- Grid Pattern Background -->
               <div
@@ -309,20 +323,20 @@ export default {
 
             <!-- Code Display Area -->
             <div
-              class='border-t border-slate-200 bg-white p-5 dark:border-slate-700/50 dark:bg-slate-900/80'
+              class='border-t border-slate-200 bg-white p-5 transition-all duration-300 ease-in-out dark:border-slate-700/50 dark:bg-slate-900/80'
             >
               <div class='font-mono text-sm'>
                 <span class='text-slate-500'>&lt;</span><span
-                  class='text-pink-600 dark:text-pink-400'>div</span
+                  class='text-pink-600 transition-colors duration-300 ease-in-out dark:text-pink-400'
+                  >div</span
                 >
                 <span class='text-slate-500'> class="</span><span
                   id='hero-demo-classes'
-                  class='text-cyan-600 dark:text-cyan-400'></span><span
-                  class='text-slate-500'>"&gt;</span
-                >
+                  class='text-cyan-600 transition-colors duration-300 ease-in-out dark:text-cyan-400'
+                ></span><span class='text-slate-500'>"&gt;</span>
               </div>
               <div
-                class='pl-4 font-mono text-sm text-slate-400 dark:text-slate-600'
+                class='pl-4 font-mono text-sm text-slate-400 transition-colors duration-300 ease-in-out dark:text-slate-600'
               >
                 &lt;!-- Applied animation --&gt;
               </div>
@@ -351,12 +365,12 @@ export default {
     <section id='animation-collection' class='mt-32 mb-24'>
       <div class='mb-16 flex flex-col items-center'>
         <h2
-          class='animate-fade-in-up animate-delay-[600ms] mb-4 text-2xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-white'
+          class='animate-fade-in-up animate-delay-[600ms] mb-4 text-2xl font-bold tracking-tight text-slate-900 transition-colors duration-300 ease-in-out sm:text-4xl dark:text-white'
         >
           Animation Collection
         </h2>
         <p
-          class='animate-fade-in-up animate-delay-700 max-w-2xl text-center text-lg text-balance text-slate-600 dark:text-slate-400'
+          class='animate-fade-in-up animate-delay-700 max-w-2xl text-center text-lg text-balance text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
         >
           Explore our comprehensive library of ready-to-use animations.
           Customize duration, delay, and timing to fit your needs with zero
@@ -371,7 +385,7 @@ export default {
           id='option-inputs'
         >
           <div
-            class='animate-fade-in-up animate-delay-800 flex flex-wrap items-center justify-center gap-4 rounded-2xl border border-slate-200 bg-white/70 p-4 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-black/60'
+            class='animate-fade-in-up animate-delay-800 flex flex-wrap items-center justify-center gap-4 rounded-2xl border border-slate-200 bg-white/70 p-4 shadow-2xl backdrop-blur-xl transition-all duration-300 ease-in-out dark:border-white/10 dark:bg-black/60'
           >
             <div class='flex flex-col gap-1'>
               <label
@@ -382,14 +396,14 @@ export default {
               <select
                 name='duration'
                 id='duration'
-                class='min-w-32 rounded-lg border border-slate-200 bg-slate-50/50 px-2 py-1 text-sm font-medium transition-colors outline-none hover:border-blue-500 dark:border-white/5 dark:bg-white/5'
+                class='min-w-32 cursor-pointer rounded-lg border border-slate-200 bg-slate-50/50 px-2 py-1 text-sm font-medium transition-colors duration-300 ease-in-out outline-none hover:border-blue-500 dark:border-white/5 dark:bg-white/5'
               >
                 {
                   Object.entries(animationDuration).map(([key, value]) => (
                     <option
                       value={value}
                       selected={key === '1000'}
-                      class='dark:bg-slate-900'
+                      class='transition-colors duration-300 ease-in-out dark:bg-slate-900'
                     >
                       {key}
                     </option>
@@ -407,11 +421,14 @@ export default {
               <select
                 name='delay'
                 id='delay'
-                class='min-w-32 rounded-lg border border-slate-200 bg-slate-50/50 px-2 py-1 text-sm font-medium transition-colors outline-none hover:border-blue-500 dark:border-white/5 dark:bg-white/5'
+                class='min-w-32 cursor-pointer rounded-lg border border-slate-200 bg-slate-50/50 px-2 py-1 text-sm font-medium transition-colors duration-300 ease-in-out outline-none hover:border-blue-500 dark:border-white/5 dark:bg-white/5'
               >
                 {
                   Object.entries(animationDelay).map(([key, value]) => (
-                    <option value={value} class='dark:bg-slate-900'>
+                    <option
+                      value={value}
+                      class='transition-colors duration-300 ease-in-out dark:bg-slate-900'
+                    >
                       {key}
                     </option>
                   ))
@@ -428,11 +445,14 @@ export default {
               <select
                 name='steps'
                 id='steps'
-                class='min-w-32 rounded-lg border border-slate-200 bg-slate-50/50 px-2 py-1 text-sm font-medium transition-colors outline-none hover:border-blue-500 dark:border-white/5 dark:bg-white/5'
+                class='min-w-32 cursor-pointer rounded-lg border border-slate-200 bg-slate-50/50 px-2 py-1 text-sm font-medium transition-colors duration-300 ease-in-out outline-none hover:border-blue-500 dark:border-white/5 dark:bg-white/5'
               >
                 {
                   Object.entries(animationSteps).map(([key, value]) => (
-                    <option value={value} class='dark:bg-slate-900'>
+                    <option
+                      value={value}
+                      class='transition-colors duration-300 ease-in-out dark:bg-slate-900'
+                    >
                       {key}
                     </option>
                   ))
@@ -441,23 +461,23 @@ export default {
             </div>
 
             <div
-              class='hidden h-8 w-px bg-slate-200 sm:block dark:bg-slate-800'
+              class='hidden h-8 w-px bg-slate-200 transition-colors duration-300 ease-in-out sm:block dark:bg-slate-800'
             >
             </div>
 
             <label class='group flex cursor-pointer items-center gap-3'>
               <span
-                class='text-sm font-medium text-slate-600 transition-colors group-hover:text-blue-500 dark:text-slate-400'
+                class='text-sm font-medium text-slate-600 transition-colors duration-300 ease-in-out group-hover:text-blue-500 dark:text-slate-400'
                 >Animate all</span
               >
               <div class='relative inline-flex h-6 w-11 items-center'>
                 <input class='peer sr-only' id='animate' type='checkbox' />
                 <div
-                  class='h-6 w-11 rounded-full bg-slate-200 transition-colors peer-checked:bg-blue-500 dark:bg-slate-800'
+                  class='h-6 w-11 rounded-full bg-slate-200 transition-colors duration-300 ease-in-out peer-checked:bg-blue-500 dark:bg-slate-800'
                 >
                 </div>
                 <div
-                  class='absolute left-1 h-4 w-4 rounded-full bg-white shadow-sm transition-all peer-checked:translate-x-5'
+                  class='absolute left-1 h-4 w-4 rounded-full bg-white shadow-sm transition-all duration-300 ease-in-out peer-checked:translate-x-5'
                 >
                 </div>
               </div>
@@ -471,7 +491,7 @@ export default {
           {
             sortedAnimations.map((animationKey, index) => (
               <article
-                class={`group animate-fade-in-up relative flex cursor-pointer flex-col items-center gap-4 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:border-blue-500 hover:shadow-xl hover:shadow-blue-500/10 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none dark:border-slate-800 dark:bg-slate-900/50 dark:hover:border-blue-500/50 ${index >= 15 ? 'hidden' : ''}`}
+                class={`group animate-fade-in-up relative flex cursor-pointer flex-col items-center gap-4 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition-all duration-300 ease-in-out hover:-translate-y-1 hover:border-blue-500 hover:shadow-xl hover:shadow-blue-500/10 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none dark:border-slate-800 dark:bg-slate-900/50 dark:hover:border-blue-500/50 ${index >= 15 ? 'hidden' : ''}`}
                 data-class={animationKey}
                 style={`animation-delay: ${1000 + index * 50}ms; animation-fill-mode: both;`}
                 tabindex='0'
@@ -479,12 +499,12 @@ export default {
                 aria-label={`Copy animate-${animationKey} class. Hover to preview.`}
               >
                 <div class='flex w-full items-center justify-between'>
-                  <span class='truncate pr-2 text-xs font-semibold text-slate-600 transition-colors group-hover:text-slate-900 dark:text-slate-400 dark:group-hover:text-white'>
+                  <span class='truncate pr-2 text-xs font-semibold text-slate-600 transition-colors duration-300 ease-in-out group-hover:text-slate-900 dark:text-slate-400 dark:group-hover:text-white'>
                     {animationKey}
                   </span>
                   <span
                     aria-hidden='true'
-                    class='text-slate-300 transition-colors hover:text-blue-500'
+                    class='text-slate-300 transition-colors duration-300 ease-in-out hover:text-blue-500'
                   >
                     <CopyIcon class='size-4' />
                   </span>
@@ -493,7 +513,7 @@ export default {
                 <div class='flex flex-1 items-center justify-center py-8'>
                   <div
                     id={`preview-${animationKey}`}
-                    class='size-16 rounded-xl bg-linear-to-br from-blue-500 to-blue-600 shadow-lg shadow-blue-500/30 transition-all duration-300 dark:from-blue-400 dark:to-blue-500 dark:shadow-blue-500/20'
+                    class='size-16 rounded-xl bg-linear-to-br from-blue-500 to-blue-600 shadow-lg shadow-blue-500/30 transition-all duration-300 ease-in-out dark:from-blue-400 dark:to-blue-500 dark:shadow-blue-500/20'
                   />
                 </div>
               </article>
@@ -506,7 +526,7 @@ export default {
             <div class='flex justify-center py-12'>
               <button
                 id='load-more'
-                class='animate-fade-in animate-delay-[1500ms] group flex cursor-pointer items-center gap-3 rounded-xl border border-slate-200 bg-white/50 px-10 py-3 text-sm font-bold text-slate-700 shadow-sm backdrop-blur-sm transition-all hover:border-blue-500 hover:text-blue-500 hover:shadow-md active:scale-95 dark:border-white/10 dark:bg-black/40 dark:text-slate-300 dark:hover:border-blue-500/50 dark:hover:text-blue-400'
+                class='animate-fade-in animate-delay-[1500ms] group flex cursor-pointer items-center gap-3 rounded-xl border border-slate-200 bg-white/50 px-10 py-3 text-sm font-bold text-slate-700 shadow-sm backdrop-blur-sm transition-all duration-300 ease-in-out hover:border-blue-500 hover:text-blue-500 hover:shadow-md active:scale-95 dark:border-white/10 dark:bg-black/40 dark:text-slate-300 dark:hover:border-blue-500/50 dark:hover:text-blue-400'
               >
                 <span>View all animations</span>
                 <svg
@@ -519,7 +539,7 @@ export default {
                   stroke-width='2.5'
                   stroke-linecap='round'
                   stroke-linejoin='round'
-                  class='transition-transform group-hover:rotate-90'
+                  class='transition-transform duration-300 ease-in-out group-hover:rotate-90'
                 >
                   <path d='M12 5v14' />
                   <path d='M5 12h14' />
@@ -533,12 +553,12 @@ export default {
       <section id='scroll-animations' class='relative mt-32 mb-24'>
         <div class='mb-16 flex flex-col items-center'>
           <h2
-            class='mb-4 text-2xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-white'
+            class='mb-4 text-2xl font-bold tracking-tight text-slate-900 transition-colors duration-300 ease-in-out sm:text-4xl dark:text-white'
           >
             Scroll Animations
           </h2>
           <p
-            class='max-w-2xl text-center text-lg text-balance text-slate-600 dark:text-slate-400'
+            class='max-w-2xl text-center text-lg text-balance text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
           >
             Animate elements based on their position in the viewport using the <code
               class='text-blue-500'>timeline-view</code
@@ -547,14 +567,18 @@ export default {
         </div>
 
         <div
-          class='mx-auto max-w-[800px] rounded-3xl border border-slate-200 bg-slate-50/50 p-8 backdrop-blur-sm sm:p-12 dark:border-slate-800 dark:bg-slate-900/50'
+          class='mx-auto max-w-200 rounded-3xl border border-slate-200 bg-slate-50/50 p-8 backdrop-blur-sm transition-colors duration-300 ease-in-out sm:p-12 dark:border-slate-800 dark:bg-slate-900/50'
         >
           <div class='max-w-none'>
-            <h3 class='mb-6 text-center text-xl font-semibold dark:text-white'>
+            <h3
+              class='mb-6 text-center text-xl font-semibold transition-colors duration-300 ease-in-out dark:text-white'
+            >
               Scroll down to see the magic
             </h3>
 
-            <p class='mb-6 text-slate-600 dark:text-slate-400'>
+            <p
+              class='mb-6 text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
+            >
               To animate elements on scroll, we use the <code
                 class='text-blue-500'>timeline-view</code
               > utility. This property creates a View Timeline that allows you to
@@ -562,7 +586,9 @@ export default {
               viewport.
             </p>
 
-            <p class='mb-12 text-slate-600 dark:text-slate-400'>
+            <p
+              class='mb-12 text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
+            >
               The animation is automatically linked to the element's visibility
               in the viewport. Use <code class='text-blue-500'
                 >animate-range</code
@@ -581,7 +607,9 @@ export default {
               </code>
             </div>
 
-            <p class='mt-12 mb-12 text-slate-600 dark:text-slate-400'>
+            <p
+              class='mt-12 mb-12 text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
+            >
               The <code class='text-blue-500'>animate-range</code> property is essential
               for defining when the animation starts and ends relative to the element's
               visibility. You can use predefined ranges like <code
@@ -594,48 +622,50 @@ export default {
 
             <div class='grid grid-cols-1 gap-6 sm:grid-cols-2'>
               <div
-                class='timeline-view animate-fade-in animate-range-gradual flex h-32 w-full flex-col items-center justify-center gap-2 rounded-xl bg-slate-200 p-4 text-center font-bold text-slate-800 shadow-lg dark:bg-slate-800 dark:text-slate-200'
+                class='timeline-view animate-fade-in animate-range-gradual flex h-32 w-full flex-col items-center justify-center gap-2 rounded-xl bg-slate-200 p-4 text-center font-bold text-slate-800 shadow-lg transition-colors duration-300 ease-in-out dark:bg-slate-800 dark:text-slate-200'
               >
                 <span class='text-sm'>Gradual (10% - 90%)</span>
                 <code
-                  class='rounded-lg bg-black/10 px-2 py-1 font-mono text-[10px] dark:bg-white/10'
+                  class='rounded-lg bg-black/10 px-2 py-1 font-mono text-[10px] transition-colors duration-300 ease-in-out dark:bg-white/10'
                 >
                   animate-range-gradual
                 </code>
               </div>
               <div
-                class='timeline-view animate-fade-in animate-range-moderate flex h-32 w-full flex-col items-center justify-center gap-2 rounded-xl bg-slate-200 p-4 text-center font-bold text-slate-800 shadow-lg dark:bg-slate-800 dark:text-slate-200'
+                class='timeline-view animate-fade-in animate-range-moderate flex h-32 w-full flex-col items-center justify-center gap-2 rounded-xl bg-slate-200 p-4 text-center font-bold text-slate-800 shadow-lg transition-colors duration-300 ease-in-out dark:bg-slate-800 dark:text-slate-200'
               >
                 <span class='text-sm'>Moderate (20% - 80%)</span>
                 <code
-                  class='rounded-lg bg-black/10 px-2 py-1 font-mono text-[10px] dark:bg-white/10'
+                  class='rounded-lg bg-black/10 px-2 py-1 font-mono text-[10px] transition-colors duration-300 ease-in-out dark:bg-white/10'
                 >
                   animate-range-moderate
                 </code>
               </div>
               <div
-                class='timeline-view animate-fade-in animate-range-brisk flex h-32 w-full flex-col items-center justify-center gap-2 rounded-xl bg-slate-200 p-4 text-center font-bold text-slate-800 shadow-lg dark:bg-slate-800 dark:text-slate-200'
+                class='timeline-view animate-fade-in animate-range-brisk flex h-32 w-full flex-col items-center justify-center gap-2 rounded-xl bg-slate-200 p-4 text-center font-bold text-slate-800 shadow-lg transition-colors duration-300 ease-in-out dark:bg-slate-800 dark:text-slate-200'
               >
                 <span class='text-sm'>Brisk (30% - 70%)</span>
                 <code
-                  class='rounded-lg bg-black/10 px-2 py-1 font-mono text-[10px] dark:bg-white/10'
+                  class='rounded-lg bg-black/10 px-2 py-1 font-mono text-[10px] transition-colors duration-300 ease-in-out dark:bg-white/10'
                 >
                   animate-range-brisk
                 </code>
               </div>
               <div
-                class='timeline-view animate-fade-in animate-range-rapid flex h-32 w-full flex-col items-center justify-center gap-2 rounded-xl bg-slate-200 p-4 text-center font-bold text-slate-800 shadow-lg dark:bg-slate-800 dark:text-slate-200'
+                class='timeline-view animate-fade-in animate-range-rapid flex h-32 w-full flex-col items-center justify-center gap-2 rounded-xl bg-slate-200 p-4 text-center font-bold text-slate-800 shadow-lg transition-colors duration-300 ease-in-out dark:bg-slate-800 dark:text-slate-200'
               >
                 <span class='text-sm'>Rapid (40% - 60%)</span>
                 <code
-                  class='rounded-lg bg-black/10 px-2 py-1 font-mono text-[10px] dark:bg-white/10'
+                  class='rounded-lg bg-black/10 px-2 py-1 font-mono text-[10px] transition-colors duration-300 ease-in-out dark:bg-white/10'
                 >
                   animate-range-rapid
                 </code>
               </div>
             </div>
 
-            <p class='mt-12 mb-12 text-slate-600 dark:text-slate-400'>
+            <p
+              class='mt-12 mb-12 text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
+            >
               Of course, you can also use custom values for more precision. By
               specifying values like <code class='text-blue-500'>entry 10%</code
               > or <code class='text-blue-500'>contain 25%</code>, you can
@@ -654,7 +684,9 @@ export default {
               </code>
             </div>
 
-            <p class='mt-12 mb-12 text-slate-600 dark:text-slate-400'>
+            <p
+              class='mt-12 mb-12 text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
+            >
               You can combine different directions and effects. Using <code
                 class='text-blue-500'>animate-slide-in-left</code
               > with a scroll timeline makes the element gracefully slide into place
@@ -674,7 +706,9 @@ export default {
               </code>
             </div>
 
-            <p class='mt-12 text-slate-600 dark:text-slate-400'>
+            <p
+              class='mt-12 text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
+            >
               Blurred transitions like <code class='text-blue-500'
                 >animate-blurred-fade-in</code
               > add a layer of polish. By linking it to a scroll timeline, you create
@@ -688,12 +722,12 @@ export default {
       <section id='scroll-view-timelines' class='relative mt-32 mb-24'>
         <div class='mb-16 flex flex-col items-center'>
           <h2
-            class='mb-4 text-2xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-white'
+            class='mb-4 text-2xl font-bold tracking-tight text-slate-900 transition-colors duration-300 ease-in-out sm:text-4xl dark:text-white'
           >
             Scroll & View Timelines
           </h2>
           <p
-            class='max-w-2xl text-center text-lg text-balance text-slate-600 dark:text-slate-400'
+            class='max-w-2xl text-center text-lg text-balance text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
           >
             Link animations to scroll progress or element visibility using
             powerful timeline utilities.
@@ -701,34 +735,40 @@ export default {
         </div>
 
         <div
-          class='mx-auto max-w-[800px] rounded-3xl border border-slate-200 bg-slate-50/50 p-8 backdrop-blur-sm sm:p-12 dark:border-slate-800 dark:bg-slate-900/50'
+          class='mx-auto max-w-200 rounded-3xl border border-slate-200 bg-slate-50/50 p-8 backdrop-blur-sm transition-colors duration-300 ease-in-out sm:p-12 dark:border-slate-800 dark:bg-slate-900/50'
         >
           <div class='grid grid-cols-1 gap-16'>
             <!-- Example 1: Vertical Scroll Progress -->
             <div class='flex flex-col gap-6'>
-              <h3 class='text-xl font-semibold dark:text-white'>
+              <h3
+                class='text-xl font-semibold transition-colors duration-300 ease-in-out dark:text-white'
+              >
                 Vertical Scroll Progress
               </h3>
-              <p class='text-slate-600 dark:text-slate-400'>
+              <p
+                class='text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
+              >
                 Use <code class='text-blue-500'>timeline-scroll</code> to link an
                 animation to the scroll container's progress. The animation advances
                 as you scroll.
               </p>
               <div
-                class='relative h-64 overflow-y-auto rounded-2xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950'
+                class='relative h-64 overflow-y-auto rounded-2xl border border-slate-200 bg-white transition-colors duration-300 ease-in-out dark:border-slate-800 dark:bg-slate-950'
               >
                 <div
                   class='timeline-scroll animate-expand-horizontally sticky top-0 h-2 w-full origin-left bg-gradient-to-r from-green-400 to-emerald-600'
                 >
                 </div>
                 <div class='h-[800px] p-6'>
-                  <p class='text-sm text-slate-500 dark:text-slate-400'>
+                  <p
+                    class='text-sm text-slate-500 transition-colors duration-300 ease-in-out dark:text-slate-400'
+                  >
                     ↓ Scroll down to see the progress bar fill
                   </p>
                   <div class='mt-6 space-y-4'>
                     {
                       [1, 2, 3].map(() => (
-                        <div class='h-28 rounded-xl bg-slate-100 dark:bg-slate-900' />
+                        <div class='h-28 rounded-xl bg-slate-100 transition-colors duration-300 ease-in-out dark:bg-slate-900' />
                       ))
                     }
                   </div>
@@ -743,16 +783,20 @@ export default {
 
             <!-- Example 2: Horizontal Scroll Progress -->
             <div class='flex flex-col gap-6'>
-              <h3 class='text-xl font-semibold dark:text-white'>
+              <h3
+                class='text-xl font-semibold transition-colors duration-300 ease-in-out dark:text-white'
+              >
                 Horizontal Scroll Progress
               </h3>
-              <p class='text-slate-600 dark:text-slate-400'>
+              <p
+                class='text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
+              >
                 Use <code class='text-blue-500'>timeline-[scroll(inline)]</code>
                 for horizontal scroll containers. The progress bar follows your horizontal
                 scrolling.
               </p>
               <div
-                class='relative h-48 overflow-x-auto overflow-y-hidden rounded-2xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950'
+                class='relative h-48 overflow-x-auto overflow-y-hidden rounded-2xl border border-slate-200 bg-white transition-colors duration-300 ease-in-out dark:border-slate-800 dark:bg-slate-950'
               >
                 <div
                   class='timeline-[scroll(inline)] animate-expand-horizontally sticky top-0 left-0 z-10 h-2 w-full origin-left bg-gradient-to-r from-purple-400 to-pink-600'
@@ -764,7 +808,7 @@ export default {
                   {
                     ['🚀', '⭐', '💎', '🎯', '🔥', '✨', '🎨', '💡'].map(
                       (emoji) => (
-                        <div class='flex h-28 w-40 flex-shrink-0 items-center justify-center rounded-xl bg-slate-100 text-4xl dark:bg-slate-900'>
+                        <div class='flex h-28 w-40 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-4xl transition-colors duration-300 ease-in-out dark:bg-slate-900'>
                           {emoji}
                         </div>
                       )
@@ -781,10 +825,14 @@ export default {
 
             <!-- Example 3: Entry vs Exit Ranges -->
             <div class='flex flex-col gap-6'>
-              <h3 class='text-xl font-semibold dark:text-white'>
+              <h3
+                class='text-xl font-semibold transition-colors duration-300 ease-in-out dark:text-white'
+              >
                 Entry & Exit Animation Ranges
               </h3>
-              <p class='text-slate-600 dark:text-slate-400'>
+              <p
+                class='text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
+              >
                 Control when animations play with <code class='text-blue-500'
                   >animate-range-entry</code
                 > (entering viewport) and <code class='text-blue-500'
@@ -792,10 +840,12 @@ export default {
                 > (leaving viewport).
               </p>
               <div
-                class='relative h-80 overflow-y-auto rounded-2xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950'
+                class='relative h-80 overflow-y-auto rounded-2xl border border-slate-200 bg-white transition-colors duration-300 ease-in-out dark:border-slate-800 dark:bg-slate-950'
               >
                 <div class='flex h-[1100px] flex-col items-center gap-8 p-8'>
-                  <p class='text-sm text-slate-500 dark:text-slate-400'>
+                  <p
+                    class='text-sm text-slate-500 transition-colors duration-300 ease-in-out dark:text-slate-400'
+                  >
                     ↓ Scroll to see entry/exit animations
                   </p>
                   <div class='h-48'></div>
@@ -839,19 +889,25 @@ export default {
 
             <!-- Example 4: Staggered Reveal -->
             <div class='flex flex-col gap-6'>
-              <h3 class='text-xl font-semibold dark:text-white'>
+              <h3
+                class='text-xl font-semibold transition-colors duration-300 ease-in-out dark:text-white'
+              >
                 Staggered Reveal Effect
               </h3>
-              <p class='text-slate-600 dark:text-slate-400'>
+              <p
+                class='text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
+              >
                 Combine <code class='text-blue-500'>timeline-view</code> with different
                 <code class='text-blue-500'>animate-range</code>
                 values to create a staggered reveal effect.
               </p>
               <div
-                class='relative h-96 overflow-y-auto rounded-2xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950'
+                class='relative h-96 overflow-y-auto rounded-2xl border border-slate-200 bg-white transition-colors duration-300 ease-in-out dark:border-slate-800 dark:bg-slate-950'
               >
                 <div class='flex h-[1100px] flex-col items-center gap-6 p-8'>
-                  <p class='text-sm text-slate-500 dark:text-slate-400'>
+                  <p
+                    class='text-sm text-slate-500 transition-colors duration-300 ease-in-out dark:text-slate-400'
+                  >
                     ↓ Scroll to reveal cards in sequence
                   </p>
                   <div class='h-64'></div>
@@ -889,19 +945,25 @@ export default {
 
             <!-- Example 5: View Timeline with Rotation -->
             <div class='flex flex-col gap-6'>
-              <h3 class='text-xl font-semibold dark:text-white'>
+              <h3
+                class='text-xl font-semibold transition-colors duration-300 ease-in-out dark:text-white'
+              >
                 Rotation on Scroll
               </h3>
-              <p class='text-slate-600 dark:text-slate-400'>
+              <p
+                class='text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
+              >
                 Use <code class='text-blue-500'>animate-rotate-360</code> with
                 <code class='text-blue-500'>animate-range-cover</code> to rotate elements
                 as they pass through the viewport.
               </p>
               <div
-                class='relative h-72 overflow-y-auto rounded-2xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950'
+                class='relative h-72 overflow-y-auto rounded-2xl border border-slate-200 bg-white transition-colors duration-300 ease-in-out dark:border-slate-800 dark:bg-slate-950'
               >
                 <div class='flex h-[800px] flex-col items-center gap-8 p-8'>
-                  <p class='text-sm text-slate-500 dark:text-slate-400'>
+                  <p
+                    class='text-sm text-slate-500 transition-colors duration-300 ease-in-out dark:text-slate-400'
+                  >
                     ↓ Scroll to spin the shapes
                   </p>
                   <div class='h-40'></div>
@@ -944,15 +1006,19 @@ export default {
 
             <!-- Example 6: Timeline Axis Variants -->
             <div class='flex flex-col gap-6'>
-              <h3 class='text-xl font-semibold dark:text-white'>
+              <h3
+                class='text-xl font-semibold transition-colors duration-300 ease-in-out dark:text-white'
+              >
                 Timeline Utilities Reference
               </h3>
-              <p class='text-slate-600 dark:text-slate-400'>
+              <p
+                class='text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
+              >
                 Available timeline utilities and how to use them:
               </p>
               <div class='grid grid-cols-1 gap-3 sm:grid-cols-2'>
                 <div
-                  class='flex flex-col gap-1 rounded-xl border border-slate-200 p-4 dark:border-slate-800'
+                  class='flex flex-col gap-1 rounded-xl border border-slate-200 p-4 transition-all duration-300 ease-in-out dark:border-slate-800'
                 >
                   <span
                     class='text-xs font-bold tracking-wide text-slate-400 uppercase'
@@ -971,7 +1037,7 @@ export default {
                   >
                 </div>
                 <div
-                  class='flex flex-col gap-1 rounded-xl border border-slate-200 p-4 dark:border-slate-800'
+                  class='flex flex-col gap-1 rounded-xl border border-slate-200 p-4 transition-colors duration-300 ease-in-out dark:border-slate-800'
                 >
                   <span
                     class='text-xs font-bold tracking-wide text-slate-400 uppercase'
@@ -992,7 +1058,7 @@ export default {
                   >
                 </div>
                 <div
-                  class='flex flex-col gap-1 rounded-xl border border-slate-200 p-4 dark:border-slate-800'
+                  class='flex flex-col gap-1 rounded-xl border border-slate-200 p-4 transition-colors duration-300 ease-in-out dark:border-slate-800'
                 >
                   <span
                     class='text-xs font-bold tracking-wide text-slate-400 uppercase'
@@ -1008,7 +1074,7 @@ export default {
                   <code class='text-xs text-amber-500'>animate-range-exit</code>
                 </div>
                 <div
-                  class='flex flex-col gap-1 rounded-xl border border-slate-200 p-4 dark:border-slate-800'
+                  class='flex flex-col gap-1 rounded-xl border border-slate-200 p-4 transition-colors duration-300 ease-in-out dark:border-slate-800'
                 >
                   <span
                     class='text-xs font-bold tracking-wide text-slate-400 uppercase'
@@ -1040,17 +1106,21 @@ export default {
 
             <!-- Example 7: Arbitrary Values -->
             <div class='flex flex-col gap-6'>
-              <h3 class='text-xl font-semibold dark:text-white'>
+              <h3
+                class='text-xl font-semibold transition-colors duration-300 ease-in-out dark:text-white'
+              >
                 Arbitrary Values
               </h3>
-              <p class='text-slate-600 dark:text-slate-400'>
+              <p
+                class='text-slate-600 transition-colors duration-300 ease-in-out dark:text-slate-400'
+              >
                 Use brackets for custom values. Use underscores <code
                   class='text-blue-500'>_</code
                 > instead of spaces.
               </p>
               <div class='grid grid-cols-1 gap-3 sm:grid-cols-2'>
                 <div
-                  class='flex flex-col gap-2 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900'
+                  class='flex flex-col gap-2 rounded-xl border border-slate-200 bg-slate-50 p-4 transition-colors duration-300 ease-in-out dark:border-slate-800 dark:bg-slate-900'
                 >
                   <span
                     class='text-xs font-bold tracking-wide text-slate-400 uppercase'
@@ -1064,7 +1134,7 @@ export default {
                   >
                 </div>
                 <div
-                  class='flex flex-col gap-2 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900'
+                  class='flex flex-col gap-2 rounded-xl border border-slate-200 bg-slate-50 p-4 transition-colors duration-300 ease-in-out dark:border-slate-800 dark:bg-slate-900'
                 >
                   <span
                     class='text-xs font-bold tracking-wide text-slate-400 uppercase'
@@ -1078,7 +1148,7 @@ export default {
                   >
                 </div>
                 <div
-                  class='col-span-full flex flex-col gap-2 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900'
+                  class='col-span-full flex flex-col gap-2 rounded-xl border border-slate-200 bg-slate-50 p-4 transition-colors duration-300 ease-in-out dark:border-slate-800 dark:bg-slate-900'
                 >
                   <span
                     class='text-xs font-bold tracking-wide text-slate-400 uppercase'