Split Flap

We live in the 21^st century folks and we no longer have signs that work like this:

This board, while obviously inferior to a digital display in many ways, has a certain appeal to it. Instead of projecting pixelated LED light into your retinas, it’s actually moving and reflecting natural light. There’s something to the infinite resolution on this thing.

As an ode to the train stations of my childhood, I bring you a skeuomorph split-flap web component:

The <hotfx-split-flap> custom element animates the text inside of it. To use it, first add this script to your page:

Then just wrap your message in the custom element, like so:

<hotfx-split-flap>Your message here</hotfx-split-flap>

That’s all it takes and the transition will start as soon as your readers scroll the component into the viewport.

Set Some Attributes

The custom element accepts a few attributes to control the output:

• width is the number of characters shown in one line.
• height is the number of lines shown.
• speed is the duration of the transition from one letter to another with a default of 150 milliseconds.

Here’s a playground for you to build your own split flap board.

If you don’t specify height and width for your board, the element will take the height and width of the first message inside of it. If you later change out the message, it will be truncated to fit. The first demo gets around this by creating a new element when the text doesn’t fit.

Internationalization

There’s another attribute named characters which lets you control the alphabet of characters shown on the flaps. Here’s one in Russian, showing the titles of some of Tolstoy’s novels.

You can see that I’ve changed some of the colors on this board using the ::part(flap) selector. Also, I’m swapping out the message on the board every few seconds using a simple callback scheduled with setInterval.

Rolling Forward

There’s not much of a roadmap for this component, but I would love to see whole words shown on one flap just like the destinations on the train station board at the top of the post.

Can you think of other improvements? Of course, if you find bugs or have feature requests, please file a new issue on GitHub.