From e839098717c2c07d1663f72c212d226d827aea42 Mon Sep 17 00:00:00 2001
From: Fravelz <fravelz_@hotmail.com>
Date: Fri, 23 Jan 2026 16:40:51 -0500
Subject: [PATCH 1/5] Se mueve el footer a una instancia diferente.

Para que una mejor construcion semantica, y arregla un detalle visual.

Cambios a ser confirmados:
	modificados:     web/src/pages/index.astro
---
 web/src/pages/index.astro | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index ed56030..b3c1bd6 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -95,7 +95,8 @@ const packageManagers = [
   <Header />
 
   <main class='mx-auto w-full max-w-6xl pt-16'>
-    <header
+    <!-- section porque header ya hay que contenga los enlaces nav -->
+    <section
       id='preview'
       class='relative z-10 mx-auto mb-20 max-w-6xl px-4 lg:px-8'
     >
@@ -334,7 +335,7 @@ export default {
           </div>
         </div>
       </div>
-    </header>
+    </section>
 
     <section id='animation-collection' class='mt-32 mb-24'>
       <div class='mb-16 flex flex-col items-center'>
@@ -1081,11 +1082,11 @@ export default {
           </div>
         </div>
       </section>
-
-      <Footer />
     </section>
   </main>
 
+  <Footer />
+
   <script>
     import { toast } from 'wc-toast'
 

From c5206db32f866085c30c7cb2d708380440fb5085 Mon Sep 17 00:00:00 2001
From: Fravelz <fravelz_@hotmail.com>
Date: Fri, 23 Jan 2026 17:09:56 -0500
Subject: [PATCH 2/5] Factorizacion Seccion #1 Preview

Se creo la carpeta, sections, y se agrego la 1ra seccion, del
main, factorizada.

Cambios a ser confirmados:
	nuevos archivos: src/components/sections/Preview.astro
	modificados:     src/pages/index.astro
---
 web/src/components/sections/Preview.astro | 275 +++++++++++++++++++++
 web/src/pages/index.astro                 | 287 +---------------------
 2 files changed, 279 insertions(+), 283 deletions(-)
 create mode 100644 web/src/components/sections/Preview.astro

diff --git a/web/src/components/sections/Preview.astro b/web/src/components/sections/Preview.astro
new file mode 100644
index 0000000..988be18
--- /dev/null
+++ b/web/src/components/sections/Preview.astro
@@ -0,0 +1,275 @@
+---
+import { Code } from 'astro:components'
+import pkg from '../../../package.json'
+
+import CopyIcon from '@components/icons/copy.astro'
+import Logo from '@components/ui/Logo.astro'
+
+const { version } = pkg
+
+const packageManagers = [
+  {
+    name: 'npm',
+    icon: `<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'><path fill='#c12127' d='M2 2h28v28H2'/><path fill='#fff' d='M7.25 7.25h17.5v17.5h-3.5v-14H16v14H7.25'/></svg>`,
+    command: 'npm install tailwind-animations'
+  },
+  {
+    name: 'pnpm',
+    icon: `<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'><path fill='#f9ad00' d='M30 10.75h-8.749V2H30Zm-9.626 0h-8.75V2h8.75Zm-9.625 0H2V2h8.749ZM30 20.375h-8.749v-8.75H30Z'/><path fill='#4e4e4e' d='M20.374 20.375h-8.75v-8.75h8.75Zm0 9.625h-8.75v-8.75h8.75ZM30 30h-8.749v-8.75H30Zm-19.251 0H2v-8.75h8.749Z'/></svg>`,
+    command: 'pnpm add tailwind-animations'
+  },
+  {
+    name: 'yarn',
+    icon: `<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'><path fill='#2188b6' d='M28.208 24.409a10.5 10.5 0 0 0-3.959 1.822a23.7 23.7 0 0 1-5.835 2.642a1.63 1.63 0 0 1-.983.55a62 62 0 0 1-6.447.577c-1.163.009-1.876-.3-2.074-.776a1.573 1.573 0 0 1 .866-2.074a4 4 0 0 1-.514-.379c-.171-.171-.352-.514-.406-.388c-.225.55-.343 1.894-.947 2.5c-.83.839-2.4.559-3.328.072c-1.019-.541.072-1.813.072-1.813a.73.73 0 0 1-.992-.343a4.85 4.85 0 0 1-.667-2.949a5.37 5.37 0 0 1 1.749-2.895a9.3 9.3 0 0 1 .658-4.4a10.45 10.45 0 0 1 3.165-3.661S6.628 10.747 7.35 8.817c.469-1.262.658-1.253.812-1.308a3.6 3.6 0 0 0 1.452-.857a5.27 5.27 0 0 1 4.41-1.7S15.2 1.4 16.277 2.09a18.4 18.4 0 0 1 1.533 2.886s1.281-.748 1.425-.469a11.33 11.33 0 0 1 .523 6.132a14 14 0 0 1-2.6 5.411c-.135.225 1.551.938 2.615 3.887c.983 2.7.108 4.96.262 5.212c.027.045.036.063.036.063s1.127.09 3.391-1.308a8.5 8.5 0 0 1 4.277-1.604a1.081 1.081 0 0 1 .469 2.11Z'/></svg>`,
+    command: 'yarn add tailwind-animations'
+  },
+  {
+    name: 'bun',
+    icon: `<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'><path fill='#fbf0df' d='M29 17c0 5.65-5.82 10.23-13 10.23S3 22.61 3 17c0-3.5 2.24-6.6 5.66-8.44S14.21 4.81 16 4.81s3.32 1.54 7.34 3.71C26.76 10.36 29 13.46 29 17'/><path fill='none' stroke='#000' d='M16 27.65c7.32 0 13.46-4.65 13.46-10.65c0-3.72-2.37-7-5.89-8.85c-1.39-.75-2.46-1.41-3.37-2l-1.13-.69A6.14 6.14 0 0 0 16 4.35a6.9 6.9 0 0 0-3.3 1.23c-.42.24-.86.51-1.32.8c-.87.54-1.83 1.13-3 1.73C4.91 10 2.54 13.24 2.54 17c0 6 6.14 10.65 13.46 10.65Z'/><ellipse cx='21.65' cy='18.62' fill='#febbd0' rx='2.17' ry='1.28'/><ellipse cx='10.41' cy='18.62' fill='#febbd0' rx='2.17' ry='1.28'/><path fill-rule='evenodd' d='M11.43 18.11a2 2 0 1 0-2-2.05a2.05 2.05 0 0 0 2 2.05m9.2 0a2 2 0 1 0-2-2.05a2 2 0 0 0 2 2.05'/><path fill='#fff' fill-rule='evenodd' d='M10.79 16.19a.77.77 0 1 0-.76-.77a.76.76 0 0 0 .76.77m9.2 0a.77.77 0 1 0 0-1.53a.77.77 0 0 0 0 1.53'/><path fill='#b71422' stroke='#000' stroke-width='.75' d='M18.62 19.67a3.3 3.3 0 0 1-1.09 1.75a2.48 2.48 0 0 1-1.5.69a2.53 2.53 0 0 1-1.5-.69a3.28 3.28 0 0 1-1.08-1.75a.26.26 0 0 1 .29-.3h4.58a.27.27 0 0 1 .3.3Z'/><path fill='#ccbea7' fill-rule='evenodd' d='M14.93 5.75a6.1 6.1 0 0 1-2.09 4.62c-.1.09 0 .27.11.22c1.25-.49 2.94-1.94 2.23-4.88c-.03-.15-.25-.11-.25.04m.85 0a6 6 0 0 1 .57 5c0 .13.12.24.21.13c.83-1 1.54-3.11-.59-5.31c-.1-.11-.27.04-.19.17Zm1-.06a6.1 6.1 0 0 1 2.53 4.38c0 .14.21.17.24 0c.34-1.3.15-3.51-2.66-4.66c-.12-.02-.21.18-.09.27ZM9.94 9.55a6.27 6.27 0 0 0 3.89-3.33c.07-.13.28-.08.25.07c-.64 3-2.79 3.59-4.13 3.51c-.14-.01-.14-.21-.01-.25'/></svg>`,
+    command: 'bun add tailwind-animations'
+  },
+  {
+    name: 'deno',
+    icon: `<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'><path fill-rule='evenodd' d='M4.45 21.34A12.5 12.5 0 0 1 3.27 16a12 12 0 0 1 .09-1.46a11 11 0 0 1 .24-1.42a12.75 12.75 0 0 1 9.73-9.57A13 13 0 0 1 16 3.27h1a12.73 12.73 0 0 1 11.57 10.5a13 13 0 0 1 .16 2.23v1a12.6 12.6 0 0 1-3.3 7.61a6.62 6.62 0 0 1-4.7 2.06a4.68 4.68 0 0 1-2.88-1.09a4.58 4.58 0 0 1-1.63-3.09a5.5 5.5 0 0 1 .14-1.61a3.4 3.4 0 0 1 .8-1.53a5 5 0 0 1-1.3-.88a.15.15 0 0 1 0-.19a.16.16 0 0 1 .18-.06a10 10 0 0 0 1.46.37a20 20 0 0 0 2.45.31c2.13.1 4.38-.9 5.05-2.81s.43-3.83-2.08-5s-3.66-2.5-5.69-3.32a5 5 0 0 0-4.3.62c-4.08 2.25-7.72 9.35-6 15.94a.21.21 0 0 1-.1.23a.2.2 0 0 1-.23 0a13 13 0 0 1-1.33-1.73a13 13 0 0 1-.82-1.49'/><path fill='#f5f5f5' fill-rule='evenodd' d='M16.65 2A14 14 0 1 1 2 15.35A14 14 0 0 1 16.65 2m3.27 16.85a20 20 0 0 1-2.45-.31a8.6 8.6 0 0 1-1.47-.35a.16.16 0 0 0-.18.06a.15.15 0 0 0 0 .19a5 5 0 0 0 1.3.88a3.4 3.4 0 0 0-.8 1.53a5.5 5.5 0 0 0-.14 1.61a4.58 4.58 0 0 0 1.63 3.09a4.68 4.68 0 0 0 2.88 1.09a6.62 6.62 0 0 0 4.72-2.07a12.73 12.73 0 1 0-18.84 0a.21.21 0 0 0 .35-.19c-1.68-6.59 2-13.69 6-15.94a5 5 0 0 1 4.3-.62c2 .82 3.18 2.18 5.69 3.32s2.78 3 2.08 5s-2.91 2.86-5.07 2.73ZM15.54 8.69c-.82.06-1.36 1.08-1.43 1.73s.25 1.73 1.32 1.71c1.25 0 1.64-1.09 1.5-2.13a1.39 1.39 0 0 0-1.39-1.31'/><path fill-rule='evenodd' d='M15.54 8.68A1.4 1.4 0 0 1 16.93 10c.14 1-.24 2.12-1.49 2.14c-1.07 0-1.4-1.06-1.33-1.71s.61-1.68 1.43-1.75'/></svg>`,
+    command: 'deno add tailwind-animations'
+  }
+]
+---
+
+<!-- section porque header ya hay que contenga los enlaces nav -->
+<section class='relative z-10 mx-auto mb-20 max-w-6xl px-4 lg:px-8'>
+  <!-- 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'
+    >
+      v{version}
+    </span>
+  </div>
+
+  <!-- Main Hero: Two columns layout -->
+  <div class='grid items-end gap-12 lg:grid-cols-2 lg:gap-16'>
+    <!-- Left Column: Content -->
+    <div class='text-left'>
+      <div
+        class='animate-fade-in-up animate-delay-100 mb-6 flex items-center gap-2 sm:gap-5'
+      >
+        <Logo
+          class='aspect-square size-10 shrink-0 sm:size-14'
+          iconClass='size-7 animate-float-subtle'
+        />
+        <h1
+          class='text-3xl font-bold tracking-tight text-slate-900 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'
+      >
+        The easiest way to add stunning animations to your Tailwind CSS
+        projects. Zero configuration, pure performance.
+      </p>
+
+      <!-- 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'
+        >
+          <div
+            class='flex items-center justify-between border-b border-slate-200 px-1 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'
+            >
+              {
+                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'}`}
+                    data-pm={pm.name}
+                    data-command={pm.command}
+                  >
+                    <span
+                      class='flex size-4 items-center justify-center'
+                      set:html={pm.icon}
+                    />
+                    <span>{pm.name}</span>
+                  </button>
+                ))
+              }
+            </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'
+              title='Copy to clipboard'
+            >
+              <CopyIcon class='size-4 group-active:scale-90' />
+            </button>
+          </div>
+          <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'
+              >
+                <span class='text-blue-500 select-none'>$ </span><span
+                  id='install-command'>{packageManagers[0].command}</span
+                >
+              </code>
+            </div>
+          </div>
+        </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'
+        >
+          <div
+            class='flex items-center justify-between border-b border-slate-200 px-4 py-2 dark:border-white/10'
+          >
+            <div class='flex gap-1'>
+              <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'
+                data-version='v4'
+              >
+                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'
+                data-version='v3'
+              >
+                Tailwind v3
+              </button>
+            </div>
+            <div class='flex items-center gap-4'>
+              <div
+                class='text-[10px] font-bold tracking-widest text-slate-400 uppercase'
+              >
+                How to use
+              </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'
+                title='Copy to clipboard'
+              >
+                <CopyIcon class='size-4 group-active:scale-90' />
+              </button>
+            </div>
+          </div>
+          <div class='overflow-x-auto p-4 text-left dark:border-none'>
+            <div id='code-v4' class='version-code'>
+              <Code
+                class='text-sm'
+                wrap={true}
+                lang='postcss'
+                theme='synthwave-84'
+                code={`@import 'tailwindcss';
+@import 'tailwind-animations';`}
+              />
+            </div>
+            <div id='code-v3' class='version-code hidden'>
+              <Code
+                class='text-sm'
+                wrap={true}
+                theme='synthwave-84'
+                lang='javascript'
+                code={`// install package '@midudev/tailwind-animations@0.2.0'
+// npm install @midudev/tailwind-animations@0.2.0
+                    
+// tailwind.config.mjs
+import animations from 'tailwind-animations'
+
+export default {
+  plugins: [
+    animations
+  ],
+}`}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Column: Interactive Demo -->
+    <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'
+      >
+        <!-- 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'
+        >
+          <div class='flex items-center gap-2'>
+            <div class='size-3 rounded-full bg-red-500'></div>
+            <div class='size-3 rounded-full bg-yellow-500'></div>
+            <div class='size-3 rounded-full bg-green-500'></div>
+          </div>
+          <span class='font-mono text-xs text-slate-500'>demo_preview.html</span
+          >
+          <div class='w-12'></div>
+        </div>
+
+        <!-- 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'
+        >
+          <!-- Grid Pattern Background -->
+          <div
+            class='pointer-events-none absolute inset-0 opacity-30 dark:opacity-30'
+            style='background-image: linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px); background-size: 40px 40px;'
+          >
+          </div>
+
+          <!-- Animated Box -->
+          <div
+            id='hero-demo-box'
+            class='relative size-28 rounded-2xl bg-linear-to-br from-violet-500 via-purple-500 to-pink-500 shadow-2xl shadow-purple-500/40'
+          >
+            <!-- Glow effect -->
+            <div
+              class='absolute -inset-1 -z-10 rounded-2xl bg-linear-to-br from-violet-500 via-purple-500 to-pink-500 opacity-50 blur-xl'
+            >
+            </div>
+          </div>
+        </div>
+
+        <!-- Code Display Area -->
+        <div
+          class='border-t border-slate-200 bg-white p-5 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
+            >
+            <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
+            >
+          </div>
+          <div
+            class='pl-4 font-mono text-sm text-slate-400 dark:text-slate-600'
+          >
+            &lt;!-- Applied animation --&gt;
+          </div>
+          <div class='font-mono text-sm'>
+            <span class='text-slate-500'>&lt;/</span><span
+              class='text-pink-600 dark:text-pink-400'>div</span
+            ><span class='text-slate-500'>&gt;</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Decorative elements -->
+      <div
+        class='pointer-events-none absolute top-0 right-0 size-40 -translate-x-20 -translate-y-20 rounded-full bg-blue-500/20 blur-3xl'
+      >
+      </div>
+
+      <div
+        class='pointer-events-none absolute -bottom-20 -left-20 size-40 rounded-full bg-purple-500/20 blur-3xl'
+      >
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index b3c1bd6..c61e918 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -1,30 +1,18 @@
 ---
 import Layout from '@layouts/Layout.astro'
 
-import pkg from '../../../package.json'
 import { theme } from '../data/theme.js'
 
-/*  
-Las importaciones, se han organizado de la siguiente forma: 
-1. importacion de code.
-2. importaciones de iconos.
-3. importaciones de componentes UI.
-4. importaciones de layout.
-*/
-
-import { Code } from 'astro:components'
 import CopyIcon from '@components/icons/copy.astro'
-import Github from '@components/icons/github.astro'
-
-import Logo from '@components/ui/Logo.astro'
-import ToggleTheme from '@components/ui/ToggleTheme.astro'
 
 // Importacion de componentes de layout
 import Footer from '@components/layout/Footer.astro'
 import Header from '@components/layout/Header.astro'
 
+// Importacion de secciones
+import Preview from '@components/sections/Preview.astro'
+
 const { animation, animationDuration, animationSteps, animationDelay } = theme
-const { version } = pkg
 
 const POPULAR_ANIMATIONS = [
   'fade-in',
@@ -58,33 +46,6 @@ const sortedAnimations = Object.keys(animation).sort((a, b) => {
   return indexA - indexB
 })
 
-const packageManagers = [
-  {
-    name: 'npm',
-    icon: `<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'><path fill='#c12127' d='M2 2h28v28H2'/><path fill='#fff' d='M7.25 7.25h17.5v17.5h-3.5v-14H16v14H7.25'/></svg>`,
-    command: 'npm install tailwind-animations'
-  },
-  {
-    name: 'pnpm',
-    icon: `<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'><path fill='#f9ad00' d='M30 10.75h-8.749V2H30Zm-9.626 0h-8.75V2h8.75Zm-9.625 0H2V2h8.749ZM30 20.375h-8.749v-8.75H30Z'/><path fill='#4e4e4e' d='M20.374 20.375h-8.75v-8.75h8.75Zm0 9.625h-8.75v-8.75h8.75ZM30 30h-8.749v-8.75H30Zm-19.251 0H2v-8.75h8.749Z'/></svg>`,
-    command: 'pnpm add tailwind-animations'
-  },
-  {
-    name: 'yarn',
-    icon: `<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'><path fill='#2188b6' d='M28.208 24.409a10.5 10.5 0 0 0-3.959 1.822a23.7 23.7 0 0 1-5.835 2.642a1.63 1.63 0 0 1-.983.55a62 62 0 0 1-6.447.577c-1.163.009-1.876-.3-2.074-.776a1.573 1.573 0 0 1 .866-2.074a4 4 0 0 1-.514-.379c-.171-.171-.352-.514-.406-.388c-.225.55-.343 1.894-.947 2.5c-.83.839-2.4.559-3.328.072c-1.019-.541.072-1.813.072-1.813a.73.73 0 0 1-.992-.343a4.85 4.85 0 0 1-.667-2.949a5.37 5.37 0 0 1 1.749-2.895a9.3 9.3 0 0 1 .658-4.4a10.45 10.45 0 0 1 3.165-3.661S6.628 10.747 7.35 8.817c.469-1.262.658-1.253.812-1.308a3.6 3.6 0 0 0 1.452-.857a5.27 5.27 0 0 1 4.41-1.7S15.2 1.4 16.277 2.09a18.4 18.4 0 0 1 1.533 2.886s1.281-.748 1.425-.469a11.33 11.33 0 0 1 .523 6.132a14 14 0 0 1-2.6 5.411c-.135.225 1.551.938 2.615 3.887c.983 2.7.108 4.96.262 5.212c.027.045.036.063.036.063s1.127.09 3.391-1.308a8.5 8.5 0 0 1 4.277-1.604a1.081 1.081 0 0 1 .469 2.11Z'/></svg>`,
-    command: 'yarn add tailwind-animations'
-  },
-  {
-    name: 'bun',
-    icon: `<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'><path fill='#fbf0df' d='M29 17c0 5.65-5.82 10.23-13 10.23S3 22.61 3 17c0-3.5 2.24-6.6 5.66-8.44S14.21 4.81 16 4.81s3.32 1.54 7.34 3.71C26.76 10.36 29 13.46 29 17'/><path fill='none' stroke='#000' d='M16 27.65c7.32 0 13.46-4.65 13.46-10.65c0-3.72-2.37-7-5.89-8.85c-1.39-.75-2.46-1.41-3.37-2l-1.13-.69A6.14 6.14 0 0 0 16 4.35a6.9 6.9 0 0 0-3.3 1.23c-.42.24-.86.51-1.32.8c-.87.54-1.83 1.13-3 1.73C4.91 10 2.54 13.24 2.54 17c0 6 6.14 10.65 13.46 10.65Z'/><ellipse cx='21.65' cy='18.62' fill='#febbd0' rx='2.17' ry='1.28'/><ellipse cx='10.41' cy='18.62' fill='#febbd0' rx='2.17' ry='1.28'/><path fill-rule='evenodd' d='M11.43 18.11a2 2 0 1 0-2-2.05a2.05 2.05 0 0 0 2 2.05m9.2 0a2 2 0 1 0-2-2.05a2 2 0 0 0 2 2.05'/><path fill='#fff' fill-rule='evenodd' d='M10.79 16.19a.77.77 0 1 0-.76-.77a.76.76 0 0 0 .76.77m9.2 0a.77.77 0 1 0 0-1.53a.77.77 0 0 0 0 1.53'/><path fill='#b71422' stroke='#000' stroke-width='.75' d='M18.62 19.67a3.3 3.3 0 0 1-1.09 1.75a2.48 2.48 0 0 1-1.5.69a2.53 2.53 0 0 1-1.5-.69a3.28 3.28 0 0 1-1.08-1.75a.26.26 0 0 1 .29-.3h4.58a.27.27 0 0 1 .3.3Z'/><path fill='#ccbea7' fill-rule='evenodd' d='M14.93 5.75a6.1 6.1 0 0 1-2.09 4.62c-.1.09 0 .27.11.22c1.25-.49 2.94-1.94 2.23-4.88c-.03-.15-.25-.11-.25.04m.85 0a6 6 0 0 1 .57 5c0 .13.12.24.21.13c.83-1 1.54-3.11-.59-5.31c-.1-.11-.27.04-.19.17Zm1-.06a6.1 6.1 0 0 1 2.53 4.38c0 .14.21.17.24 0c.34-1.3.15-3.51-2.66-4.66c-.12-.02-.21.18-.09.27ZM9.94 9.55a6.27 6.27 0 0 0 3.89-3.33c.07-.13.28-.08.25.07c-.64 3-2.79 3.59-4.13 3.51c-.14-.01-.14-.21-.01-.25'/></svg>`,
-    command: 'bun add tailwind-animations'
-  },
-  {
-    name: 'deno',
-    icon: `<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'><path fill-rule='evenodd' d='M4.45 21.34A12.5 12.5 0 0 1 3.27 16a12 12 0 0 1 .09-1.46a11 11 0 0 1 .24-1.42a12.75 12.75 0 0 1 9.73-9.57A13 13 0 0 1 16 3.27h1a12.73 12.73 0 0 1 11.57 10.5a13 13 0 0 1 .16 2.23v1a12.6 12.6 0 0 1-3.3 7.61a6.62 6.62 0 0 1-4.7 2.06a4.68 4.68 0 0 1-2.88-1.09a4.58 4.58 0 0 1-1.63-3.09a5.5 5.5 0 0 1 .14-1.61a3.4 3.4 0 0 1 .8-1.53a5 5 0 0 1-1.3-.88a.15.15 0 0 1 0-.19a.16.16 0 0 1 .18-.06a10 10 0 0 0 1.46.37a20 20 0 0 0 2.45.31c2.13.1 4.38-.9 5.05-2.81s.43-3.83-2.08-5s-3.66-2.5-5.69-3.32a5 5 0 0 0-4.3.62c-4.08 2.25-7.72 9.35-6 15.94a.21.21 0 0 1-.1.23a.2.2 0 0 1-.23 0a13 13 0 0 1-1.33-1.73a13 13 0 0 1-.82-1.49'/><path fill='#f5f5f5' fill-rule='evenodd' d='M16.65 2A14 14 0 1 1 2 15.35A14 14 0 0 1 16.65 2m3.27 16.85a20 20 0 0 1-2.45-.31a8.6 8.6 0 0 1-1.47-.35a.16.16 0 0 0-.18.06a.15.15 0 0 0 0 .19a5 5 0 0 0 1.3.88a3.4 3.4 0 0 0-.8 1.53a5.5 5.5 0 0 0-.14 1.61a4.58 4.58 0 0 0 1.63 3.09a4.68 4.68 0 0 0 2.88 1.09a6.62 6.62 0 0 0 4.72-2.07a12.73 12.73 0 1 0-18.84 0a.21.21 0 0 0 .35-.19c-1.68-6.59 2-13.69 6-15.94a5 5 0 0 1 4.3-.62c2 .82 3.18 2.18 5.69 3.32s2.78 3 2.08 5s-2.91 2.86-5.07 2.73ZM15.54 8.69c-.82.06-1.36 1.08-1.43 1.73s.25 1.73 1.32 1.71c1.25 0 1.64-1.09 1.5-2.13a1.39 1.39 0 0 0-1.39-1.31'/><path fill-rule='evenodd' d='M15.54 8.68A1.4 1.4 0 0 1 16.93 10c.14 1-.24 2.12-1.49 2.14c-1.07 0-1.4-1.06-1.33-1.71s.61-1.68 1.43-1.75'/></svg>`,
-    command: 'deno add tailwind-animations'
-  }
-]
 ---
 
 <Layout
@@ -95,247 +56,7 @@ const packageManagers = [
   <Header />
 
   <main class='mx-auto w-full max-w-6xl pt-16'>
-    <!-- section porque header ya hay que contenga los enlaces nav -->
-    <section
-      id='preview'
-      class='relative z-10 mx-auto mb-20 max-w-6xl px-4 lg:px-8'
-    >
-      <!-- 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'
-        >
-          v{version}
-        </span>
-      </div>
-
-      <!-- Main Hero: Two columns layout -->
-      <div class='grid items-end gap-12 lg:grid-cols-2 lg:gap-16'>
-        <!-- Left Column: Content -->
-        <div class='text-left'>
-          <div
-            class='animate-fade-in-up animate-delay-100 mb-6 flex items-center gap-2 sm:gap-5'
-          >
-            <Logo
-              class='aspect-square size-10 shrink-0 sm:size-14'
-              iconClass='size-7 animate-float-subtle'
-            />
-            <h1
-              class='text-3xl font-bold tracking-tight text-slate-900 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'
-          >
-            The easiest way to add stunning animations to your Tailwind CSS
-            projects. Zero configuration, pure performance.
-          </p>
-
-          <!-- 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'
-            >
-              <div
-                class='flex items-center justify-between border-b border-slate-200 px-1 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'
-                >
-                  {
-                    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'}`}
-                        data-pm={pm.name}
-                        data-command={pm.command}
-                      >
-                        <span
-                          class='flex size-4 items-center justify-center'
-                          set:html={pm.icon}
-                        />
-                        <span>{pm.name}</span>
-                      </button>
-                    ))
-                  }
-                </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'
-                  title='Copy to clipboard'
-                >
-                  <CopyIcon class='size-4 group-active:scale-90' />
-                </button>
-              </div>
-              <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'
-                  >
-                    <span class='text-blue-500 select-none'>$ </span><span
-                      id='install-command'>{packageManagers[0].command}</span
-                    >
-                  </code>
-                </div>
-              </div>
-            </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'
-            >
-              <div
-                class='flex items-center justify-between border-b border-slate-200 px-4 py-2 dark:border-white/10'
-              >
-                <div class='flex gap-1'>
-                  <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'
-                    data-version='v4'
-                  >
-                    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'
-                    data-version='v3'
-                  >
-                    Tailwind v3
-                  </button>
-                </div>
-                <div class='flex items-center gap-4'>
-                  <div
-                    class='text-[10px] font-bold tracking-widest text-slate-400 uppercase'
-                  >
-                    How to use
-                  </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'
-                    title='Copy to clipboard'
-                  >
-                    <CopyIcon class='size-4 group-active:scale-90' />
-                  </button>
-                </div>
-              </div>
-              <div class='overflow-x-auto p-4 text-left dark:border-none'>
-                <div id='code-v4' class='version-code'>
-                  <Code
-                    class='text-sm'
-                    wrap={true}
-                    lang='postcss'
-                    theme='synthwave-84'
-                    code={`@import 'tailwindcss';
-@import 'tailwind-animations';`}
-                  />
-                </div>
-                <div id='code-v3' class='version-code hidden'>
-                  <Code
-                    class='text-sm'
-                    wrap={true}
-                    theme='synthwave-84'
-                    lang='javascript'
-                    code={`// install package '@midudev/tailwind-animations@0.2.0'
-// npm install @midudev/tailwind-animations@0.2.0
-                    
-// tailwind.config.mjs
-import animations from 'tailwind-animations'
-
-export default {
-  plugins: [
-    animations
-  ],
-}`}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Right Column: Interactive Demo -->
-        <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'
-          >
-            <!-- 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'
-            >
-              <div class='flex items-center gap-2'>
-                <div class='size-3 rounded-full bg-red-500'></div>
-                <div class='size-3 rounded-full bg-yellow-500'></div>
-                <div class='size-3 rounded-full bg-green-500'></div>
-              </div>
-              <span class='font-mono text-xs text-slate-500'
-                >demo_preview.html</span
-              >
-              <div class='w-12'></div>
-            </div>
-
-            <!-- 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'
-            >
-              <!-- Grid Pattern Background -->
-              <div
-                class='pointer-events-none absolute inset-0 opacity-30 dark:opacity-30'
-                style='background-image: linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px); background-size: 40px 40px;'
-              >
-              </div>
-
-              <!-- Animated Box -->
-              <div
-                id='hero-demo-box'
-                class='relative size-28 rounded-2xl bg-linear-to-br from-violet-500 via-purple-500 to-pink-500 shadow-2xl shadow-purple-500/40'
-              >
-                <!-- Glow effect -->
-                <div
-                  class='absolute -inset-1 -z-10 rounded-2xl bg-linear-to-br from-violet-500 via-purple-500 to-pink-500 opacity-50 blur-xl'
-                >
-                </div>
-              </div>
-            </div>
-
-            <!-- Code Display Area -->
-            <div
-              class='border-t border-slate-200 bg-white p-5 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
-                >
-                <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
-                >
-              </div>
-              <div
-                class='pl-4 font-mono text-sm text-slate-400 dark:text-slate-600'
-              >
-                &lt;!-- Applied animation --&gt;
-              </div>
-              <div class='font-mono text-sm'>
-                <span class='text-slate-500'>&lt;/</span><span
-                  class='text-pink-600 dark:text-pink-400'>div</span
-                ><span class='text-slate-500'>&gt;</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- Decorative elements -->
-          <div
-            class='pointer-events-none absolute top-0 right-0 size-40 -translate-x-20 -translate-y-20 rounded-full bg-blue-500/20 blur-3xl'
-          >
-          </div>
-
-          <div
-            class='pointer-events-none absolute -bottom-20 -left-20 size-40 rounded-full bg-purple-500/20 blur-3xl'
-          >
-          </div>
-        </div>
-      </div>
-    </section>
+    <Preview />
 
     <section id='animation-collection' class='mt-32 mb-24'>
       <div class='mb-16 flex flex-col items-center'>

From 01cd7b2dd8831e682de08c86f054397563ae705f Mon Sep 17 00:00:00 2001
From: Fravelz <fravelz_@hotmail.com>
Date: Sat, 24 Jan 2026 06:37:57 -0500
Subject: [PATCH 3/5] Factorization Section 2 ScrollAnimation

The scroll animation section was moved to an .astro
component to improve its future maintainability.

Cambios a ser confirmados:
	nuevos archivos: src/components/sections/ScrollAnimation.astro
	modificados:     src/pages/index.astro
---
 .../components/sections/ScrollAnimation.astro | 151 +++++++++++++++++
 web/src/pages/index.astro                     | 157 +-----------------
 2 files changed, 153 insertions(+), 155 deletions(-)
 create mode 100644 web/src/components/sections/ScrollAnimation.astro

diff --git a/web/src/components/sections/ScrollAnimation.astro b/web/src/components/sections/ScrollAnimation.astro
new file mode 100644
index 0000000..5f83d97
--- /dev/null
+++ b/web/src/components/sections/ScrollAnimation.astro
@@ -0,0 +1,151 @@
+<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'
+    >
+      Scroll Animations
+    </h2>
+    <p
+      class='max-w-2xl text-center text-lg text-balance text-slate-600 dark:text-slate-400'
+    >
+      Animate elements based on their position in the viewport using the <code
+        class='text-blue-500'>timeline-view</code
+      > utility.
+    </p>
+  </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'
+  >
+    <div class='max-w-none'>
+      <h3 class='mb-6 text-center text-xl font-semibold dark:text-white'>
+        Scroll down to see the magic
+      </h3>
+
+      <p class='mb-6 text-slate-600 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 synchronize
+        the animation with the element's displacement within the viewport.
+      </p>
+
+      <p class='mb-12 text-slate-600 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> to control
+        when the animation starts and ends relative to the element's visibility.
+      </p>
+
+      <div
+        class='timeline-view animate-zoom-in animate-range-cover flex h-64 w-full flex-col items-center justify-center gap-4 rounded-2xl bg-pink-500 p-4 text-center font-bold text-white shadow-2xl'
+      >
+        <span class='text-2xl'>I reveal on scroll</span>
+        <code
+          class='rounded-lg bg-black/20 px-3 py-1 font-mono text-xs backdrop-blur-sm'
+        >
+          timeline-view animate-zoom-in animate-range-cover
+        </code>
+      </div>
+
+      <p class='mt-12 mb-12 text-slate-600 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
+          class='text-blue-500'>gradual</code
+        >, <code class='text-blue-500'>moderate</code>, <code
+          class='text-blue-500'>brisk</code
+        >, or <code class='text-blue-500'>rapid</code> to easily control the animation's
+        pace.
+      </p>
+
+      <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'
+        >
+          <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'
+          >
+            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'
+        >
+          <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'
+          >
+            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'
+        >
+          <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'
+          >
+            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'
+        >
+          <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'
+          >
+            animate-range-rapid
+          </code>
+        </div>
+      </div>
+
+      <p class='mt-12 mb-12 text-slate-600 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 perfectly time the reveal effect to match your design's flow.
+      </p>
+
+      <div
+        class='timeline-view animate-fade-in-left animate-range-[entry_5%_contain_20%] flex h-48 w-full flex-col items-center justify-center gap-4 rounded-2xl bg-blue-500 p-4 text-center font-bold text-white shadow-2xl'
+      >
+        <span class='text-2xl'>I fade in from the left</span>
+        <code
+          class='rounded-lg bg-black/20 px-3 py-1 font-mono text-xs backdrop-blur-sm'
+        >
+          timeline-view animate-slide-in-left
+          animate-range-[entry_5%_contain_20%]
+        </code>
+      </div>
+
+      <p class='mt-12 mb-12 text-slate-600 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 while
+        adjusting its opacity, synchronized with the user's scrolling speed for a
+        more interactive feel.
+      </p>
+
+      <div
+        class='timeline-view animate-blurred-fade-in animate-range-[entry_10%_contain_30%] flex h-48 w-full flex-col items-center justify-center gap-4 rounded-2xl bg-purple-500 p-4 text-center font-bold text-white shadow-2xl'
+      >
+        <span class='text-2xl'>I fade in with blur</span>
+        <code
+          class='rounded-lg bg-black/20 px-3 py-1 font-mono text-xs backdrop-blur-sm'
+        >
+          timeline-view animate-blurred-fade-in
+          animate-range-[entry_10%_contain_30%]
+        </code>
+      </div>
+
+      <p class='mt-12 text-slate-600 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 a
+        depth-of-field effect that naturally draws attention to the content as it
+        becomes clear and focused.
+      </p>
+    </div>
+  </div>
+</section>
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index c61e918..26f2664 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -11,6 +11,7 @@ import Header from '@components/layout/Header.astro'
 
 // Importacion de secciones
 import Preview from '@components/sections/Preview.astro'
+import ScrollAnimation from '@components/sections/ScrollAnimation.astro'
 
 const { animation, animationDuration, animationSteps, animationDelay } = theme
 
@@ -75,7 +76,6 @@ const sortedAnimations = Object.keys(animation).sort((a, b) => {
       </div>
 
       <div class='relative'>
-        <!-- Antes era sticky se le quito para que no tenga problemas con el header que es sticky -->
         <section
           class='top-4 z-50 mb-12 flex items-center justify-center px-4'
           id='option-inputs'
@@ -234,160 +234,7 @@ const sortedAnimations = Object.keys(animation).sort((a, b) => {
         }
       </div>
 
-      <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'
-          >
-            Scroll Animations
-          </h2>
-          <p
-            class='max-w-2xl text-center text-lg text-balance text-slate-600 dark:text-slate-400'
-          >
-            Animate elements based on their position in the viewport using the <code
-              class='text-blue-500'>timeline-view</code
-            > utility.
-          </p>
-        </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'
-        >
-          <div class='max-w-none'>
-            <h3 class='mb-6 text-center text-xl font-semibold dark:text-white'>
-              Scroll down to see the magic
-            </h3>
-
-            <p class='mb-6 text-slate-600 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
-              synchronize the animation with the element's displacement within the
-              viewport.
-            </p>
-
-            <p class='mb-12 text-slate-600 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
-              > to control when the animation starts and ends relative to the element's
-              visibility.
-            </p>
-
-            <div
-              class='timeline-view animate-zoom-in animate-range-cover flex h-64 w-full flex-col items-center justify-center gap-4 rounded-2xl bg-pink-500 p-4 text-center font-bold text-white shadow-2xl'
-            >
-              <span class='text-2xl'>I reveal on scroll</span>
-              <code
-                class='rounded-lg bg-black/20 px-3 py-1 font-mono text-xs backdrop-blur-sm'
-              >
-                timeline-view animate-zoom-in animate-range-cover
-              </code>
-            </div>
-
-            <p class='mt-12 mb-12 text-slate-600 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
-                class='text-blue-500'>gradual</code
-              >, <code class='text-blue-500'>moderate</code>, <code
-                class='text-blue-500'>brisk</code
-              >, or <code class='text-blue-500'>rapid</code> to easily control the
-              animation's pace.
-            </p>
-
-            <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'
-              >
-                <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'
-                >
-                  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'
-              >
-                <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'
-                >
-                  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'
-              >
-                <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'
-                >
-                  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'
-              >
-                <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'
-                >
-                  animate-range-rapid
-                </code>
-              </div>
-            </div>
-
-            <p class='mt-12 mb-12 text-slate-600 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
-              perfectly time the reveal effect to match your design's flow.
-            </p>
-
-            <div
-              class='timeline-view animate-fade-in-left animate-range-[entry_5%_contain_20%] flex h-48 w-full flex-col items-center justify-center gap-4 rounded-2xl bg-blue-500 p-4 text-center font-bold text-white shadow-2xl'
-            >
-              <span class='text-2xl'>I fade in from the left</span>
-              <code
-                class='rounded-lg bg-black/20 px-3 py-1 font-mono text-xs backdrop-blur-sm'
-              >
-                timeline-view animate-slide-in-left
-                animate-range-[entry_5%_contain_20%]
-              </code>
-            </div>
-
-            <p class='mt-12 mb-12 text-slate-600 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
-              while adjusting its opacity, synchronized with the user's scrolling
-              speed for a more interactive feel.
-            </p>
-
-            <div
-              class='timeline-view animate-blurred-fade-in animate-range-[entry_10%_contain_30%] flex h-48 w-full flex-col items-center justify-center gap-4 rounded-2xl bg-purple-500 p-4 text-center font-bold text-white shadow-2xl'
-            >
-              <span class='text-2xl'>I fade in with blur</span>
-              <code
-                class='rounded-lg bg-black/20 px-3 py-1 font-mono text-xs backdrop-blur-sm'
-              >
-                timeline-view animate-blurred-fade-in
-                animate-range-[entry_10%_contain_30%]
-              </code>
-            </div>
-
-            <p class='mt-12 text-slate-600 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
-              a depth-of-field effect that naturally draws attention to the content
-              as it becomes clear and focused.
-            </p>
-          </div>
-        </div>
-      </section>
+      <ScrollAnimation />
 
       <section id='scroll-view-timelines' class='relative mt-32 mb-24'>
         <div class='mb-16 flex flex-col items-center'>

From 7a19551111dd1af795d551818aa32e5a82674e2a Mon Sep 17 00:00:00 2001
From: Fravelz <fravelz_@hotmail.com>
Date: Sat, 24 Jan 2026 06:49:37 -0500
Subject: [PATCH 4/5] Factorization Section 3 ScrollViewTimelines.

Extra: Update of comments from Spanish to English,
and description for components.

Cambios a ser confirmados:
	modificados:     src/components/sections/Preview.astro
	modificados:     src/components/sections/ScrollAnimation.astro
	nuevos archivos: src/components/sections/ScrollViewTimelines.astro
	modificados:     src/pages/index.astro
---
 web/src/components/sections/Preview.astro     |   3 +-
 .../components/sections/ScrollAnimation.astro |   2 +
 .../sections/ScrollViewTimelines.astro        | 386 ++++++++++++++++
 web/src/pages/index.astro                     | 424 +-----------------
 4 files changed, 396 insertions(+), 419 deletions(-)
 create mode 100644 web/src/components/sections/ScrollViewTimelines.astro

diff --git a/web/src/components/sections/Preview.astro b/web/src/components/sections/Preview.astro
index 988be18..12c29ec 100644
--- a/web/src/components/sections/Preview.astro
+++ b/web/src/components/sections/Preview.astro
@@ -36,7 +36,8 @@ const packageManagers = [
 ]
 ---
 
-<!-- section porque header ya hay que contenga los enlaces nav -->
+<!-- First Section of the Main -->
+
 <section class='relative z-10 mx-auto mb-20 max-w-6xl px-4 lg:px-8'>
   <!-- Version badge -->
   <div class='animate-fade-in-up mb-8'>
diff --git a/web/src/components/sections/ScrollAnimation.astro b/web/src/components/sections/ScrollAnimation.astro
index 5f83d97..8caf9f3 100644
--- a/web/src/components/sections/ScrollAnimation.astro
+++ b/web/src/components/sections/ScrollAnimation.astro
@@ -1,3 +1,5 @@
+<!-- AnimationCollection Subsection -->
+
 <section id='scroll-animations' class='relative mt-32 mb-24'>
   <div class='mb-16 flex flex-col items-center'>
     <h2
diff --git a/web/src/components/sections/ScrollViewTimelines.astro b/web/src/components/sections/ScrollViewTimelines.astro
new file mode 100644
index 0000000..be7a8dc
--- /dev/null
+++ b/web/src/components/sections/ScrollViewTimelines.astro
@@ -0,0 +1,386 @@
+<!-- AnimationCollection Subsection -->
+
+<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'
+    >
+      Scroll & View Timelines
+    </h2>
+    <p
+      class='max-w-2xl text-center text-lg text-balance text-slate-600 dark:text-slate-400'
+    >
+      Link animations to scroll progress or element visibility using powerful
+      timeline utilities.
+    </p>
+  </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'
+  >
+    <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'>
+          Vertical Scroll Progress
+        </h3>
+        <p class='text-slate-600 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'
+        >
+          <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'>
+              ↓ 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>
+          </div>
+        </div>
+        <code
+          class='self-center rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-green-400'
+        >
+          timeline-scroll animate-expand-horizontally
+        </code>
+      </div>
+
+      <!-- Example 2: Horizontal Scroll Progress -->
+      <div class='flex flex-col gap-6'>
+        <h3 class='text-xl font-semibold dark:text-white'>
+          Horizontal Scroll Progress
+        </h3>
+        <p class='text-slate-600 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'
+        >
+          <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'
+          >
+          </div>
+          <div class='flex h-full w-full max-w-[1500px] items-center gap-4 p-6'>
+            {
+              ['🚀', '⭐', '💎', '🎯', '🔥', '✨', '🎨', '💡'].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'>
+                  {emoji}
+                </div>
+              ))
+            }
+          </div>
+        </div>
+        <code
+          class='self-center rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-purple-400'
+        >
+          timeline-[scroll(inline)] animate-expand-horizontally
+        </code>
+      </div>
+
+      <!-- Example 3: Entry vs Exit Ranges -->
+      <div class='flex flex-col gap-6'>
+        <h3 class='text-xl font-semibold dark:text-white'>
+          Entry & Exit Animation Ranges
+        </h3>
+        <p class='text-slate-600 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'
+            >animate-range-exit</code
+          > (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'
+        >
+          <div class='flex h-[1100px] flex-col items-center gap-8 p-8'>
+            <p class='text-sm text-slate-500 dark:text-slate-400'>
+              ↓ Scroll to see entry/exit animations
+            </p>
+            <div class='h-48'></div>
+            <div
+              class='timeline-view animate-slide-in-left animate-range-entry flex w-64 items-center justify-center rounded-xl bg-cyan-500 p-6 font-bold text-white shadow-lg'
+            >
+              <span class='text-center'
+                >Entry Animation<br /><span
+                  class='text-xs font-normal opacity-80'
+                  >Plays when entering</span
+                ></span
+              >
+            </div>
+            <div class='h-32'></div>
+            <div
+              class='timeline-view animate-slide-out-right animate-range-exit flex w-64 items-center justify-center rounded-xl bg-rose-500 p-6 font-bold text-white shadow-lg'
+            >
+              <span class='text-center'
+                >Exit Animation<br /><span
+                  class='text-xs font-normal opacity-80'
+                  >Plays when leaving</span
+                ></span
+              >
+            </div>
+            <div class='h-48'></div>
+          </div>
+        </div>
+        <div class='flex flex-wrap justify-center gap-2'>
+          <code
+            class='rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-cyan-400'
+          >
+            animate-range-entry
+          </code>
+          <code
+            class='rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-rose-400'
+          >
+            animate-range-exit
+          </code>
+        </div>
+      </div>
+
+      <!-- Example 4: Staggered Reveal -->
+      <div class='flex flex-col gap-6'>
+        <h3 class='text-xl font-semibold dark:text-white'>
+          Staggered Reveal Effect
+        </h3>
+        <p class='text-slate-600 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'
+        >
+          <div class='flex h-[1100px] flex-col items-center gap-6 p-8'>
+            <p class='text-sm text-slate-500 dark:text-slate-400'>
+              ↓ Scroll to reveal cards in sequence
+            </p>
+            <div class='h-64'></div>
+            <div class='grid grid-cols-2 gap-4'>
+              <div
+                class='timeline-view animate-fade-in-up animate-range-[entry_0%_cover_35%] flex h-24 w-28 items-center justify-center rounded-xl bg-amber-500 font-bold text-white shadow-lg'
+              >
+                First
+              </div>
+              <div
+                class='timeline-view animate-fade-in-up animate-range-[entry_10%_cover_45%] flex h-24 w-28 items-center justify-center rounded-xl bg-orange-500 font-bold text-white shadow-lg'
+              >
+                Second
+              </div>
+              <div
+                class='timeline-view animate-fade-in-up animate-range-[entry_20%_cover_55%] flex h-24 w-28 items-center justify-center rounded-xl bg-red-500 font-bold text-white shadow-lg'
+              >
+                Third
+              </div>
+              <div
+                class='timeline-view animate-fade-in-up animate-range-[entry_30%_cover_65%] flex h-24 w-28 items-center justify-center rounded-xl bg-pink-500 font-bold text-white shadow-lg'
+              >
+                Fourth
+              </div>
+            </div>
+            <div class='h-96'></div>
+          </div>
+        </div>
+        <code
+          class='self-center rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-amber-400'
+        >
+          animate-range-[entry_0%_cover_30%] → [entry_10%_cover_40%] → ...
+        </code>
+      </div>
+
+      <!-- Example 5: View Timeline with Rotation -->
+      <div class='flex flex-col gap-6'>
+        <h3 class='text-xl font-semibold dark:text-white'>
+          Rotation on Scroll
+        </h3>
+        <p class='text-slate-600 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'
+        >
+          <div class='flex h-[800px] flex-col items-center gap-8 p-8'>
+            <p class='text-sm text-slate-500 dark:text-slate-400'>
+              ↓ Scroll to spin the shapes
+            </p>
+            <div class='h-40'></div>
+            <div class='flex gap-6'>
+              <div
+                class='timeline-view animate-rotate-360 animate-range-cover h-20 w-20 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 shadow-lg'
+              >
+              </div>
+              <div
+                class='timeline-view animate-spin-clockwise animate-range-cover h-20 w-20 rounded-full bg-gradient-to-br from-teal-500 to-cyan-600 shadow-lg'
+              >
+              </div>
+              <div
+                class='timeline-view animate-flip-x animate-range-cover flex h-20 w-20 items-center justify-center rounded-xl bg-gradient-to-br from-fuchsia-500 to-pink-600 text-3xl shadow-lg'
+              >
+                🎲
+              </div>
+            </div>
+            <div class='h-96'></div>
+          </div>
+        </div>
+        <div class='flex flex-wrap justify-center gap-2'>
+          <code
+            class='rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-indigo-400'
+          >
+            animate-rotate-360
+          </code>
+          <code
+            class='rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-teal-400'
+          >
+            animate-spin-clockwise
+          </code>
+          <code
+            class='rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-fuchsia-400'
+          >
+            animate-flip-x
+          </code>
+        </div>
+      </div>
+
+      <!-- Example 6: Timeline Axis Variants -->
+      <div class='flex flex-col gap-6'>
+        <h3 class='text-xl font-semibold dark:text-white'>
+          Timeline Utilities Reference
+        </h3>
+        <p class='text-slate-600 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'
+          >
+            <span
+              class='text-xs font-bold tracking-wide text-slate-400 uppercase'
+              >Scroll Timelines</span
+            >
+            <code class='text-xs text-blue-500'>timeline-scroll</code>
+            <code class='text-xs text-blue-500'>timeline-[scroll(x)]</code>
+            <code class='text-xs text-blue-500'>timeline-[scroll(y)]</code>
+            <code class='text-xs text-blue-500'>timeline-[scroll(block)]</code>
+            <code class='text-xs text-blue-500'>timeline-[scroll(inline)]</code>
+          </div>
+          <div
+            class='flex flex-col gap-1 rounded-xl border border-slate-200 p-4 dark:border-slate-800'
+          >
+            <span
+              class='text-xs font-bold tracking-wide text-slate-400 uppercase'
+              >View Timelines</span
+            >
+            <code class='text-xs text-emerald-500'>timeline-view</code>
+            <code class='text-xs text-emerald-500'>timeline-[view(x)]</code>
+            <code class='text-xs text-emerald-500'>timeline-[view(y)]</code>
+            <code class='text-xs text-emerald-500'>timeline-[view(block)]</code>
+            <code class='text-xs text-emerald-500'>timeline-[view(inline)]</code
+            >
+          </div>
+          <div
+            class='flex flex-col gap-1 rounded-xl border border-slate-200 p-4 dark:border-slate-800'
+          >
+            <span
+              class='text-xs font-bold tracking-wide text-slate-400 uppercase'
+              >Animation Ranges</span
+            >
+            <code class='text-xs text-amber-500'>animate-range-cover</code>
+            <code class='text-xs text-amber-500'>animate-range-contain</code>
+            <code class='text-xs text-amber-500'>animate-range-entry</code>
+            <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'
+          >
+            <span
+              class='text-xs font-bold tracking-wide text-slate-400 uppercase'
+              >Preset Ranges</span
+            >
+            <code class='text-xs text-purple-500'
+              >animate-range-gradual <span class='text-slate-500'
+                >(10%-90%)</span
+              ></code
+            >
+            <code class='text-xs text-purple-500'
+              >animate-range-moderate <span class='text-slate-500'
+                >(20%-80%)</span
+              ></code
+            >
+            <code class='text-xs text-purple-500'
+              >animate-range-brisk <span class='text-slate-500'>(30%-70%)</span
+              ></code
+            >
+            <code class='text-xs text-purple-500'
+              >animate-range-rapid <span class='text-slate-500'>(40%-60%)</span
+              ></code
+            >
+          </div>
+        </div>
+      </div>
+
+      <!-- Example 7: Arbitrary Values -->
+      <div class='flex flex-col gap-6'>
+        <h3 class='text-xl font-semibold dark:text-white'>Arbitrary Values</h3>
+        <p class='text-slate-600 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'
+          >
+            <span
+              class='text-xs font-bold tracking-wide text-slate-400 uppercase'
+              >Scroll with axis</span
+            >
+            <code class='text-xs text-blue-400'>timeline-[scroll(x_root)]</code>
+            <code class='text-xs text-blue-400'
+              >timeline-[scroll(y_nearest)]</code
+            >
+          </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'
+          >
+            <span
+              class='text-xs font-bold tracking-wide text-slate-400 uppercase'
+              >View with inset</span
+            >
+            <code class='text-xs text-emerald-400'>timeline-[view(block)]</code>
+            <code class='text-xs text-emerald-400'
+              >timeline-[view(x_200px_auto)]</code
+            >
+          </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'
+          >
+            <span
+              class='text-xs font-bold tracking-wide text-slate-400 uppercase'
+              >Custom animation ranges</span
+            >
+            <code class='text-xs text-amber-400'
+              >animate-range-[entry_0%_cover_50%]</code
+            >
+            <code class='text-xs text-amber-400'
+              >animate-range-[cover_25%_cover_75%]</code
+            >
+            <code class='text-xs text-amber-400'
+              >animate-range-[exit_-10%_exit_100%]</code
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index 26f2664..6edcf7e 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -5,13 +5,14 @@ import { theme } from '../data/theme.js'
 
 import CopyIcon from '@components/icons/copy.astro'
 
-// Importacion de componentes de layout
+// Import Components Layout
 import Footer from '@components/layout/Footer.astro'
 import Header from '@components/layout/Header.astro'
 
-// Importacion de secciones
+// Import Section
 import Preview from '@components/sections/Preview.astro'
 import ScrollAnimation from '@components/sections/ScrollAnimation.astro'
+import ScrollViewTimelines from '@components/sections/ScrollViewTimelines.astro'
 
 const { animation, animationDuration, animationSteps, animationDelay } = theme
 
@@ -46,14 +47,12 @@ const sortedAnimations = Object.keys(animation).sort((a, b) => {
   if (indexB === -1) return -1
   return indexA - indexB
 })
-
 ---
 
 <Layout
   title='Tailwind CSS Animations Plugin: Community-Powered Animation Magic'
 >
   <wc-toast class='pointer-events-none fixed inset-0 z-50'></wc-toast>
-  <!-- se agrega el componente header -->
   <Header />
 
   <main class='mx-auto w-full max-w-6xl pt-16'>
@@ -234,422 +233,11 @@ const sortedAnimations = Object.keys(animation).sort((a, b) => {
         }
       </div>
 
+      <!-- Subsection 1 -->
       <ScrollAnimation />
 
-      <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'
-          >
-            Scroll & View Timelines
-          </h2>
-          <p
-            class='max-w-2xl text-center text-lg text-balance text-slate-600 dark:text-slate-400'
-          >
-            Link animations to scroll progress or element visibility using
-            powerful timeline utilities.
-          </p>
-        </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'
-        >
-          <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'>
-                Vertical Scroll Progress
-              </h3>
-              <p class='text-slate-600 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'
-              >
-                <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'>
-                    ↓ 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>
-                </div>
-              </div>
-              <code
-                class='self-center rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-green-400'
-              >
-                timeline-scroll animate-expand-horizontally
-              </code>
-            </div>
-
-            <!-- Example 2: Horizontal Scroll Progress -->
-            <div class='flex flex-col gap-6'>
-              <h3 class='text-xl font-semibold dark:text-white'>
-                Horizontal Scroll Progress
-              </h3>
-              <p class='text-slate-600 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'
-              >
-                <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'
-                >
-                </div>
-                <div
-                  class='flex h-full w-full max-w-[1500px] items-center gap-4 p-6'
-                >
-                  {
-                    ['🚀', '⭐', '💎', '🎯', '🔥', '✨', '🎨', '💡'].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'>
-                          {emoji}
-                        </div>
-                      )
-                    )
-                  }
-                </div>
-              </div>
-              <code
-                class='self-center rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-purple-400'
-              >
-                timeline-[scroll(inline)] animate-expand-horizontally
-              </code>
-            </div>
-
-            <!-- Example 3: Entry vs Exit Ranges -->
-            <div class='flex flex-col gap-6'>
-              <h3 class='text-xl font-semibold dark:text-white'>
-                Entry & Exit Animation Ranges
-              </h3>
-              <p class='text-slate-600 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'
-                  >animate-range-exit</code
-                > (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'
-              >
-                <div class='flex h-[1100px] flex-col items-center gap-8 p-8'>
-                  <p class='text-sm text-slate-500 dark:text-slate-400'>
-                    ↓ Scroll to see entry/exit animations
-                  </p>
-                  <div class='h-48'></div>
-                  <div
-                    class='timeline-view animate-slide-in-left animate-range-entry flex w-64 items-center justify-center rounded-xl bg-cyan-500 p-6 font-bold text-white shadow-lg'
-                  >
-                    <span class='text-center'
-                      >Entry Animation<br /><span
-                        class='text-xs font-normal opacity-80'
-                        >Plays when entering</span
-                      ></span
-                    >
-                  </div>
-                  <div class='h-32'></div>
-                  <div
-                    class='timeline-view animate-slide-out-right animate-range-exit flex w-64 items-center justify-center rounded-xl bg-rose-500 p-6 font-bold text-white shadow-lg'
-                  >
-                    <span class='text-center'
-                      >Exit Animation<br /><span
-                        class='text-xs font-normal opacity-80'
-                        >Plays when leaving</span
-                      ></span
-                    >
-                  </div>
-                  <div class='h-48'></div>
-                </div>
-              </div>
-              <div class='flex flex-wrap justify-center gap-2'>
-                <code
-                  class='rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-cyan-400'
-                >
-                  animate-range-entry
-                </code>
-                <code
-                  class='rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-rose-400'
-                >
-                  animate-range-exit
-                </code>
-              </div>
-            </div>
-
-            <!-- Example 4: Staggered Reveal -->
-            <div class='flex flex-col gap-6'>
-              <h3 class='text-xl font-semibold dark:text-white'>
-                Staggered Reveal Effect
-              </h3>
-              <p class='text-slate-600 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'
-              >
-                <div class='flex h-[1100px] flex-col items-center gap-6 p-8'>
-                  <p class='text-sm text-slate-500 dark:text-slate-400'>
-                    ↓ Scroll to reveal cards in sequence
-                  </p>
-                  <div class='h-64'></div>
-                  <div class='grid grid-cols-2 gap-4'>
-                    <div
-                      class='timeline-view animate-fade-in-up animate-range-[entry_0%_cover_35%] flex h-24 w-28 items-center justify-center rounded-xl bg-amber-500 font-bold text-white shadow-lg'
-                    >
-                      First
-                    </div>
-                    <div
-                      class='timeline-view animate-fade-in-up animate-range-[entry_10%_cover_45%] flex h-24 w-28 items-center justify-center rounded-xl bg-orange-500 font-bold text-white shadow-lg'
-                    >
-                      Second
-                    </div>
-                    <div
-                      class='timeline-view animate-fade-in-up animate-range-[entry_20%_cover_55%] flex h-24 w-28 items-center justify-center rounded-xl bg-red-500 font-bold text-white shadow-lg'
-                    >
-                      Third
-                    </div>
-                    <div
-                      class='timeline-view animate-fade-in-up animate-range-[entry_30%_cover_65%] flex h-24 w-28 items-center justify-center rounded-xl bg-pink-500 font-bold text-white shadow-lg'
-                    >
-                      Fourth
-                    </div>
-                  </div>
-                  <div class='h-96'></div>
-                </div>
-              </div>
-              <code
-                class='self-center rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-amber-400'
-              >
-                animate-range-[entry_0%_cover_30%] → [entry_10%_cover_40%] → ...
-              </code>
-            </div>
-
-            <!-- Example 5: View Timeline with Rotation -->
-            <div class='flex flex-col gap-6'>
-              <h3 class='text-xl font-semibold dark:text-white'>
-                Rotation on Scroll
-              </h3>
-              <p class='text-slate-600 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'
-              >
-                <div class='flex h-[800px] flex-col items-center gap-8 p-8'>
-                  <p class='text-sm text-slate-500 dark:text-slate-400'>
-                    ↓ Scroll to spin the shapes
-                  </p>
-                  <div class='h-40'></div>
-                  <div class='flex gap-6'>
-                    <div
-                      class='timeline-view animate-rotate-360 animate-range-cover h-20 w-20 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 shadow-lg'
-                    >
-                    </div>
-                    <div
-                      class='timeline-view animate-spin-clockwise animate-range-cover h-20 w-20 rounded-full bg-gradient-to-br from-teal-500 to-cyan-600 shadow-lg'
-                    >
-                    </div>
-                    <div
-                      class='timeline-view animate-flip-x animate-range-cover flex h-20 w-20 items-center justify-center rounded-xl bg-gradient-to-br from-fuchsia-500 to-pink-600 text-3xl shadow-lg'
-                    >
-                      🎲
-                    </div>
-                  </div>
-                  <div class='h-96'></div>
-                </div>
-              </div>
-              <div class='flex flex-wrap justify-center gap-2'>
-                <code
-                  class='rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-indigo-400'
-                >
-                  animate-rotate-360
-                </code>
-                <code
-                  class='rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-teal-400'
-                >
-                  animate-spin-clockwise
-                </code>
-                <code
-                  class='rounded-lg bg-slate-900 px-3 py-2 font-mono text-xs text-fuchsia-400'
-                >
-                  animate-flip-x
-                </code>
-              </div>
-            </div>
-
-            <!-- Example 6: Timeline Axis Variants -->
-            <div class='flex flex-col gap-6'>
-              <h3 class='text-xl font-semibold dark:text-white'>
-                Timeline Utilities Reference
-              </h3>
-              <p class='text-slate-600 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'
-                >
-                  <span
-                    class='text-xs font-bold tracking-wide text-slate-400 uppercase'
-                    >Scroll Timelines</span
-                  >
-                  <code class='text-xs text-blue-500'>timeline-scroll</code>
-                  <code class='text-xs text-blue-500'>timeline-[scroll(x)]</code
-                  >
-                  <code class='text-xs text-blue-500'>timeline-[scroll(y)]</code
-                  >
-                  <code class='text-xs text-blue-500'
-                    >timeline-[scroll(block)]</code
-                  >
-                  <code class='text-xs text-blue-500'
-                    >timeline-[scroll(inline)]</code
-                  >
-                </div>
-                <div
-                  class='flex flex-col gap-1 rounded-xl border border-slate-200 p-4 dark:border-slate-800'
-                >
-                  <span
-                    class='text-xs font-bold tracking-wide text-slate-400 uppercase'
-                    >View Timelines</span
-                  >
-                  <code class='text-xs text-emerald-500'>timeline-view</code>
-                  <code class='text-xs text-emerald-500'
-                    >timeline-[view(x)]</code
-                  >
-                  <code class='text-xs text-emerald-500'
-                    >timeline-[view(y)]</code
-                  >
-                  <code class='text-xs text-emerald-500'
-                    >timeline-[view(block)]</code
-                  >
-                  <code class='text-xs text-emerald-500'
-                    >timeline-[view(inline)]</code
-                  >
-                </div>
-                <div
-                  class='flex flex-col gap-1 rounded-xl border border-slate-200 p-4 dark:border-slate-800'
-                >
-                  <span
-                    class='text-xs font-bold tracking-wide text-slate-400 uppercase'
-                    >Animation Ranges</span
-                  >
-                  <code class='text-xs text-amber-500'>animate-range-cover</code
-                  >
-                  <code class='text-xs text-amber-500'
-                    >animate-range-contain</code
-                  >
-                  <code class='text-xs text-amber-500'>animate-range-entry</code
-                  >
-                  <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'
-                >
-                  <span
-                    class='text-xs font-bold tracking-wide text-slate-400 uppercase'
-                    >Preset Ranges</span
-                  >
-                  <code class='text-xs text-purple-500'
-                    >animate-range-gradual <span class='text-slate-500'
-                      >(10%-90%)</span
-                    ></code
-                  >
-                  <code class='text-xs text-purple-500'
-                    >animate-range-moderate <span class='text-slate-500'
-                      >(20%-80%)</span
-                    ></code
-                  >
-                  <code class='text-xs text-purple-500'
-                    >animate-range-brisk <span class='text-slate-500'
-                      >(30%-70%)</span
-                    ></code
-                  >
-                  <code class='text-xs text-purple-500'
-                    >animate-range-rapid <span class='text-slate-500'
-                      >(40%-60%)</span
-                    ></code
-                  >
-                </div>
-              </div>
-            </div>
-
-            <!-- Example 7: Arbitrary Values -->
-            <div class='flex flex-col gap-6'>
-              <h3 class='text-xl font-semibold dark:text-white'>
-                Arbitrary Values
-              </h3>
-              <p class='text-slate-600 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'
-                >
-                  <span
-                    class='text-xs font-bold tracking-wide text-slate-400 uppercase'
-                    >Scroll with axis</span
-                  >
-                  <code class='text-xs text-blue-400'
-                    >timeline-[scroll(x_root)]</code
-                  >
-                  <code class='text-xs text-blue-400'
-                    >timeline-[scroll(y_nearest)]</code
-                  >
-                </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'
-                >
-                  <span
-                    class='text-xs font-bold tracking-wide text-slate-400 uppercase'
-                    >View with inset</span
-                  >
-                  <code class='text-xs text-emerald-400'
-                    >timeline-[view(block)]</code
-                  >
-                  <code class='text-xs text-emerald-400'
-                    >timeline-[view(x_200px_auto)]</code
-                  >
-                </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'
-                >
-                  <span
-                    class='text-xs font-bold tracking-wide text-slate-400 uppercase'
-                    >Custom animation ranges</span
-                  >
-                  <code class='text-xs text-amber-400'
-                    >animate-range-[entry_0%_cover_50%]</code
-                  >
-                  <code class='text-xs text-amber-400'
-                    >animate-range-[cover_25%_cover_75%]</code
-                  >
-                  <code class='text-xs text-amber-400'
-                    >animate-range-[exit_-10%_exit_100%]</code
-                  >
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
+      <!-- Subsection 2 -->
+      <ScrollViewTimelines />
     </section>
   </main>
 

From f85fe1ab9299a93dd6024a1cdd320198d6480607 Mon Sep 17 00:00:00 2001
From: Fravelz <fravelz_@hotmail.com>
Date: Sat, 24 Jan 2026 06:58:09 -0500
Subject: [PATCH 5/5] Factorization Section 4 AnimationCollection.

Cambios a ser confirmados:
	nuevos archivos: src/components/sections/AnimationCollection.astro
	modificados:     src/pages/index.astro
---
 .../sections/AnimationCollection.astro        | 211 ++++++++++++++++++
 web/src/pages/index.astro                     | 176 +--------------
 2 files changed, 214 insertions(+), 173 deletions(-)
 create mode 100644 web/src/components/sections/AnimationCollection.astro

diff --git a/web/src/components/sections/AnimationCollection.astro b/web/src/components/sections/AnimationCollection.astro
new file mode 100644
index 0000000..b102bc3
--- /dev/null
+++ b/web/src/components/sections/AnimationCollection.astro
@@ -0,0 +1,211 @@
+---
+import { theme } from '../../data/theme.js'
+
+import CopyIcon from '@components/icons/copy.astro'
+
+const { animation, animationDuration, animationSteps, animationDelay } = theme
+
+const POPULAR_ANIMATIONS = [
+  'fade-in',
+  'blurred-fade-in',
+  'zoom-in',
+  'slide-in-top',
+  'bouncing',
+  'pulsing',
+  'shake',
+  'tada',
+  'jelly',
+  'flip-horizontal',
+  'swing',
+  'wobble',
+  'rotate-360',
+  'fade-in-up',
+  'slide-in-left',
+  'zoom-out',
+  'fade-in-down',
+  'slide-in-bottom',
+  'slide-in-right'
+]
+
+const sortedAnimations = Object.keys(animation).sort((a, b) => {
+  const indexA = POPULAR_ANIMATIONS.indexOf(a)
+  const indexB = POPULAR_ANIMATIONS.indexOf(b)
+
+  if (indexA === -1 && indexB === -1) return a.localeCompare(b)
+  if (indexA === -1) return 1
+  if (indexB === -1) return -1
+  return indexA - indexB
+})
+---
+
+<!-- Primary elements of the AnimationCollection section -->
+<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'
+  >
+    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'
+  >
+    Explore our comprehensive library of ready-to-use animations. Customize
+    duration, delay, and timing to fit your needs with zero configuration.
+  </p>
+</div>
+
+<div class='relative'>
+  <section
+    class='top-4 z-50 mb-12 flex items-center justify-center px-4'
+    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'
+    >
+      <div class='flex flex-col gap-1'>
+        <span
+          class='text-[10px] font-bold tracking-wider text-slate-400 uppercase'
+          >Duration</span
+        >
+        <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'
+        >
+          {
+            Object.entries(animationDuration).map(([key, value]) => (
+              <option
+                value={value}
+                selected={key === '1000'}
+                class='dark:bg-slate-900'
+              >
+                {key}
+              </option>
+            ))
+          }
+        </select>
+      </div>
+
+      <div class='flex flex-col gap-1'>
+        <span
+          class='text-[10px] font-bold tracking-wider text-slate-400 uppercase'
+          >Delay</span
+        >
+        <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'
+        >
+          {
+            Object.entries(animationDelay).map(([key, value]) => (
+              <option value={value} class='dark:bg-slate-900'>
+                {key}
+              </option>
+            ))
+          }
+        </select>
+      </div>
+
+      <div class='flex flex-col gap-1'>
+        <span
+          class='text-[10px] font-bold tracking-wider text-slate-400 uppercase'
+          >Steps</span
+        >
+        <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'
+        >
+          {
+            Object.entries(animationSteps).map(([key, value]) => (
+              <option value={value} class='dark:bg-slate-900'>
+                {key}
+              </option>
+            ))
+          }
+        </select>
+      </div>
+
+      <div class='hidden h-8 w-px bg-slate-200 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'
+          >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'
+          >
+          </div>
+          <div
+            class='absolute left-1 h-4 w-4 rounded-full bg-white shadow-sm transition-all peer-checked:translate-x-5'
+          >
+          </div>
+        </div>
+      </label>
+    </div>
+  </section>
+
+  <section
+    class='relative mx-auto grid max-w-6xl grid-cols-2 gap-6 px-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 lg:px-8'
+  >
+    {
+      sortedAnimations.map((animationKey, index) => (
+        <article
+          class={`group animate-fade-in-up relative flex 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 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;`}
+        >
+          <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'>
+              {animationKey}
+            </span>
+            <button
+              aria-label={`Copy ${animationKey} class`}
+              class='text-slate-300 transition-colors hover:text-blue-500'
+            >
+              <CopyIcon class='size-4' />
+            </button>
+          </div>
+
+          <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'
+            />
+          </div>
+        </article>
+      ))
+    }
+  </section>
+
+  {
+    sortedAnimations.length > 15 && (
+      <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'
+        >
+          <span>View all animations</span>
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            width='20'
+            height='20'
+            viewBox='0 0 24 24'
+            fill='none'
+            stroke='currentColor'
+            stroke-width='2.5'
+            stroke-linecap='round'
+            stroke-linejoin='round'
+            class='transition-transform group-hover:rotate-90'
+          >
+            <path d='M12 5v14' />
+            <path d='M5 12h14' />
+          </svg>
+        </button>
+      </div>
+    )
+  }
+</div>
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index 6edcf7e..99b328a 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -11,6 +11,7 @@ import Header from '@components/layout/Header.astro'
 
 // Import Section
 import Preview from '@components/sections/Preview.astro'
+import AnimationCollection from '@components/sections/AnimationCollection.astro'
 import ScrollAnimation from '@components/sections/ScrollAnimation.astro'
 import ScrollViewTimelines from '@components/sections/ScrollViewTimelines.astro'
 
@@ -59,179 +60,8 @@ const sortedAnimations = Object.keys(animation).sort((a, b) => {
     <Preview />
 
     <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'
-        >
-          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'
-        >
-          Explore our comprehensive library of ready-to-use animations.
-          Customize duration, delay, and timing to fit your needs with zero
-          configuration.
-        </p>
-      </div>
-
-      <div class='relative'>
-        <section
-          class='top-4 z-50 mb-12 flex items-center justify-center px-4'
-          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'
-          >
-            <div class='flex flex-col gap-1'>
-              <span
-                class='text-[10px] font-bold tracking-wider text-slate-400 uppercase'
-                >Duration</span
-              >
-              <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'
-              >
-                {
-                  Object.entries(animationDuration).map(([key, value]) => (
-                    <option
-                      value={value}
-                      selected={key === '1000'}
-                      class='dark:bg-slate-900'
-                    >
-                      {key}
-                    </option>
-                  ))
-                }
-              </select>
-            </div>
-
-            <div class='flex flex-col gap-1'>
-              <span
-                class='text-[10px] font-bold tracking-wider text-slate-400 uppercase'
-                >Delay</span
-              >
-              <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'
-              >
-                {
-                  Object.entries(animationDelay).map(([key, value]) => (
-                    <option value={value} class='dark:bg-slate-900'>
-                      {key}
-                    </option>
-                  ))
-                }
-              </select>
-            </div>
-
-            <div class='flex flex-col gap-1'>
-              <span
-                class='text-[10px] font-bold tracking-wider text-slate-400 uppercase'
-                >Steps</span
-              >
-              <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'
-              >
-                {
-                  Object.entries(animationSteps).map(([key, value]) => (
-                    <option value={value} class='dark:bg-slate-900'>
-                      {key}
-                    </option>
-                  ))
-                }
-              </select>
-            </div>
-
-            <div
-              class='hidden h-8 w-px bg-slate-200 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'
-                >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'
-                >
-                </div>
-                <div
-                  class='absolute left-1 h-4 w-4 rounded-full bg-white shadow-sm transition-all peer-checked:translate-x-5'
-                >
-                </div>
-              </div>
-            </label>
-          </div>
-        </section>
-
-        <section
-          class='relative mx-auto grid max-w-6xl grid-cols-2 gap-6 px-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 lg:px-8'
-        >
-          {
-            sortedAnimations.map((animationKey, index) => (
-              <article
-                class={`group animate-fade-in-up relative flex 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 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;`}
-              >
-                <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'>
-                    {animationKey}
-                  </span>
-                  <button
-                    aria-label={`Copy ${animationKey} class`}
-                    class='text-slate-300 transition-colors hover:text-blue-500'
-                  >
-                    <CopyIcon class='size-4' />
-                  </button>
-                </div>
-
-                <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'
-                  />
-                </div>
-              </article>
-            ))
-          }
-        </section>
-
-        {
-          sortedAnimations.length > 15 && (
-            <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'
-              >
-                <span>View all animations</span>
-                <svg
-                  xmlns='http://www.w3.org/2000/svg'
-                  width='20'
-                  height='20'
-                  viewBox='0 0 24 24'
-                  fill='none'
-                  stroke='currentColor'
-                  stroke-width='2.5'
-                  stroke-linecap='round'
-                  stroke-linejoin='round'
-                  class='transition-transform group-hover:rotate-90'
-                >
-                  <path d='M12 5v14' />
-                  <path d='M5 12h14' />
-                </svg>
-              </button>
-            </div>
-          )
-        }
-      </div>
+      <!-- Primary elements of the AnimationCollection section -->
+      <AnimationCollection />
 
       <!-- Subsection 1 -->
       <ScrollAnimation />