HTML
<div class="tl14-scene">
<div class="tl14-rail-wrap" id="tl14-rail-wrap">
<div class="tl14-rail">
<div class="tl14-card tl14-c1">
<div class="tl14-node" aria-hidden="true"></div>
<div class="tl14-inner">
<p class="tl14-period">1980 — 1990</p>
<h3 class="tl14-title">The Mainframe Decade</h3>
<p class="tl14-desc">Computing power was centralized and access was controlled. The seeds of distributed thinking were being planted.</p>
<div class="tl14-bar"></div>
</div>
</div>
<div class="tl14-card tl14-c2">
<div class="tl14-node" aria-hidden="true"></div>
<div class="tl14-inner">
<p class="tl14-period">1990 — 2000</p>
<h3 class="tl14-title">The Internet Awakens</h3>
<p class="tl14-desc">HTML, browsers, and dial-up modems stitched the world together. A new kind of publishing was born.</p>
<div class="tl14-bar"></div>
</div>
</div>
<div class="tl14-card tl14-c3">
<div class="tl14-node" aria-hidden="true"></div>
<div class="tl14-inner">
<p class="tl14-period">2000 — 2010</p>
<h3 class="tl14-title">Social & Mobile</h3>
<p class="tl14-desc">Platforms, smartphones, and the always-on web reshaped every aspect of daily communication and commerce.</p>
<div class="tl14-bar"></div>
</div>
</div>
<div class="tl14-card tl14-c4">
<div class="tl14-node" aria-hidden="true"></div>
<div class="tl14-inner">
<p class="tl14-period">2010 — 2018</p>
<h3 class="tl14-title">Cloud Dominance</h3>
<p class="tl14-desc">Infrastructure became invisible. AWS, Azure, and GCP abstracted away hardware, enabling new kinds of scale.</p>
<div class="tl14-bar"></div>
</div>
</div>
<div class="tl14-card tl14-c5">
<div class="tl14-node" aria-hidden="true"></div>
<div class="tl14-inner">
<p class="tl14-period">2018 — 2023</p>
<h3 class="tl14-title">Machine Learning Era</h3>
<p class="tl14-desc">Transformers, foundation models, and generative AI moved from research papers to everyday products at breakneck speed.</p>
<div class="tl14-bar"></div>
</div>
</div>
<div class="tl14-card tl14-c6">
<div class="tl14-node" aria-hidden="true"></div>
<div class="tl14-inner">
<p class="tl14-period">2023 — Now</p>
<h3 class="tl14-title">Ambient Intelligence</h3>
<p class="tl14-desc">AI is embedded into every layer of the stack. The interface is dissolving into conversation, context, and intent.</p>
<div class="tl14-bar"></div>
</div>
</div>
</div>
</div>
<p class="tl14-hint">↔ DRAG TO SCROLL ↔</p>
</div> CSS
.tl14-scene {
--tl14-paper: #f7f4ef;
--tl14-ink: #0d0d0d;
--tl14-c1: #0d0d0d;
--tl14-c2: #c8423a;
--tl14-c3: #2b6cb0;
--tl14-c4: #d4a017;
--tl14-c5: #1a7a4a;
--tl14-c6: #7c3aed;
background: var(--tl14-paper);
padding: 2rem 0;
overflow: hidden;
font-family: 'Inter', system-ui, sans-serif;
}
.tl14-rail-wrap {
overflow-x: auto;
overflow-y: visible;
scrollbar-width: none;
padding: 1.5rem 2rem 2rem;
cursor: grab;
}
.tl14-rail-wrap::-webkit-scrollbar { display: none; }
.tl14-rail {
display: flex;
gap: 60px;
min-width: max-content;
align-items: flex-start;
position: relative;
}
.tl14-rail::before {
content: '';
position: absolute;
top: 28px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--tl14-ink) 5%,
var(--tl14-ink) 95%,
transparent
);
}
.tl14-card {
width: 220px;
flex-shrink: 0;
position: relative;
padding-top: 70px;
}
.tl14-node {
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--tl14-ink);
border: 3px solid var(--tl14-paper);
box-shadow: 0 0 0 2px var(--tl14-ink);
z-index: 2;
}
.tl14-c2 .tl14-node { background: var(--tl14-c2); box-shadow: 0 0 0 2px var(--tl14-c2); }
.tl14-c3 .tl14-node { background: var(--tl14-c3); box-shadow: 0 0 0 2px var(--tl14-c3); }
.tl14-c4 .tl14-node { background: var(--tl14-c4); box-shadow: 0 0 0 2px var(--tl14-c4); }
.tl14-c5 .tl14-node { background: var(--tl14-c5); box-shadow: 0 0 0 2px var(--tl14-c5); }
.tl14-c6 .tl14-node { background: var(--tl14-c6); box-shadow: 0 0 0 2px var(--tl14-c6); }
.tl14-inner {
background: #fff;
border: 1px solid rgba(13,13,13,0.1);
padding: 1.1rem 1.1rem 1.3rem;
border-radius: 4px;
box-shadow: 4px 4px 0 rgba(13,13,13,0.08);
transition: transform 0.2s, box-shadow 0.2s;
}
.tl14-inner:hover {
transform: translateY(-4px);
box-shadow: 4px 8px 0 rgba(13,13,13,0.12);
}
.tl14-period {
font-family: ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 1.5px;
color: rgba(13,13,13,0.4);
text-transform: uppercase;
margin: 0 0 0.5rem;
}
.tl14-title {
font-family: Georgia, 'Times New Roman', serif;
font-size: 15px;
font-weight: 700;
color: var(--tl14-ink);
margin: 0 0 0.5rem;
line-height: 1.25;
}
.tl14-desc {
font-size: 12.5px;
color: rgba(13,13,13,0.5);
line-height: 1.55;
margin: 0;
}
.tl14-bar {
height: 3px;
border-radius: 2px;
margin-top: 0.9rem;
background: var(--tl14-ink);
}
.tl14-c2 .tl14-bar { background: var(--tl14-c2); }
.tl14-c3 .tl14-bar { background: var(--tl14-c3); }
.tl14-c4 .tl14-bar { background: var(--tl14-c4); }
.tl14-c5 .tl14-bar { background: var(--tl14-c5); }
.tl14-c6 .tl14-bar { background: var(--tl14-c6); }
.tl14-hint {
margin: 1rem 0 0;
text-align: center;
font-family: ui-monospace, monospace;
font-size: 10px;
color: rgba(13,13,13,0.35);
letter-spacing: 2px;
} JS
// Drag-to-scroll the horizontal ribbon. Same pattern as the
// filmstrip demo; IIFE keeps state and listeners scoped per page.
(function() {
const rail = document.getElementById('tl14-rail-wrap');
if (!rail) return;
let down = false, sx = 0, sl = 0;
rail.addEventListener('mousedown', e => {
down = true;
sx = e.pageX - rail.offsetLeft;
sl = rail.scrollLeft;
rail.style.cursor = 'grabbing';
rail.style.userSelect = 'none';
});
document.addEventListener('mouseup', () => { down = false; rail.style.cursor = 'grab'; });
rail.addEventListener('mousemove', e => {
if (!down) return;
e.preventDefault();
rail.scrollLeft = sl - (e.pageX - rail.offsetLeft - sx) * 1.2;
});
let tx = 0;
rail.addEventListener('touchstart', e => { tx = e.touches[0].pageX; sl = rail.scrollLeft; }, { passive: true });
rail.addEventListener('touchmove', e => { rail.scrollLeft = sl - (e.touches[0].pageX - tx); }, { passive: true });
})();