Every flap is four leaves sharing one hinge line down the middle. Two are static background halves: the new glyph's top (waiting to be revealed) and the old glyph's bottom (still showing). The other two move: the old top hinges away, the new bottom hinges in.

A single clip makes one glyph read as two halves. Each Half renders the glyph at full card height inside a half-height overflow-clip, one anchored to the top and one to the bottom, so the two leaves reconstruct one letter with no visible seam:

<div className="absolute top-0 h-1/2 overflow-hidden">
  {/* inner is 200% of the half = full card height, glyph centered */}
  <div className="absolute top-0 flex h-[200%] items-center justify-center">
    {char}
  </div>
</div>

Because the same Half is used for the static leaves and (with animation classes) the moving folds, every leaf always occupies exactly half the digit it sits in, and backface-visibility: hidden keeps a leaf from showing its reverse as it passes edge-on.

A single flip is two hinge moves that hand off at the seam. The fall leaf carries the old top and rotates 0 → −90° around origin-bottom, dropping out of sight. The rise leaf carries the new bottom and rotates 90 → 0° around origin-top, delayed by exactly one tick so it starts as the fall lands:

style={{ animationDelay: `${fallDelay + TICK}s` }}

The rise keyframe uses fill mode both, so during that delay it holds its start state (rotateX(90deg), edge-on and invisible), and the old bottom stays visible underneath until the moment the new bottom sweeps over it. Two eased rotateX curves of 0.12s each make the swap without a gap.

To spin through the alphabet, the digit steps one glyph at a time. Each landed flip commits settled = next and re-renders; while settled !== target it flips again, one glyph forward along the charset, keyed on the step so the keyframes remount and restart cleanly:

const next = flipping ? stepToward(settled, target, charset) : settled;
// …on the rise leaf:
onAnimationEnd={() => { steppedRef.current += 1; setSettled(next); }}

Snapping every column at once looks digital; a real Solari resolves left to right. Each column gets startDelay = index × stagger and applies it only to its first flip of a new target, so the board opens on a wave and then each column spins freely to its letter:

const firstOfRun = steppedRef.current === 0;
const fallDelay = firstOfRun ? startDelay : 0;

The board also starts blank. A useInView(ref, { once: true }) gates the whole display: until it scrolls into view every column holds a space, then they all retarget to the value and flip up from nothing. That gives the reveal the first time the board enters the viewport.

maxFlaps caps the spin. If a column's forward distance along the charset is longer than the cap, it fast-forwards the head of the run so no single flap ever spins more than maxFlaps ticks:

if (fwdDistance(settled, desired, charset) > maxFlaps) {
  setSettled(charAtOffset(desired, -maxFlaps, charset));
}

Four leaves, two eased rotateX curves that hand off at the seam, and a per-column delay make the board. It uses transforms only, with no canvas, and resolves on a wave whenever the value changes.