Marquee

import { Emoji } from "@/components/media";
import { Marquee } from "@/components/motion";

const formats = [
  "Meta ads",
  "TikTok ads",
  "YouTube ads",
  "Podcast clips",
  "UGC",
  "Motion graphics",
];

export default function MarqueeExample() {
  return (
    <Marquee duration={30} className="w-full">
      {formats.map((format) => (
        // Each item brings its own trailing space, so the loop stays seamless
        <span key={format} className="flex items-center gap-2 pr-10 text-title-5 text-label">
          <Emoji name="clapper-board" className="size-8" />
          {format}
        </span>
      ))}
    </Marquee>
  );
}