Five authors start as overlapping avatars and open into a row of avatars with names. The loop is 2 seconds and the opening takes under a second.

Why this explore?

A byline is a small component that gets reused in many places, and its collapsed and open states are the same parts at two spacings. The hypothesis is that one gap and one width per author are enough to describe the whole move, so the component doesn't need a second layout. The board tests that with five authors of different name lengths.

How it works:

Each author is 24 pixels high, an avatar followed by a name. Two things change when the stack opens.

1. The gap between authors goes from minus 8 to 8, so the avatars overlap and then separate. Each author's width goes from the avatar alone to the avatar and name, all starting together and finishing a little apart. The whole opening takes under a second.
   
   

2. The names switch on with HOLD opacity, 50 ms apart. The gap and every width use `cubic-bezier(0, 0, 0, 1)`. The position of each author is the sum of the widths and gaps before it, so the figure samples it from the real tracks.