10 CSS Feature Sections 10 / 10

CSS Feature Section Timeline Layout

Midnight `#060612` background with a vertical timeline: an animated traveling-glow line, five staggered IntersectionObserver-reveal phase cards with status badges (Live/Active/New/Beta/Coming), JetBrains Mono labels, and per-phase accent colours.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="fs10">
  <div class="fs10__inner">
    <div class="fs10__header">
      <div class="fs10__pre">platform_roadmap.json</div>
      <h2 class="fs10__h2">Built in layers.<br><span>Shipped with purpose.</span></h2>
      <p class="fs10__sub">Each capability unlocks the next. Here's how the platform was architected — and what it enables at every stage.</p>
    </div>

    <div class="fs10__timeline">
      <div class="fs10__line-glow"></div>

      <div class="fs10__item">
        <div class="fs10__node"><div class="fs10__node-dot"></div></div>
        <div class="fs10__card">
          <div>
            <div class="fs10__card-meta">
              <span class="fs10__card-phase">PHASE_01</span>
              <span class="fs10__card-status fs10__status--live">Live</span>
            </div>
            <div class="fs10__card-title">Core Event Ingestion</div>
            <div class="fs10__card-body">A durable, ordered event log that accepts data from any language via SDK or HTTP. The foundation everything else builds on — never lossy, never slow.</div>
            <div class="fs10__card-tags">
              <span class="fs10__tag">kafka-compatible</span>
              <span class="fs10__tag">at-least-once</span>
              <span class="fs10__tag">idempotent</span>
            </div>
          </div>
          <div class="fs10__card-right">
            <div class="fs10__metric-big">1B+</div>
            <div class="fs10__metric-lbl">events / day</div>
          </div>
        </div>
      </div>

      <div class="fs10__item">
        <div class="fs10__node"><div class="fs10__node-dot"></div></div>
        <div class="fs10__card">
          <div>
            <div class="fs10__card-meta">
              <span class="fs10__card-phase">PHASE_02</span>
              <span class="fs10__card-status fs10__status--active">Active</span>
            </div>
            <div class="fs10__card-title">Stream Processing Engine</div>
            <div class="fs10__card-body">Stateful transformations, windowed aggregations, and joins run at the edge — milliseconds after events arrive, not hours later in a batch job.</div>
            <div class="fs10__card-tags">
              <span class="fs10__tag">sub-50ms</span>
              <span class="fs10__tag">exactly-once</span>
              <span class="fs10__tag">autoscaling</span>
            </div>
          </div>
          <div class="fs10__card-right">
            <div class="fs10__metric-big">48ms</div>
            <div class="fs10__metric-lbl">p99 latency</div>
          </div>
        </div>
      </div>

      <div class="fs10__item">
        <div class="fs10__node"><div class="fs10__node-dot"></div></div>
        <div class="fs10__card">
          <div>
            <div class="fs10__card-meta">
              <span class="fs10__card-phase">PHASE_03</span>
              <span class="fs10__card-status fs10__status--new">New</span>
            </div>
            <div class="fs10__card-title">Semantic Layer + Query API</div>
            <div class="fs10__card-body">Define your metrics once, query them everywhere. Consistent definitions across dashboards, alerts, and embedded analytics — no more metric drift across teams.</div>
            <div class="fs10__card-tags">
              <span class="fs10__tag">metric-store</span>
              <span class="fs10__tag">rest + graphql</span>
              <span class="fs10__tag">cache-first</span>
            </div>
          </div>
          <div class="fs10__card-right">
            <div class="fs10__metric-big">1 def</div>
            <div class="fs10__metric-lbl">metric source</div>
          </div>
        </div>
      </div>

      <div class="fs10__item">
        <div class="fs10__node"><div class="fs10__node-dot"></div></div>
        <div class="fs10__card">
          <div>
            <div class="fs10__card-meta">
              <span class="fs10__card-phase">PHASE_04</span>
              <span class="fs10__card-status fs10__status--beta">Beta</span>
            </div>
            <div class="fs10__card-title">AI Anomaly Detection</div>
            <div class="fs10__card-body">Unsupervised models trained on your specific traffic fingerprint. Flags statistical outliers and surfaces likely root causes before your on-call engineer wakes up.</div>
            <div class="fs10__card-tags">
              <span class="fs10__tag">zero-config</span>
              <span class="fs10__tag">adaptive baseline</span>
              <span class="fs10__tag">explainable</span>
            </div>
          </div>
          <div class="fs10__card-right">
            <div class="fs10__metric-big">94%</div>
            <div class="fs10__metric-lbl">detection rate</div>
          </div>
        </div>
      </div>

      <div class="fs10__item">
        <div class="fs10__node"><div class="fs10__node-dot"></div></div>
        <div class="fs10__card">
          <div>
            <div class="fs10__card-meta">
              <span class="fs10__card-phase">PHASE_05</span>
              <span class="fs10__card-status fs10__status--soon">Coming Q3</span>
            </div>
            <div class="fs10__card-title">Automated Remediation</div>
            <div class="fs10__card-body">Close the loop between detection and resolution. Pre-approved runbooks execute automatically when a known issue is detected — human approval for anything novel.</div>
            <div class="fs10__card-tags">
              <span class="fs10__tag">runbook-driven</span>
              <span class="fs10__tag">approval gates</span>
              <span class="fs10__tag">full audit trail</span>
            </div>
          </div>
          <div class="fs10__card-right">
            <div class="fs10__metric-big">0</div>
            <div class="fs10__metric-lbl">manual pages</div>
          </div>
        </div>
      </div>
    </div>

    <div class="fs10__cta-wrap">
      <p>All five stages included in every plan. No roadmap upsells.</p>
      <a href="#" class="fs10__btn">Explore the full platform →</a>
    </div>
  </div>
</section>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.fs10 {
  font-family: 'Sora', sans-serif;
  background: #060612;
  color: #e8e6f4;
  padding: 100px 24px;
  min-height: 100vh;
  overflow: hidden;
}

.fs10__inner { max-width: 900px; margin: 0 auto; }

.fs10__header { text-align: center; margin-bottom: 80px; }

.fs10__pre {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #64ffda;
  border: 1px solid rgba(100,255,218,0.2);
  background: rgba(100,255,218,0.05);
  padding: 5px 12px;
  border-radius: 6px;
  margin-bottom: 24px;
}

.fs10__h2 {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 18px;
}

.fs10__h2 span {
  background: linear-gradient(135deg, #64ffda, #00b4d8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fs10__sub {
  font-size: 17px;
  color: rgba(232,230,244,0.45);
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Timeline */
.fs10__timeline {
  position: relative;
  padding-left: 60px;
}

/* Vertical line */
.fs10__timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(100,255,218,0.3) 10%, rgba(100,255,218,0.3) 90%, transparent);
}

/* Moving glow on the line */
.fs10__line-glow {
  position: absolute;
  left: 16px; top: 0;
  width: 9px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #64ffda, transparent);
  border-radius: 100px;
  animation: fs10-travel 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fs10-travel {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: calc(100% - 80px); opacity: 0; }
}

.fs10__item {
  position: relative;
  padding: 0 0 56px 0;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1);
}

.fs10__item.fs10--visible {
  opacity: 1;
  transform: none;
}

.fs10__item:last-child { padding-bottom: 0; }

/* Timeline node */
.fs10__node {
  position: absolute;
  left: -49px;
  top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(100,255,218,0.3);
  background: #060612;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.fs10__item:hover .fs10__node {
  border-color: #64ffda;
  box-shadow: 0 0 12px rgba(100,255,218,0.4);
}

.fs10__node-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(100,255,218,0.4);
  transition: background 0.3s;
}

.fs10__item:hover .fs10__node-dot { background: #64ffda; }

/* Card */
.fs10__card {
  background: #0d0d20;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  transition: border-color 0.3s, background 0.3s;
  position: relative;
  overflow: hidden;
}

.fs10__card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 18px 0 0 18px;
  opacity: 0;
  transition: opacity 0.3s;
}

.fs10__item:nth-child(1) .fs10__card::before { background: #64ffda; }
.fs10__item:nth-child(2) .fs10__card::before { background: #00b4d8; }
.fs10__item:nth-child(3) .fs10__card::before { background: #a78bfa; }
.fs10__item:nth-child(4) .fs10__card::before { background: #fb923c; }
.fs10__item:nth-child(5) .fs10__card::before { background: #34d399; }

.fs10__item:hover .fs10__card {
  border-color: rgba(255,255,255,0.14);
  background: #10102a;
}

.fs10__item:hover .fs10__card::before { opacity: 1; }

.fs10__card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.fs10__card-phase {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(232,230,244,0.35);
  letter-spacing: 0.08em;
}

.fs10__card-status {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
}

.fs10__status--live { background: rgba(100,255,218,0.1); color: #64ffda; }
.fs10__status--active { background: rgba(0,180,216,0.1); color: #00b4d8; }
.fs10__status--new { background: rgba(167,139,250,0.1); color: #a78bfa; }
.fs10__status--beta { background: rgba(251,146,60,0.1); color: #fb923c; }
.fs10__status--soon { background: rgba(52,211,153,0.1); color: #34d399; }

.fs10__card-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 10px;
}

.fs10__card-body {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(232,230,244,0.5);
  margin-bottom: 18px;
}

.fs10__card-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}

.fs10__tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  color: rgba(232,230,244,0.45);
}

/* Right column: metric */
.fs10__card-right { text-align: right; }

.fs10__metric-big {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.fs10__item:nth-child(1) .fs10__metric-big { color: #64ffda; }
.fs10__item:nth-child(2) .fs10__metric-big { color: #00b4d8; }
.fs10__item:nth-child(3) .fs10__metric-big { color: #a78bfa; }
.fs10__item:nth-child(4) .fs10__metric-big { color: #fb923c; }
.fs10__item:nth-child(5) .fs10__metric-big { color: #34d399; }

.fs10__metric-lbl {
  font-size: 11px;
  color: rgba(232,230,244,0.3);
  white-space: nowrap;
}

/* CTA */
.fs10__cta-wrap {
  text-align: center;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.fs10__cta-wrap p {
  font-size: 16px;
  color: rgba(232,230,244,0.45);
  margin-bottom: 20px;
}

.fs10__btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(100,255,218,0.1);
  border: 1px solid rgba(100,255,218,0.3);
  color: #64ffda;
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
}

.fs10__btn:hover {
  background: rgba(100,255,218,0.18);
  box-shadow: 0 0 24px rgba(100,255,218,0.2);
}

@media (max-width: 600px) {
  .fs10__timeline { padding-left: 40px; }
  .fs10__node { left: -32px; }
  .fs10__card { grid-template-columns: 1fr; }
  .fs10__card-right { text-align: left; display: flex; gap: 12px; align-items: baseline; }
}

@media (prefers-reduced-motion: reduce) {
  .fs10__line-glow { animation: none; }
  .fs10__item { opacity: 1; transform: none; transition: none; }
  .fs10__card, .fs10__node, .fs10__card::before { transition: none; }
}
const observer = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('fs10--visible');
      observer.unobserve(e.target);
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.fs10__item').forEach((el, i) => {
  el.style.transitionDelay = `${i * 0.12}s`;
  observer.observe(el);
});

More from 10 CSS Feature Sections

CSS Animated Feature Cards Scroll RevealCSS Feature Section 3D Perspective CardsCSS Feature Section with Icon GridCSS Bento Grid Features LayoutCSS Feature Section Dark GlassmorphismCSS Feature Section with Code PreviewCSS Feature Comparison SectionCSS SaaS Features Section 2025CSS Feature Section with Floating Mockup
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →