Preview block

List rows that expand into a large image preview

Five rows, each a thumbnail beside a title. Click one and it grows to 400px tall, the thumbnail becomes a 280px square, and the title moves above it. Only one opens at a time.

The image and the heading are not moved: they swap flex order, and Motion's layout animation interpolates the positions that fall out of that. Height, type, margins and radius ride one 0.42s curve so they land together.