Kodza
Browse · 108

Timeline

Dated steps along a rail that fills as you scroll: each dot fills when the ink reaches it, each step rises into place the first time it is seen, the last one reached stays marked.

View the code Ask your AI
Data display No dependencies timelinehistorystepsscroll Added Oct 2025
/anim/timeline-component/ Fullscreen

With your AI

Just ask.

Say it to your AI. It gets the exact code below, not its best guess, and knows where it goes.

Tell my company story with a Kodza Timeline.

Not plugged in yet?
claude mcp add -t http kodza https://kodza.dev/api/mcp
Also in Codex, Cursor and VS Code.
kodza-timeline-component.html 
<ol class="kodza-timeline">
  <li class="kodza-timeline__item">
    <time class="kodza-timeline__date" datetime="2006">2006</time>
    <div class="kodza-timeline__body">
      <h3 class="kodza-timeline__title">Write less, do more</h3>
      <p class="kodza-timeline__text">jQuery arrives. The dollar sign becomes the most typed character on the web, just ahead of the semicolon.</p>
      <span class="kodza-timeline__tag">Nostalgia</span>
    </div>
  </li>
  <li class="kodza-timeline__item">
    <time class="kodza-timeline__date" datetime="2013">2013</time>
    <div class="kodza-timeline__body">
      <h3 class="kodza-timeline__title">Everything is a component</h3>
      <p class="kodza-timeline__text">React ships. HTML moves into JavaScript, and nobody asks it whether it wanted to.</p>
      <span class="kodza-timeline__tag">Paradigm</span>
    </div>
  </li>
  <li class="kodza-timeline__item">
    <time class="kodza-timeline__date" datetime="2015">2015</time>
    <div class="kodza-timeline__body">
      <h3 class="kodza-timeline__title">Then webpack nation attacked</h3>
      <p class="kodza-timeline__text">Suddenly everything needs npm install. Config files grow longer than the code they build.</p>
      <span class="kodza-timeline__tag">Dark age</span>
    </div>
  </li>
  <li class="kodza-timeline__item">
    <time class="kodza-timeline__date" datetime="2020">2020</time>
    <div class="kodza-timeline__body">
      <h3 class="kodza-timeline__title">Fatigue sets in</h3>
      <p class="kodza-timeline__text">Too many frameworks, too much tooling, too little web. Something has to give.</p>
      <span class="kodza-timeline__tag">Burnout</span>
    </div>
  </li>
  <li class="kodza-timeline__item">
    <time class="kodza-timeline__date" datetime="2024">2024</time>
    <div class="kodza-timeline__body">
      <h3 class="kodza-timeline__title">The vanilla renaissance</h3>
      <p class="kodza-timeline__text">The platform catches up: :has(), container queries, view transitions. The build step looks nervous.</p>
      <span class="kodza-timeline__tag">Comeback</span>
    </div>
  </li>
  <li class="kodza-timeline__item">
    <time class="kodza-timeline__date" datetime="2026">2026</time>
    <div class="kodza-timeline__body">
      <h3 class="kodza-timeline__title">You are here</h3>
      <p class="kodza-timeline__text">Copy, paste, ship. No build step was harmed in the making of this timeline.</p>
      <span class="kodza-timeline__tag">Now</span>
    </div>
  </li>
</ol>

Checked

Checked before you paste.

Robots poked at it before you did. Every component goes through the same checks, and again each time it changes.

What ranLast run
Accessibilityaxe-core 4.10.2: the WCAG 2.1 A and AA rules, plus best practices. 0 issues
KeyboardThe Tab key gets there, and the focus ring shows when it does. Passed
Reduced motionTurn on reduced motion and what moved just appears. Nothing loops. Passed
Light and darkThe same checks on both themes, contrast included. Passed
WordPressPasted into Twenty Twenty-Five, Twenty Twenty-One, Astra, Blocksy, GeneratePress, Hello Elementor, Kadence and OceanWP. Nothing to flag. 8 / 8 themes
Robots checked this. A human with VoiceOver hasn't yet.

More like this

More in Data display

See all Data display Request a component