Bidirectional Marquee
A copy-paste marquees & tickers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Marquees & TickersHTMLCSSany framework
One · Two · Three · Four · Five · One · Two · Three · Four · Five ·
Alpha · Beta · Gamma · Delta · Epsilon · Alpha · Beta · Gamma · Delta · Epsilon ·
Copy into your project
HTML
<div class="nuda-bimq">
<div class="nuda-bimq__row">
<div class="nuda-bimq__track"><span>One · Two · </span><span>One · Two · </span></div>
</div>
<div class="nuda-bimq__row">
<div class="nuda-bimq__track nuda-bimq__track--rev"><span>Alpha · Beta · </span><span>Alpha · Beta · </span></div>
</div>
</div>CSS
.nuda-bimq {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
max-width: 280px;
overflow: hidden;
}
.nuda-bimq__row {
overflow: hidden;
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.06);
padding: 8px 0;
}
.nuda-bimq__track {
display: flex;
width: max-content;
animation: _bimqL 16s linear infinite;
color: #a0a0a8;
font-size: 11px;
font-weight: 600;
}
.nuda-bimq__track--rev {
animation: _bimqR 16s linear infinite;
}
@keyframes _bimqL {
to {
transform: translateX(-50%);
}
}
@keyframes _bimqR {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-bimq__track {
animation: none;
}
}
How to use Bidirectional Marquee
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.