.ctc-marquee { display: inline-flex; align-items: center; width: 200px; padding: 9px 14px; background: #1f1f2e; color: #f0eeff; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; font: 600 12px/1 system-ui, sans-serif; text-decoration: none; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); }
.ctc-marquee-track { display: inline-flex; gap: 32px; white-space: nowrap; flex-shrink: 0; }
.ctc-marquee:hover .ctc-marquee-track, .ctc-marquee:focus-visible .ctc-marquee-track { animation: ctc-marquee-roll 7s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.ctc-slide:hover, .ctc-aurora,
.ctc-status-dot::after,
.ctc-marquee:hover .ctc-marquee-track, .ctc-marquee:focus-visible .ctc-marquee-track,
.ctc-life-chip[data-state="adding"], .ctc-life-chip[data-state="adding"] .ctc-life-icon { animation: none !important; }
.ctc-life-chip[data-state="adding"] { transform: none; opacity: 1; }
} <a href="#" class="ctc-marquee">
<span class="ctc-marquee-track">
<span>Senior Frontend Engineer @ TechCorp</span>
<span aria-hidden="true">Senior Frontend Engineer @ TechCorp</span>
</span>
</a> Live preview Edit any tab — preview updates live Ready