Pill Column Scroll

Overview

A vertical column of pills scrolls. As each pill crosses center it bumps to the accent color. The last pill settles.

Build

1. 01

   Column keyframe-scrolls.

2. 02

   Per-pill bump at precomputed crossing times.

3. 03

   Last pill settles (no bump-back).

.col { animation: pills-column-scroll }
.pill { animation: pill-bump; animation-delay: var(--cross) }