Infinite Ticker

import styles from "./styles.module.css";

export default function InfiniteTicker({ items = [], speed = 30 }) {
  // Duplicate items to ensure seamless loop
  const doubled = [...items, ...items];

  return (
    <div className={styles.wrapper}>
      <div
        className={styles.track}
        style={{ "--ticker-duration": `${speed}s` }}
      >
        {doubled.map((item, i) => (
          <span key={i} className={styles.item}>
            <span className={styles.text}>{item}</span>
            <span className={styles.dot} aria-hidden="true">·</span>
          </span>
        ))}
      </div>
    </div>
  );
}