unvibed.
Menu
Free UI audit
All motion techniques

Split-flap display.

Advance the press counter by one impression. Only the changed digit turns over its center hinge.

Edition 08

Resting states
Edition 08 → Edition 09
Reduced motion
The changed digit is replaced in place and the new edition number is announced once.

Implementation excerpt

.flapTop { transform-origin: bottom; }
@keyframes turnTop { to { transform: rotateX(-90deg); } }

Where Unvibed uses it

Selecting a demo changes the counter to the number of findings recorded for that screen. The evidence wall

Related design directions