Squashed 'sample-front-end/' changes from 601ffe4..552f9c4

552f9c4 feat: Centralize animation and timing constants
cc962c2 feat: Adjust sync animation gradient
e623426 feat: Add playlist sync functionality and animations

git-subtree-dir: sample-front-end
git-subtree-split: 552f9c471324793b85af14534e81d45d319036a2

index.html

@@ -16,6 +16,10 @@
                 darker: '#111827',
                 card: '#374151'
               }
+            },
+            animation: {
+              'scroll-out-left': 'scroll-out-left 1s linear infinite',
+              'scroll-out-right': 'scroll-out-right 1s linear infinite',
             }
           }
         }
@@ -36,6 +40,23 @@
       ::-webkit-scrollbar-thumb:hover {
         background: #6b7280; 
       }
+
+      /* 
+         Symmetrical Diagonal Scroll Animations
+         Pattern width: 40px (20px color + 20px transparent).
+         Diagonal length: 40 * sqrt(2) ≈ 56.57px.
+         
+         Left Side: Anchored to Right (Center). Moves Left (increases right offset).
+         Right Side: Anchored to Left (Center). Moves Right (increases left offset).
+      */
+      @keyframes scroll-out-left {
+        0% { background-position: right 0 top 0; }
+        100% { background-position: right 56.57px top 0; }
+      }
+      @keyframes scroll-out-right {
+        0% { background-position: left 0 top 0; }
+        100% { background-position: left 56.57px top 0; }
+      }
     </style>
   <script type="importmap">
 {