Add this new component below the current design without changing or affecting any existing elements.

New Component to Add (Seamless Integration)
Create a five-column vertical auto-scrolling carousel that blends directly into the page background, with no containers, no borders, no boxes around the module.
Strict Layout Requirements
Add five (5) vertical columns arranged horizontally in one straight row.
Each column contains exactly ten (10) image placeholders stacked vertically.
Each placeholder must:
be identical in size
be evenly spaced
be a simple light-grey image placeholder with a centered “image” icon
have no container around the entire module — only the placeholders themselves exist
Scrolling Behavior (Alternating Directions)
Auto-scroll continuously with a seamless loop.
Scroll directions must alternate:
Column 1: scroll down
Column 2: scroll up
Column 3: scroll down
Column 4: scroll up
Column 5: scroll down
Smooth motion, slight speed variation allowed.
Styling Rules
The module must blend directly into the existing background, with no outer container.
No borders, frames, wrappers, or shaded areas.
Only the image placeholders appear on the page.
Use the same background color/texture that is already present.
Keep the look clean, minimal, and consistent with the current design.
Placement
Append this auto-scrolling, alternating-direction thumbnail carousel below the existing content.
Do not modify any previous design elements.

index.html

@@ -199,96 +199,82 @@
 <script>
         feather.replace();
     </script>
-    <!-- Vertical Scrolling Columns -->
-    <section class="relative z-10 py-12">
-        <div class="container mx-auto px-6">
-            <div class="flex gap-6 overflow-x-auto pb-6 scrolling-columns-container">
-                <!-- Column 1 (Scrolls Down) -->
-                <div class="scrolling-column scroll-down">
-                    <div class="placeholder-container">
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                    </div>
-                </div>
-                
-                <!-- Column 2 (Scrolls Up) -->
-                <div class="scrolling-column scroll-up">
-                    <div class="placeholder-container">
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                    </div>
-                </div>
-                
-                <!-- Column 3 (Scrolls Down) -->
-                <div class="scrolling-column scroll-down">
-                    <div class="placeholder-container">
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                    </div>
-                </div>
-                
-                <!-- Column 4 (Scrolls Up) -->
-                <div class="scrolling-column scroll-up">
-                    <div class="placeholder-container">
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                    </div>
-                </div>
-                
-                <!-- Column 5 (Scrolls Down) -->
-                <div class="scrolling-column scroll-down">
-                    <div class="placeholder-container">
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                        <div class="image-placeholder"><i data-feather="image"></i></div>
-                    </div>
-                </div>
-            </div>
+<div class="vertical-scrolling-columns">
+    <div class="scrolling-column scroll-down">
+        <div class="placeholder-container">
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+        </div>
+    </div>
+    <div class="scrolling-column scroll-up">
+        <div class="placeholder-container">
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
         </div>
-    </section>
+    </div>
+    <div class="scrolling-column scroll-down">
+        <div class="placeholder-container">
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+        </div>
+    </div>
+    <div class="scrolling-column scroll-up">
+        <div class="placeholder-container">
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+        </div>
+    </div>
+    <div class="scrolling-column scroll-down">
+        <div class="placeholder-container">
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+            <div class="image-placeholder"><i data-feather="image"></i></div>
+        </div>
+    </div>
+</div>
 
-    <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
-    <script>
-        feather.replace();
-    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+<script>
+    feather.replace();
+</script>
 </body>
 </html>

style.css

@@ -737,6 +737,83 @@ box-shadow: 0 0 30px rgba(15, 240, 252, 0.5),
     }
 }
 
+@keyframes scrollUp {
+    0% {
+        transform: translateY(-50%);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+/* Vertical Scrolling Columns */
+.vertical-scrolling-columns {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    padding: 2rem 0;
+    mask-image: linear-gradient(
+        to right,
+        transparent 0%,
+        black 5%,
+        black 95%,
+        transparent 100%
+    );
+    background: transparent;
+}
+
+.scrolling-column {
+    flex: 0 0 150px;
+    height: 500px;
+    overflow: hidden;
+    position: relative;
+    background: transparent;
+}
+
+.scrolling-column.scroll-down .placeholder-container {
+    animation: scrollDown 25s linear infinite;
+}
+
+.scrolling-column.scroll-up .placeholder-container {
+    animation: scrollUp 30s linear infinite;
+}
+
+.placeholder-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0;
+}
+
+.image-placeholder {
+    width: 150px;
+    height: 150px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.image-placeholder i {
+    color: rgba(255, 255, 255, 0.2);
+    width: 24px;
+    height: 24px;
+}
+
+.image-placeholder:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+@keyframes scrollDown {
+    0% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(-50%);
+    }
+}
+
 @keyframes scrollUp {
     0% {
         transform: translateY(-50%);