171 lines
4.2 KiB
TypeScript
171 lines
4.2 KiB
TypeScript
"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>
|
|
);
|
|
}
|