Infinite logo marquee

"use client";

const marqueeStyle = `
  @keyframes elMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .el-marquee-track {
    animation: elMarquee 40s linear infinite;
  }
  .el-marquee-track:hover {
    animation-play-state: paused;
  }
`;

// Real version renders each company's actual logo image (filtered to
// mono, blend-mode-corrected per source file); isolated here with plain
// wordmarks instead, since the point is the scroll/fade mechanism.
const COMPANIES = ["LightAutoAI", "DevLayer", "Singularity", "Oriv", "Evlogia", "Creator Insights"];
const track = [...COMPANIES, ...COMPANIES];

function Dot() {
  return <span className="mx-6 inline-block h-1 w-1 shrink-0 rounded-full bg-white/25" aria-hidden />;
}

/**
 * Infinite logo scroller: one CSS keyframe translating a doubled track by
 * -50%, paused on hover. Edge fades are gradients into the section's own
 * background rather than a mask, so they still work if the background is
 * a solid colour rather than transparent.
 */
export function CompanyMarquee() {
  return (
    <>
      <style>{marqueeStyle}</style>
      <section className="relative overflow-hidden rounded-2xl border-y border-white/5 bg-[#0a0a0a] py-6">
        <p className="mb-5 text-center text-[10px] font-medium uppercase tracking-[0.2em] text-white/40">
          Founders from
        </p>

        <div className="relative">
          <div
            aria-hidden
            className="pointer-events-none absolute inset-y-0 left-0 z-10 w-24 sm:w-40"
            style={{ background: "linear-gradient(to right, #0a0a0a, transparent)" }}
          />
          <div
            aria-hidden
            className="pointer-events-none absolute inset-y-0 right-0 z-10 w-24 sm:w-40"
            style={{ background: "linear-gradient(to left, #0a0a0a, transparent)" }}
          />

          <div className="el-marquee-track flex w-max items-center">
            {track.map((name, i) => (
              <span key={i} className="inline-flex items-center">
                <span className="whitespace-nowrap text-[13px] font-medium text-white/60">{name}</span>
                <Dot />
              </span>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}