Ticker Tape Changelog
Horizontal snap-scroll changelog with giant ghost version numerals behind each card and colour-coded tags (Feature / Fix / Breaking / Perf). Built for software release notes, version histories, and product update streams.
Ticker Tape Changelog the 19th of 24 designs in the 24 CSS Timeline Layouts collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="tl19-wrap">
<div class="tl19-track">
<div class="tl19-item" data-v="v3.2">
<div class="tl19-ver">v3.2.0</div>
<div class="tl19-date">14 May 2026</div>
<div class="tl19-headline">Streaming response latency reduced by 40%</div>
<span class="tl19-tag tl19-tag-perf">Perf</span>
</div>
<div class="tl19-item" data-v="v3.1">
<div class="tl19-ver">v3.1.4</div>
<div class="tl19-date">02 May 2026</div>
<div class="tl19-headline">Fixed race condition in auth token refresh</div>
<span class="tl19-tag tl19-tag-fix">Fix</span>
</div>
<div class="tl19-item" data-v="v3.0">
<div class="tl19-ver">v3.0.0</div>
<div class="tl19-date">18 Apr 2026</div>
<div class="tl19-headline">New plugin architecture — breaking API changes</div>
<span class="tl19-tag tl19-tag-break">Breaking</span>
</div>
<div class="tl19-item" data-v="v2.9">
<div class="tl19-ver">v2.9.1</div>
<div class="tl19-date">01 Apr 2026</div>
<div class="tl19-headline">Dark mode system preference detection</div>
<span class="tl19-tag tl19-tag-feat">Feature</span>
</div>
<div class="tl19-item" data-v="v2.8">
<div class="tl19-ver">v2.8.0</div>
<div class="tl19-date">12 Mar 2026</div>
<div class="tl19-headline">Keyboard shortcut manager added</div>
<span class="tl19-tag tl19-tag-feat">Feature</span>
</div>
<div class="tl19-item" data-v="v2.7">
<div class="tl19-ver">v2.7.2</div>
<div class="tl19-date">28 Feb 2026</div>
<div class="tl19-headline">Memory leak in observer pattern patched</div>
<span class="tl19-tag tl19-tag-fix">Fix</span>
</div>
</div>
<div class="tl19-hint">← scroll →</div>
</div> .tl19-wrap {
background: #111;
border: 1px solid #222;
border-radius: 2px;
overflow: hidden;
padding: 2rem 0;
font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl19-track {
display: flex;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
padding: 0 2rem;
scroll-snap-type: x mandatory;
}
.tl19-track::-webkit-scrollbar { display: none; }
.tl19-item {
flex: 0 0 250px;
padding: 1.5rem 2rem 1.5rem 1.5rem;
border-right: 1px solid #2a2a2a;
margin-right: 1rem;
scroll-snap-align: start;
position: relative;
}
.tl19-item::before {
content: attr(data-v);
font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
font-size: 3.5rem;
color: #1e1e1e;
position: absolute;
right: 1.5rem;
bottom: 1rem;
line-height: 1;
pointer-events: none;
}
.tl19-ver {
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.65rem;
letter-spacing: 0.2em;
color: #c8ff00;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.tl19-date {
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.6rem;
color: #444;
margin-bottom: 0.8rem;
}
.tl19-headline {
font-family: 'Syne', 'Inter Tight', sans-serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 0.6rem;
color: #e8e5e0;
}
.tl19-tag {
display: inline-block;
padding: 0.2rem 0.5rem;
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.55rem;
letter-spacing: 0.1em;
border-radius: 2px;
text-transform: uppercase;
}
.tl19-tag-feat { background: #1a2e00; color: #c8ff00; }
.tl19-tag-fix { background: #2e0000; color: #ff6b6b; }
.tl19-tag-break { background: #2e1a00; color: #ffaa00; }
.tl19-tag-perf { background: #00182e; color: #00b4d8; }
.tl19-hint {
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.6rem;
color: #444;
text-align: right;
padding: 0.5rem 1.5rem 0;
letter-spacing: 0.1em;
}