fix: generate scroll animation css from size (#463)

* fix: generate scroll animation css with size

* chore: update

Author: boojack

src/components/pages/schema-migration/hero/hero.tsx

@@ -4,7 +4,7 @@ import Image from 'next/image';
 import { useEffect, useRef, useState } from 'react';
 
 import Pill from '@/components/shared/pill';
-import '@/styles/sql-editor-hero.css';
+import { generateScrollAnimationCSS } from '@/utils/hero-animate';
 
 type HeroProps = {
   // subjects is an array of comparison subjects.
@@ -51,7 +51,15 @@ const Hero = ({ subjects }: HeroProps) => {
               {initialed && isSubjectsScrollable ? (
                 <>
                   <div className="absolute z-[1] h-4 w-full bg-white blur-md" />
-                  <div className="scroll-animation flex flex-col items-end justify-center">
+                  <style
+                    // eslint-disable-next-line react/no-danger
+                    dangerouslySetInnerHTML={{
+                      __html: generateScrollAnimationCSS(scrollableSubjects.length),
+                    }}
+                  />
+                  <div
+                    className={`scroll-animation-${scrollableSubjects.length} flex flex-col items-end justify-center`}
+                  >
                     {scrollableSubjects.map((subject, index) => (
                       // eslint-disable-next-line react/no-array-index-key
                       <mark key={`${subject}-${index}`} className="bg-transparent text-primary-1">

src/components/pages/sql-editor/hero/hero.tsx

@@ -4,7 +4,7 @@ import Image from 'next/image';
 import { useEffect, useRef, useState } from 'react';
 
 import Pill from '@/components/shared/pill';
-import '@/styles/sql-editor-hero.css';
+import { generateScrollAnimationCSS } from '@/utils/hero-animate';
 
 type HeroProps = {
   // subjects is an array of comparison subjects.
@@ -51,7 +51,15 @@ const Hero = ({ subjects }: HeroProps) => {
               {initialed && isSubjectsScrollable ? (
                 <>
                   <div className="absolute z-[1] h-4 w-full bg-white blur-md" />
-                  <div className="scroll-animation flex flex-col items-end justify-center">
+                  <style
+                    // eslint-disable-next-line react/no-danger
+                    dangerouslySetInnerHTML={{
+                      __html: generateScrollAnimationCSS(scrollableSubjects.length),
+                    }}
+                  />
+                  <div
+                    className={`scroll-animation-${scrollableSubjects.length} flex flex-col items-end justify-center`}
+                  >
                     {scrollableSubjects.map((subject, index) => (
                       // eslint-disable-next-line react/no-array-index-key
                       <mark key={`${subject}-${index}`} className="bg-transparent text-primary-1">

src/styles/sql-editor-hero.css

@@ -0,0 +1,44 @@
+/**
+ * Generates a CSS string for a scroll animation with a specified number of steps.
+ *
+ * @param size - The number of steps in the scroll animation.
+ * @returns A string containing the CSS for the scroll animation.
+ *
+ * The generated CSS includes:
+ * - Keyframes for the scroll animation, where each step translates the element vertically.
+ * - A CSS class that applies the animation with a duration based on the number of steps.
+ */
+export const generateScrollAnimationCSS = (size: number): string => {
+  const keyframes: string[] = [];
+  const stepPercentage = 100 / (size - 1);
+  const transformStep = 100 / size;
+  const animateDuration = 3;
+
+  for (let i = 0; i < size; i++) {
+    const percentage = i * stepPercentage;
+    const transformValue = -i * transformStep;
+
+    keyframes.push(`
+      ${(i - 0.5) * stepPercentage}% {
+        transform: translateY(${transformValue}%);
+      }
+      ${percentage}% {
+        transform: translateY(${transformValue}%);
+      }
+    `);
+  }
+
+  const keyframesCSS = `
+    @keyframes hero-scroll-${size} {
+      ${keyframes.join('')}
+    }
+  `;
+
+  return `
+    .scroll-animation-${size} {
+      animation: hero-scroll-${size} ${animateDuration * (size - 1)}s ease-in-out infinite;
+      animation-delay: ${animateDuration}s;
+    }
+    ${keyframesCSS}
+  `;
+};