/* 6ix Mela — rotating tape band + spectrum marquee */
function Tape({ words, variant }) {
  const run = words.concat(words, words);
  return (
    <div className="tape-wrap">
      <div className={'tape' + (variant === 'cyan' ? ' cyan' : '')}>
        <div className="tape-track">
          {run.map((w, i) => <span key={i}>{w}</span>)}
        </div>
      </div>
    </div>
  );
}

function Marquee({ words }) {
  const run = words.concat(words);
  return (
    <div className="marquee">
      <div className="marquee-track">
        {run.map((n, i) => <span key={i}>{n}</span>)}
      </div>
    </div>
  );
}
window.Tape = Tape;
window.Marquee = Marquee;