Animated dots

The simple version

A few slats of dots that scatter and come back. The same structure with almost no styling: a good place to start your own.

How it’s built

Every dot here is a Dot on the chart’s scale, and moving a row means changing numbers, not moving elements. Each slat holds an overlap Plot of dots, all in one band, and each dot sits at its own index plus its row’s shift: at={d.shift + c.index + 0.5}. Add 2 to a row’s shift and its dots are two places further along the scale, which rhp animates like any other value.

• The chart is a window onto a longer row. The scale only covers 11 dots, and the slat’s CSS clips what falls outside (overflow-x: clip), so a row can hold 30 dots and shift left or right without ever leaving a gap.
• Motion is data, not animation code. A signal holds one shift per row; a timer changes it every few seconds and sets it back to zero the next time. Nothing tells a dot to move, because a dot is only ever drawn where its number says.
• Both of rhp’s animation modes drive it. The CSS version transitions each dot’s position, and the JS version counts the numbers themselves on one clock, which is why this example is also the test for both.