News Headline Crawl
A copy-paste marquees & tickers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Marquees & TickersHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-mq2-news-crawl" aria-hidden="true">
<div class="nuda-mq2-news-crawl__track">
<div class="nuda-mq2-news-crawl__item">
<span class="nuda-mq2-news-crawl__flag">TECH</span>
<span class="nuda-mq2-news-crawl__headline">AI model doubles inference speed overnight</span>
</div>
<div class="nuda-mq2-news-crawl__item">
<span class="nuda-mq2-news-crawl__flag">SPORT</span>
<span class="nuda-mq2-news-crawl__headline">Underdog seals dramatic derby win</span>
</div>
<div class="nuda-mq2-news-crawl__item">
<span class="nuda-mq2-news-crawl__flag">WORLD</span>
<span class="nuda-mq2-news-crawl__headline">Summit ends with new trade pact</span>
</div>
<div class="nuda-mq2-news-crawl__item">
<span class="nuda-mq2-news-crawl__flag">BIZ</span>
<span class="nuda-mq2-news-crawl__headline">Startup raises $40M Series B</span>
</div>
<!-- Duplicate the items above for a seamless loop -->
<div class="nuda-mq2-news-crawl__item">
<span class="nuda-mq2-news-crawl__flag">TECH</span>
<span class="nuda-mq2-news-crawl__headline">AI model doubles inference speed overnight</span>
</div>
<div class="nuda-mq2-news-crawl__item">
<span class="nuda-mq2-news-crawl__flag">SPORT</span>
<span class="nuda-mq2-news-crawl__headline">Underdog seals dramatic derby win</span>
</div>
<div class="nuda-mq2-news-crawl__item">
<span class="nuda-mq2-news-crawl__flag">WORLD</span>
<span class="nuda-mq2-news-crawl__headline">Summit ends with new trade pact</span>
</div>
<div class="nuda-mq2-news-crawl__item">
<span class="nuda-mq2-news-crawl__flag">BIZ</span>
<span class="nuda-mq2-news-crawl__headline">Startup raises $40M Series B</span>
</div>
</div>
</div>CSS
.nuda-mq2-news-crawl {
overflow: hidden;
width: 100%;
max-width: 280px;
background: #0a0a0a;
border-top: 1px solid rgba(255,255,255,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
}
.nuda-mq2-news-crawl__track {
display: flex;
width: max-content;
align-items: center;
gap: 22px;
padding: 7px 10px;
animation: _nuda-mq2newscrawl 16s linear infinite;
}
.nuda-mq2-news-crawl__item {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
font-size: .62rem;
}
.nuda-mq2-news-crawl__flag {
display: inline-block;
padding: 1px 5px;
border-radius: 3px;
font-size: .52rem;
font-weight: 800;
letter-spacing: .04em;
color: #0a0a0a;
background: #e4ff54;
}
.nuda-mq2-news-crawl__item:nth-child(4n+2) .nuda-mq2-news-crawl__flag {
background: #7dd3fc;
}
.nuda-mq2-news-crawl__item:nth-child(4n+3) .nuda-mq2-news-crawl__flag {
background: #fca5a5;
}
.nuda-mq2-news-crawl__item:nth-child(4n+4) .nuda-mq2-news-crawl__flag {
background: #c4b5fd;
}
.nuda-mq2-news-crawl__headline {
color: #e5e5e5;
}
.nuda-mq2-news-crawl:hover .nuda-mq2-news-crawl__track {
animation-play-state: paused;
}
@keyframes _nuda-mq2newscrawl {
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-mq2-news-crawl__track {
animation: none;
}
}
How to use News Headline Crawl
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.