WIP better marquee animation; optimizing and refactoring style code

package.json

@@ -1,7 +1,7 @@
 {
   "name": "quickshell-docs",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -10,42 +10,42 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "0.9.5",
+    "@astrojs/check": "0.9.6",
-    "@astrojs/markdown-remark": "6.3.9",
+    "@astrojs/markdown-remark": "6.3.10",
-    "@astrojs/mdx": "4.3.12",
+    "@astrojs/mdx": "4.3.13",
     "@astrojs/sitemap": "3.6.0",
     "@astrojs/solid-js": "^5.1.3",
     "@fontsource-variable/rubik": "^5.2.8",
     "@hbsnow/rehype-sectionize": "^1.0.7",
     "@pagefind/default-ui": "^1.4.0",
-    "@shikijs/rehype": "^3.15.0",
+    "@shikijs/rehype": "^3.20.0",
-    "astro": "5.16.0",
+    "astro": "5.16.6",
-    "astro-breadcrumbs": "^3.3.1",
+    "astro-breadcrumbs": "^3.3.3",
     "astro-icon": "^1.1.5",
     "hast-util-from-html": "^2.0.3",
     "hastscript": "^9.0.1",
     "rehype": "^13.0.2",
-    "remark-github-blockquote-alert": "^2.0.0",
+    "remark-github-blockquote-alert": "^2.0.1",
     "solid-js": "^1.9.10",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@astrojs/ts-plugin": "1.10.5",
+    "@astrojs/ts-plugin": "1.10.6",
     "@babel/core": "^7.28.5",
     "@babel/plugin-syntax-typescript": "^7.27.1",
-    "@biomejs/biome": "^2.3.7",
+    "@biomejs/biome": "^2.3.10",
     "@types/babel__core": "^7.20.5",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^24.10.1",
+    "@types/node": "^25.0.3",
     "@types/unist": "^3.0.3",
     "jsonc-parser": "^3.3.1",
     "pagefind": "^1.4.0",
-    "shiki": "^3.15.0",
+    "shiki": "^3.20.0",
-    "tsx": "^4.20.6",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "vite": "^7.2.4"
+    "vite": "^7.3.0"
   },
-  "packageManager": "yarn@4.11.0"
+  "packageManager": "yarn@4.12.0"
 }

src/components/marquee/Marquee.astro

@@ -1,40 +1,6 @@
 ---
 import { Icon } from "astro-icon/components";
-
+import MarqueeContent from "./MarqueeContent.astro";
-const videos = [
-  {
-    author: '<a href="https://github.com/soramanew">soramane</a>',
-    source: "https://github.com/caelestia-dots/shell",
-    path: "/assets/showcase/soramane.mp4",
-    installable: true,
-  },
-  {
-    author: '<a href="https://github.com/end-4">end_4</a>',
-    source: "https://github.com/end-4/dots-hyprland",
-    path: "/assets/showcase/end4.mp4",
-    installable: true,
-  },
-  {
-    author: '<a href="https://outfoxxed.me">outfoxxed</a>',
-    source:
-      "https://git.outfoxxed.me/outfoxxed/nixnew/src/branch/master/modules/user/modules/quickshell",
-    path: "/assets/showcase/outfoxxed.mp4",
-  },
-  {
-    author:
-      '<a href="https://github.com/pfaj/">pfaj</a> and <a href="https://github.com/bdebiase">bdebiase</a>',
-    path: "/assets/showcase/pfaj-bdeblase.mp4",
-  },
-  {
-    author: '<a href="https://github.com/flickowoa">flicko</a>',
-    source: "https://github.com/flickowoa/zephyr",
-    path: "/assets/showcase/flicko.mp4",
-  },
-  {
-    author: '<a href="https://vaxry.net">vaxry</a>',
-    path: "/assets/showcase/vaxry.mp4",
-  },
-];
 ---
 <div class="marquee">
   <div class="marquee-scroll">
@@ -45,52 +11,38 @@ const videos = [
       <div><Icon name="caret-right"/></div>
     </div>
   </div>
-  <div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0">
+  <MarqueeContent/>
-    {videos.map(({ author, source, installable, path }, index) =>
-      <div class="marquee-item">
-        <video
-          data-media-index={index}
-          data-media-author={author}
-          id="showcase-video"
-          class="marquee-item-spacing marquee-item-content"
-          muted
-          controls
-          playsinline
-          preload="metadata"
-        >
-        <source src={path} type="video/mp4"/>
-        </video>
-        <p>
-          Configuration by <Fragment set:html={author}/>
-          {source && !installable && <>(<a href={source}>source code</a>)</>}
-          {source && installable && <>(<a href={source}>install</a>)</>}
-        </p>
-    </div>)}
-  </div>
 </div>
 
 <script>
   const marquee = document.getElementById("marquee-content")!;
   marquee.style.setProperty("--scroll", "0")
+  marquee.style.setProperty("--mult", "1")
 
   window.addEventListener("load", autoplayInit, false);
   const videos = document.getElementsByClassName("marquee-item-content") as HTMLCollectionOf<HTMLVideoElement>;
   const videoCount = videos.length;
+  const lastVideoIndex = videos[videos.length - 1]
   let currentVideoIndex = 0;
   let currentVideo: HTMLVideoElement | null = null;
 
   function autoplayInit() {
     setActiveVideo(0);
-    currentVideo!.play();
+    currentVideo.play();
+    currentVideo.style.animationPlayState = "running";
   }
 
   function setActiveVideo(index: number) {
-    currentVideo?.pause();
+    if (currentVideo) {
+      currentVideo.pause();
+    }
 
     currentVideoIndex = index;
     currentVideo = videos[currentVideoIndex];
+
     currentVideo.currentTime = 0;
     marquee.style.setProperty("--scroll", `-${currentVideoIndex*100}%`)
+    marquee.style.setProperty("--mult", `${currentVideoIndex + 1}`)
   }
 
   function offsetCarousel(offset: number) {
@@ -103,19 +55,59 @@ const videos = [
   const intersectionOptions = {
     root: marquee,
     rootMargin: "0px",
-    threshold: 0.0,
+    threshold: 0.1,
   };
 
   const observer = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
       const video = entry.target as HTMLVideoElement;
+
       if (!entry.isIntersecting) {
         video.pause();
+
+        video.style.animationName = "none";
+        void video.offsetWidth;
+
+        video.style.animationName = "fade";
+        video.style.animationDuration = "0.3s";
+        video.style.animationTimingFunction = "ease-in-out";
+        video.style.animationFillMode = "forwards";
+        video.style.animationDirection = "reverse";
       } else if (video === currentVideo) {
         video.play();
+
+        video.style.animationName = "none";
+        void video.offsetWidth;
+
+        video.style.animationName = "fade";
+        video.style.animationDuration = "0.3s";
+        video.style.animationTimingFunction = "ease-in-out";
+        video.style.animationFillMode = "forwards";
+        video.style.animationPlayState = "running";
+        video.style.animationDirection = "normal";
+      }
+      if (entry.isIntersecting && video === lastVideoIndex) {
+        addNextVideo();
       }
     });
   }, intersectionOptions);
+  function addNextVideo() {
+    const firstVideo = videos[0];
+    if (!firstVideo) return;
+
+    const newVideo = firstVideo.cloneNode(true) as HTMLVideoElement;
+
+    // IMPORTANT: Reset the state of the new video
+    newVideo.pause();
+    newVideo.currentTime = 0;
+    newVideo.style.animationName = "none"; // Reset any lingering animation styles
+
+    // append to the marquee
+    marquee.appendChild(newVideo);
+
+    // observe the new video
+    observer.observe(newVideo);
+  }
 
   for (const video of videos) {
     observer.observe(video);

src/components/marquee/MarqueeContent.astro

@@ -0,0 +1,58 @@
+---
+const videos = [
+  {
+    author: '<a href="https://github.com/soramanew">soramane</a>',
+    source: "https://github.com/caelestia-dots/shell",
+    path: "/assets/showcase/soramane.mp4",
+    installable: true,
+  },
+  {
+    author: '<a href="https://github.com/end-4">end_4</a>',
+    source: "https://github.com/end-4/dots-hyprland",
+    path: "/assets/showcase/end4.mp4",
+    installable: true,
+  },
+  {
+    author: '<a href="https://outfoxxed.me">outfoxxed</a>',
+    source:
+      "https://git.outfoxxed.me/outfoxxed/nixnew/src/branch/master/modules/user/modules/quickshell",
+    path: "/assets/showcase/outfoxxed.mp4",
+  },
+  {
+    author:
+      '<a href="https://github.com/pfaj/">pfaj</a> and <a href="https://github.com/bdebiase">bdebiase</a>',
+    path: "/assets/showcase/pfaj-bdeblase.mp4",
+  },
+  {
+    author: '<a href="https://github.com/flickowoa">flicko</a>',
+    source: "https://github.com/flickowoa/zephyr",
+    path: "/assets/showcase/flicko.mp4",
+  },
+  {
+    author: '<a href="https://vaxry.net">vaxry</a>',
+    path: "/assets/showcase/vaxry.mp4",
+  },
+];
+---
+<div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0">
+  {videos.map(({ author, source, installable, path }, index) =>
+    <div class="marquee-item">
+      <video
+        data-media-index={index}
+        data-media-author={author}
+        id="showcase-video"
+        class="marquee-item-spacing marquee-item-content"
+        muted
+        controls
+        playsinline
+        preload="metadata"
+      >
+      <source src={path} type="video/mp4"/>
+      </video>
+      <p>
+        Configuration by <Fragment set:html={author}/>
+        {source && !installable && <>(<a href={source}>source code</a>)</>}
+        {source && installable && <>(<a href={source}>install</a>)</>}
+      </p>
+  </div>)}
+</div>

src/styles/components/marquee.css

@@ -30,7 +30,9 @@
   display: flex;
   width: 100%;
   margin-block: var(--lg);
-  justify-content: center;
+  justify-content: space-between;
+  align-items: center;
+  scroll-snap-type: x mandatory;
 }
 
 .marquee-content {
@@ -43,15 +45,15 @@
 .marquee-item {
   position: relative;
   flex: 1 0 100%;
-  transition: transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
-  transform: translateX(var(--scroll));
   display: flex;
   flex-direction: column;
   align-items: center;
+  transition: left 0.3s var(--ease-in-out);
+  left: var(--scroll);
   gap: var(--md);
   padding-inline: 0.5rem;
 
-  &>* {
+  & > * {
     z-index: 11;
   }
 
@@ -81,7 +83,7 @@
   transition:
     background-color 0.3s,
     opacity 0.3s;
-  z-index: 10;
+  z-index: 20;
   user-select: none;
   align-items: stretch;
   pointer-events: none;
@@ -96,7 +98,7 @@
   flex-direction: column;
   justify-content: center;
 
-  &>div {
+  & > div {
     width: 2.5rem;
     aspect-ratio: 1 / 1;
     display: flex;
@@ -110,7 +112,7 @@
   &:hover {
     cursor: pointer;
 
-    &>div {
+    & > div {
       opacity: 0.9;
     }
   }
@@ -144,7 +146,7 @@
   .marquee-scroll-arrow {
     height: unset;
 
-    &>div {
+    & > div {
       background-color: #55555580;
       border-radius: var(--radius-xs);
     }
@@ -152,6 +154,6 @@
 
   .marquee-scroll {
     width: 92%;
-    align-items: center;
+    left: 4%;
   }
 }

src/styles/css-config/animations.css

@@ -124,7 +124,6 @@
 }
 
 @keyframes ping {
-
   75%,
   100% {
     transform: scale(2);
@@ -139,7 +138,6 @@
 }
 
 @keyframes bounce {
-
   0%,
   100% {
     transform: translateY(-25%);
@@ -152,6 +150,18 @@
   }
 }
 
+@keyframes fade {
+  0% {
+    transform: scale(0.75);
+    opacity: 0.6;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
 :root {
   --animate-spin: spin 1s linear infinite;
   --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;

src/styles/css-config/base.css

@@ -12,118 +12,6 @@ html {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  color-scheme: light dark;
-  /* accent */
-  --green: 141deg;
-  --accent-400: var(--green) 90% 57%;
-  --accent-500: var(--green) 90% 47%;
-  --accent-600: var(--green) 88% 40%;
-  --accent-700: var(--green) 70% 40%;
-
-  /* secondary */
-  --blue: 224deg;
-  --secondary-400: var(--blue) 100% 68%;
-  --secondary-500: var(--blue) 100% 58%;
-  --secondary-600: var(--blue) 53% 41%;
-  --secondary-700: var(--blue) 43% 31%;
-  --secondary-800: var(--blue) 23% 21%;
-  --secondary-900: var(--blue) 44% 7%;
-
-  /* primary */
-  --white: 194deg;
-  --bg-400: var(--white) 10% 95%;
-  --bg-500: var(--white) 5% 90%;
-  --bg-600: var(--white) 5% 76%;
-  --bg-700: var(--white) 5% 56%;
-  --bg-800: var(--white) 5% 36%;
-  --bg-900: var(--white) 5% 16%;
-
-  /* docs */
-  --background: var(--bg-500);
-  --text: var(--white) 0% 0%;
-  --text-dark: var(--white) 0% 18%;
-  --text-darker: var(--white) 0% 30%;
-  --link: var(--green) 48% 40%;
-  --toc-link: var(--green) 74% 30%;
-  --toc-link-active: var(--green) 80% 38%;
-  --prop-color: 350deg 78% 70%;
-  --prop-link-color: 350deg 78% 60%;
-  --func-color: 50deg 68% 50%;
-  --func-link-color: 50deg 58% 55%;
-  --signal-color: 270deg 78% 70%;
-  --signal-link-color: 270deg 85% 60%;
-  --var-color: 190deg 78% 70%;
-  --var-link-color: 190deg 85% 60%;
-  --inner-param-color: 215deg 80% 27%;
-  --inner-param-border-color: 215deg 50% 50%;
-  --nav-hovered-bkg: var(--blue) 100% 87%;
-  --nav-hovered-weak-bkg: var(--blue) 100% 91%;
-  --nav-selected-bkg: var(--blue) 100% 90%;
-  --nav-selected-hovered-bkg: var(--blue) 100% 85%;
-  --nav-selected-text: var(--blue) 60% 60%;
-  --nav-indicator-bkg: var(--blue) 45% 80%;
-  --toc-hovered-bkg: 0deg 0% 0% / 0.1;
-  --overlay-bkg: var(--blue) 25% 93%;
-  --overlay-bkg-border: var(--blue) 10% 75%;
-  --footer-bkg: var(--blue) 8% 87%;
-  --footer-bkg-border: var(--blue) 32% 84%;
-}
-
-html.dark {
-  /* accent */
-  --green: 141deg;
-  --accent-400: var(--green) 100% 67%;
-  --accent-500: var(--green) 95% 55%;
-  --accent-600: var(--green) 90% 40%;
-  --accent-700: var(--green) 80% 30%;
-
-  /* secondary */
-  --white: 194deg;
-  --secondary-400: var(--white) 33% 100%;
-  --secondary-500: var(--white) 33% 96%;
-  --secondary-600: var(--white) 33% 76%;
-  --secondary-700: var(--white) 33% 56%;
-  --secondary-800: var(--white) 35% 36%;
-  --secondary-900: var(--white) 44% 7%;
-
-  /* primary */
-  --blue: 224deg;
-  --bg-400: var(--blue) 90% 65%;
-  --bg-500: var(--blue) 83% 45%;
-  --bg-700: var(--blue) 82% 25%;
-  --bg-800: var(--blue) 82% 15%;
-  --bg-900: var(--blue) 82% 3%;
-
-  /* docs */
-  --background: var(--bg-900);
-  --text: var(--white) 0% 100%;
-  --text-dark: var(--white) 0% 70%;
-  --text-darker: var(--white) 0% 40%;
-  --link: var(--green) 60% 44%;
-  --toc-link: var(--green) 74% 40%;
-  --toc-link-active: var(--green) 80% 60%;
-  --prop-color: 350deg 78% 70%;
-  --prop-link-color: 350deg 78% 60%;
-  --func-color: 50deg 78% 70%;
-  --func-link-color: 50deg 78% 60%;
-  --signal-color: 270deg 78% 70%;
-  --signal-link-color: 270deg 85% 60%;
-  --var-color: 190deg 78% 70%;
-  --var-link-color: 190deg 85% 60%;
-  --inner-param-color: 215deg 60% 70%;
-  --inner-param-border-color: 215deg 26% 46%;
-  --nav-hovered-bkg: var(--blue) 40% 10%;
-  --nav-hovered-weak-bkg: var(--blue) 35% 8%;
-  --nav-selected-bkg: var(--blue) 40% 13%;
-  --nav-selected-hovered-bkg: var(--blue) 40% 17%;
-  --nav-selected-text: var(--blue) 100% 70%;
-  --nav-indicator-bkg: var(--blue) 30% 30%;
-  --toc-hovered-bkg: 0deg 0% 100% / 0.07;
-  --overlay-bkg: var(--blue) 75% 5%;
-  --overlay-bkg-border: var(--blue) 45% 15%;
-  --footer-bkg: var(--blue) 66% 5%;
-  --footer-bkg-border: var(--blue) 75% 21%;
 }
 
 * {

src/styles/css-config/colors.css

@@ -1,3 +1,117 @@
+:root {
+  color-scheme: light dark;
+  /* accent */
+  --green: 141deg;
+  --accent-400: var(--green) 90% 57%;
+  --accent-500: var(--green) 90% 47%;
+  --accent-600: var(--green) 88% 40%;
+  --accent-700: var(--green) 70% 40%;
+
+  /* secondary */
+  --blue: 224deg;
+  --secondary-400: var(--blue) 100% 68%;
+  --secondary-500: var(--blue) 100% 58%;
+  --secondary-600: var(--blue) 53% 41%;
+  --secondary-700: var(--blue) 43% 31%;
+  --secondary-800: var(--blue) 23% 21%;
+  --secondary-900: var(--blue) 44% 7%;
+
+  /* primary */
+  --white: 194deg;
+  --bg-400: var(--white) 10% 95%;
+  --bg-500: var(--white) 5% 90%;
+  --bg-600: var(--white) 5% 76%;
+  --bg-700: var(--white) 5% 56%;
+  --bg-800: var(--white) 5% 36%;
+  --bg-900: var(--white) 5% 16%;
+
+  /* docs */
+  --background: var(--bg-500);
+  --text: var(--white) 0% 0%;
+  --text-dark: var(--white) 0% 18%;
+  --text-darker: var(--white) 0% 30%;
+  --link: var(--green) 48% 40%;
+  --toc-link: var(--green) 74% 30%;
+  --toc-link-active: var(--green) 80% 38%;
+  --prop-color: 350deg 78% 70%;
+  --prop-link-color: 350deg 78% 60%;
+  --func-color: 50deg 68% 50%;
+  --func-link-color: 50deg 58% 55%;
+  --signal-color: 270deg 78% 70%;
+  --signal-link-color: 270deg 85% 60%;
+  --var-color: 190deg 78% 70%;
+  --var-link-color: 190deg 85% 60%;
+  --inner-param-color: 215deg 80% 27%;
+  --inner-param-border-color: 215deg 50% 50%;
+  --nav-hovered-bkg: var(--blue) 100% 87%;
+  --nav-hovered-weak-bkg: var(--blue) 100% 91%;
+  --nav-selected-bkg: var(--blue) 100% 90%;
+  --nav-selected-hovered-bkg: var(--blue) 100% 85%;
+  --nav-selected-text: var(--blue) 60% 60%;
+  --nav-indicator-bkg: var(--blue) 45% 80%;
+  --toc-hovered-bkg: 0deg 0% 0% / 0.1;
+  --overlay-bkg: var(--blue) 25% 93%;
+  --overlay-bkg-border: var(--blue) 10% 75%;
+  --footer-bkg: var(--blue) 8% 87%;
+  --footer-bkg-border: var(--blue) 32% 84%;
+}
+
+html.dark {
+  /* accent */
+  --green: 141deg;
+  --accent-400: var(--green) 100% 67%;
+  --accent-500: var(--green) 95% 55%;
+  --accent-600: var(--green) 90% 40%;
+  --accent-700: var(--green) 80% 30%;
+
+  /* secondary */
+  --white: 194deg;
+  --secondary-400: var(--white) 33% 100%;
+  --secondary-500: var(--white) 33% 96%;
+  --secondary-600: var(--white) 33% 76%;
+  --secondary-700: var(--white) 33% 56%;
+  --secondary-800: var(--white) 35% 36%;
+  --secondary-900: var(--white) 44% 7%;
+
+  /* primary */
+  --blue: 224deg;
+  --bg-400: var(--blue) 90% 65%;
+  --bg-500: var(--blue) 83% 45%;
+  --bg-700: var(--blue) 82% 25%;
+  --bg-800: var(--blue) 82% 15%;
+  --bg-900: var(--blue) 82% 3%;
+
+  /* docs */
+  --background: var(--bg-900);
+  --text: var(--white) 0% 100%;
+  --text-dark: var(--white) 0% 70%;
+  --text-darker: var(--white) 0% 40%;
+  --link: var(--green) 60% 44%;
+  --toc-link: var(--green) 74% 40%;
+  --toc-link-active: var(--green) 80% 60%;
+  --prop-color: 350deg 78% 70%;
+  --prop-link-color: 350deg 78% 60%;
+  --func-color: 50deg 78% 70%;
+  --func-link-color: 50deg 78% 60%;
+  --signal-color: 270deg 78% 70%;
+  --signal-link-color: 270deg 85% 60%;
+  --var-color: 190deg 78% 70%;
+  --var-link-color: 190deg 85% 60%;
+  --inner-param-color: 215deg 60% 70%;
+  --inner-param-border-color: 215deg 26% 46%;
+  --nav-hovered-bkg: var(--blue) 40% 10%;
+  --nav-hovered-weak-bkg: var(--blue) 35% 8%;
+  --nav-selected-bkg: var(--blue) 40% 13%;
+  --nav-selected-hovered-bkg: var(--blue) 40% 17%;
+  --nav-selected-text: var(--blue) 100% 70%;
+  --nav-indicator-bkg: var(--blue) 30% 30%;
+  --toc-hovered-bkg: 0deg 0% 100% / 0.07;
+  --overlay-bkg: var(--blue) 75% 5%;
+  --overlay-bkg-border: var(--blue) 45% 15%;
+  --footer-bkg: var(--blue) 66% 5%;
+  --footer-bkg-border: var(--blue) 75% 21%;
+}
+
 .typeprop-link {
   color: hsl(var(--prop-link-color));
 

src/styles/css-config/vars.css

@@ -1,4 +1,4 @@
-:root {
+html {
   --scaleFactor: 1.618;
   --wholestep: 1.618;
   --halfstep: 1.272;
@@ -21,8 +21,13 @@
   --3xl: calc(var(--2xl) * var(--scaleFactor));
   --4xl: calc(var(--3xl) * var(--scaleFactor));
 
-  /* Unitless sizes; required for adhoc calculations (division and multiplication in calc() require unitless numbers */
+  /* INFO: Unitless sizes;
-  /* NOTE: in calc() with multiplication or division the right side must be a unitless number */
+      required for adhoc calculations
+      (division and multiplication in calc() require unitless numbers)
+  */
+  /* NOTE:
+      in calc() with (x*y) or (x/y) the "y" must be a unitless number
+  */
 
   --sm-unitless: calc(1 / var(--scaleFactor));
   --xs-unitless: calc(var(--sm-unitless) / var(--scaleFactor));