Add editable localized marquee settings

2026-03-08 22:40:01 +01:00
parent 8740a94611
commit 1d4c2f8e72
9 changed files with 608 additions and 5 deletions
@@ -0,0 +1,170 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+type MarqueeDirection = "left" | "right";
+
+export type MarqueeRow = {
+  items: string[];
+  direction: MarqueeDirection;
+  duration?: number;
+};
+
+type StackedMarqueeSectionProps = {
+  className?: string;
+  rows?: MarqueeRow[];
+};
+
+const DEFAULT_ROWS: MarqueeRow[] = [
+  {
+    direction: "left",
+    duration: 126,
+    items: [
+      "Next.js",
+      "React",
+      "WordPress",
+      "Docker",
+      "Technical SEO",
+      "Tailwind CSS",
+      "Google Analytics",
+      "Framer Motion",
+      "Cloudflare",
+      "Performance",
+    ],
+  },
+  {
+    direction: "right",
+    duration: 220,
+    items: [
+      "TypeScript",
+      "Node.js",
+      "WooCommerce",
+      "Schema Markup",
+      "DevOps",
+      "Responsive Design",
+      "Core Web Vitals",
+      "Plausible Analytics",
+      "Design Systems",
+      "Server Infrastructure",
+    ],
+  },
+  {
+    direction: "left",
+    duration: 168,
+    items: [
+      "JavaScript",
+      "REST APIs",
+      "Git",
+      "Linux",
+      "Search Console",
+      "Conversion Tracking",
+      "UI Engineering",
+      "Accessibility",
+      "Component Architecture",
+      "Web Performance",
+    ],
+  },
+  {
+    direction: "right",
+    duration: 144,
+    items: [
+      "Frontend Strategy",
+      "CMS Integration",
+      "Motion Design",
+      "Content Architecture",
+      "E-Commerce",
+      "SEO Audits",
+      "Deployments",
+      "Scalable UI",
+      "Analytics Setup",
+      "Product Pages",
+    ],
+  },
+];
+
+function MarqueeRowTrack({ items, direction, duration = 24 }: MarqueeRow) {
+  const shouldReduceMotion = useReducedMotion();
+
+  return (
+    <div className="overflow-hidden leading-[0.92]">
+      <motion.div
+        className="flex w-max min-w-full flex-nowrap"
+        animate={
+          shouldReduceMotion
+            ? { x: 0 }
+            : {
+                x: direction === "left" ? ["0%", "-50%"] : ["-50%", "0%"],
+              }
+        }
+        transition={
+          shouldReduceMotion
+            ? undefined
+            : {
+                duration,
+                ease: "linear",
+                repeat: Number.POSITIVE_INFINITY,
+              }
+        }
+      >
+        {Array.from({ length: 2 }).map((_, copyIndex) => (
+          <div
+            key={`${direction}-${copyIndex}`}
+            className="flex shrink-0 items-center gap-3 pr-3 sm:gap-4 sm:pr-4 lg:gap-5 lg:pr-5"
+            aria-hidden={copyIndex === 1}
+          >
+            {items.map((item, itemIndex) => (
+              <div
+                key={`${copyIndex}-${item}`}
+                className="flex shrink-0 items-center gap-3 sm:gap-4 lg:gap-5"
+              >
+                <span
+                  className={cn(
+                    "shrink-0 whitespace-nowrap text-[clamp(2.05rem,6vw,4.8rem)] uppercase leading-[0.92] tracking-[-0.01em] text-[hsl(var(--surface-3))] dark:text-[hsl(var(--surface-3))] [text-shadow:none]",
+                    itemIndex % 2 === 0 ? "font-black" : "font-light",
+                  )}
+                >
+                  {item}
+                </span>
+                <span
+                  className="text-[clamp(1.85rem,5vw,4rem)] font-light leading-[0.92] tracking-[-0.01em] text-[hsl(var(--surface-3))] dark:text-[hsl(var(--surface-3))] [text-shadow:none]"
+                  aria-hidden="true"
+                >
+                  /
+                </span>
+              </div>
+            ))}
+          </div>
+        ))}
+      </motion.div>
+    </div>
+  );
+}
+
+export function StackedMarqueeSection({
+  className,
+  rows = DEFAULT_ROWS,
+}: StackedMarqueeSectionProps) {
+  return (
+    <section
+      aria-label="Technology marquee"
+      className={cn(
+        "relative isolate overflow-hidden bg-transparent py-3 sm:py-4 lg:py-5",
+        className,
+      )}
+    >
+      <div className="relative flex flex-col gap-0 sm:gap-0 lg:gap-0">
+        {rows.map((row, index) => (
+          <div key={`${row.direction}-${index}`} className={index === 0 ? "" : "-mt-0.5 sm:-mt-1"}>
+            <MarqueeRowTrack
+              items={row.items}
+              direction={row.direction}
+              duration={row.duration}
+            />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}