Design engineering: a split-flap display component

An animated split-flap display component, bringing back some nostalgic memories. This component is inspired by a similar component I made back in 2012, with many improvements. Instead of faking the physical spool like many implementations do, I decided to stay as close as possible to the physical split-flap displays: the flaps really do rotate along the drum (try checking the Rotate display option). Even tough there may be shortcomings to this approach, I took it as a chance to practice.

Fig. 1: a split-flap clock

A traditional split-flap clock, cycling through digits as time passes, a timeless design if you ask me. For this one I’m simply passing the digits and the : character, and there’s a helpful prop that allows to skip intermediary characters in order to only have digits where appropriate without defining a different character range

Fig. 2: An alphabetic split-flap display

A split-flap display that cycles through the alphabet and display rolling messages. For this one, we flip through the entire spool and trigger a new message after the current message is finished displaying.

Component props

This component accepts several props:

• value: the current value to display
• length: the total display length
• characters: the character range to use
• autoSkip: whether to skip the in-between characters when the new character isn’t the natural next character
• onFullyFlipped: a callback that will be called when the display is finished flipping through characters to display the current value

That’s a wrap

I wanted an a real split-flap display component with a rolling drum and implemented it with React, css, and JavaScript, the component accepts a range of characters and creates as many flaps as there are characters. While there might be performance implications, I favoured recreating the full barrel effect as an exercise. I hope you enjoyed the demos. Stay tuned.