TextScroll text

---
interface Props {
  items: string[];
  speed?: number;
}
const { items = ["Google Ads", "Meta Ads", "SEO", "Content Marketing", "E-mail Flows", "CRO", "Analytics", "Social Media", "LinkedIn Ads", "Webdesign"], speed = 30 } = Astro.props;

const track = [...items, ...items];
---

<div class="tx-scroll" aria-hidden="true">
  <div class="tx-scroll__track" style={`animation-duration: ${speed}s`}>
    {track.map(item => (
      <span class="tx-scroll__item">{item}</span>
    ))}
  </div>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-scroll {
    overflow: hidden;
    white-space: nowrap;
    padding: 0.75rem 0;
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
  }
  .tx-scroll__track {
    display: inline-flex;
    gap: 2rem;
    animation: tx-scroll-move linear infinite;
  }
  .tx-scroll:hover .tx-scroll__track { animation-play-state: paused; }
  @keyframes tx-scroll-move {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  .tx-scroll__item {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
  }
  .tx-scroll__item::after {
    content: '·';
    margin-left: 2rem;
    color: var(--color-accent);
  }
</style>