init

src/components/Marquee.tsx

@@ -0,0 +1,35 @@
+import { motion } from "motion/react";
+
+export default function Marquee({speed = 10, items, from, to }: {
+    speed?: number,
+    items: { src: string }[],
+    from: number | string, to: number | string
+}) {
+    return (
+        <div className="flex">
+            <motion.div
+                initial={{ x: `${from}` }}
+                animate={{ x: `${to}` }}
+                transition={{ duration: speed, repeat: Infinity, ease: "linear" }}
+                className="flex shrink-0"
+            >
+                {items.map((item, index: number) => {
+                    return <img width={300} alt={`marqueImg${index}`}
+                        className="dark:invert object-scale-down pr-0 sm:pr-16 max-h-16" src={item.src} key={index} />
+                })}
+            </motion.div>
+
+            <motion.div
+                initial={{ x: `${from}` }}
+                animate={{ x: `${to}` }}
+                transition={{ duration: speed, repeat: Infinity, ease: "linear" }}
+                className="flex shrink-0"
+            >
+                {items.map((item, index: number) => {
+                    return <img width={300} alt={`marqueImg${index}`}
+                        className="dark:invert object-scale-down pr-0 sm:pr-16 max-h-16" src={item.src} key={index} />;
+                })}
+            </motion.div>
+        </div>
+    );
+};