Step-Scrolling Changelog Ticker
A copy-paste marquees & tickers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Marquees & TickersHTMLCSSany framework
v2.4Dark mode enabled
v2.3Faster global search
v2.2Squashed memory leak
v2.1Public API v2 released
v2.4Dark mode enabled
v2.3Faster global search
v2.2Squashed memory leak
v2.1Public API v2 released
Copy into your project
HTML
<div class="nuda-mq2-step-ticker" aria-live="polite">
<div class="nuda-mq2-step-ticker__track">
<div class="nuda-mq2-step-ticker__item"><span class="nuda-mq2-step-ticker__version">v2.4</span>Dark mode enabled</div>
<div class="nuda-mq2-step-ticker__item"><span class="nuda-mq2-step-ticker__version">v2.3</span>Faster global search</div>
<div class="nuda-mq2-step-ticker__item"><span class="nuda-mq2-step-ticker__version">v2.2</span>Squashed memory leak</div>
<div class="nuda-mq2-step-ticker__item"><span class="nuda-mq2-step-ticker__version">v2.1</span>Public API v2 released</div>
<!-- Duplicate the items above for a seamless loop -->
<div class="nuda-mq2-step-ticker__item"><span class="nuda-mq2-step-ticker__version">v2.4</span>Dark mode enabled</div>
<div class="nuda-mq2-step-ticker__item"><span class="nuda-mq2-step-ticker__version">v2.3</span>Faster global search</div>
<div class="nuda-mq2-step-ticker__item"><span class="nuda-mq2-step-ticker__version">v2.2</span>Squashed memory leak</div>
<div class="nuda-mq2-step-ticker__item"><span class="nuda-mq2-step-ticker__version">v2.1</span>Public API v2 released</div>
</div>
</div>CSS
.nuda-mq2-step-ticker {
overflow: hidden;
height: 28px;
width: 100%;
max-width: 280px;
background: #111113;
border: 1px solid rgba(255,255,255,.08);
border-radius: 8px;
padding: 0 10px;
}
.nuda-mq2-step-ticker__track {
display: flex;
flex-direction: column;
animation: _nuda-mq2stepticker 8s steps(1) infinite;
}
.nuda-mq2-step-ticker__item {
height: 28px;
display: flex;
align-items: center;
font-size: .62rem;
color: #cfcfcf;
white-space: nowrap;
}
.nuda-mq2-step-ticker__version {
color: #e4ff54;
font-weight: 800;
margin-right: 6px;
}
@keyframes _nuda-mq2stepticker {
0%,20% {
transform: translateY(0);
}
25%,45% {
transform: translateY(-12.5%);
}
50%,70% {
transform: translateY(-25%);
}
75%,95% {
transform: translateY(-37.5%);
}
100% {
transform: translateY(-50%);
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-mq2-step-ticker__track {
animation: none;
}
}
How to use Step-Scrolling Changelog Ticker
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.