The split-flap display board (also called Solari boards) was a staple of airports and train terminals all over the world for several decades, roughly from the 1950s through 1990s. These mechanical displays worked like an automated Rolodex (another staple of the same time period). Every individual letter of the display had about 40 cards, arranged sequentially around an electrically controlled spindle. The backside of one card and the frontside of the next card contained a full printed character. When the display needed to show a certain character, it would quickly rotate the spindle to the correct position.

These displays were easy to read, sometimes noisy, and always fascinating to watch while waiting for your flight.

As an exploration of building HTML WebComponents, I decided to create a mockup of one of these displays. In my implementation, each individual letter is a separate instance of my custom <flip-letter /> component.

To create the flaps, I use two pairs of HTML elements, a "previous" and "next" pair, each with a top and bottom half. When flipping letters, I put the old and new characters on the various pairs, set their CSS transform rotations to prepare for a flip, and then simultaneously transition the rotations for the previous top and the next bottom. Together, this creates the illusion of the physical flap coming down to reveal the letter behind.