Vibeset

Flip board

A mechanical board tile is two fixed halves (the top shows the incoming letter, the bottom the outgoing one) and two flaps that turn: the top one falls until it is edge-on and the bottom one finishes dropping with the new letter. Four layers and two CSS animations per tile. Around it, three things to solve: each tile runs through the alphabet like a real board, but from A to Z is twenty-five flips so the run is trimmed to the last ones; tiles start staggered, because all at once looks like a flicker; and the final word is always in the DOM as text, with the tiles hidden, so a reader hears one word and not twenty letters a second. Since it changes by itself, it can be stopped with a button.

And the React Bits original: Split Flap Text

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Split Flap Text, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For a figure, a city or a status that changes, on a site with a travel, data or retro feel. One short word at a time.

Watch out for

Check what a screen reader announces while the tiles flip and keep the final text accessible in the HTML.

Accessibility

It cares a lot about reduced motion: nine references in the code, more than any of the ones we analyse here. It carries a single aria label.