Since my visit to Inhotim, I have been fascinated by split-flap displays. There's something captivating about their mechanical charm. I've always dreamed of building a real one, but life kept getting in the way.

This week, I decided to take the leap—well, digitally. I built a digital split-flap display.

How It Works

I started with v0, a great tool that gave me a solid foundation:

However, the initial version had a few limitations: the sound played only once, and the animation wasn't quite what I envisioned. Determined to improve it, I downloaded the code and started tweaking.

Adding Sound

After some research, I stumbled upon a free-licensed split-flap sound effect. It was perfect, but the raw file was seven seconds long, so I trimmed it and added it to the project. Here's the final sound:

Enhancing the Animation

Next, I dove into the animations. Admittedly, I had never worked with 3D CSS animations before, so it was a fun (and slightly daunting) challenge. After plenty of experimentation, I came up with the following CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@keyframes flip {
  0% {
    transform: rotateX(0deg) translateY(0);
  }
  100% {
    transform: rotateX(-180deg) translateY(-100%);
  }
}

.animate-flip {
  transition: transform 500ms;
  transform-style: preserve-3d;
  animation: flip 500ms 1;
}

.-transform-rotate-180 {
  transform: rotateX(-180deg);
}

This animation added the smooth, flipping effect I was after.

Want to Build Your Own?

If you'd like to see how it all works or make your own version, you can find the source code here.

It was very fun building this <3