Design Atlas
한국어
↝ Motion

Split-flap display

스플릿 플랩

The flick-flick-flick of an airport or train-station departure board, each character cell flapping through letters until it lands on the target — with columns settling at slightly staggered moments.

Also known as: Departure boardFlip boardSolari board
···
html
<div class="board" id="board"></div>
css
.board{display:flex;gap:4px}
.cell{position:relative;width:clamp(20px,7vmin,36px);height:clamp(28px,9.5vmin,50px);border-radius:4px;overflow:hidden;
  background:#1c1c22;display:grid;place-items:center;color:#eee;
  font:700 clamp(15px,5.6vmin,26px)/1 ui-monospace,monospace;transition:transform .07s linear}
.cell::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#000;opacity:.55}
js
const board = document.getElementById('board');
const WORDS = ['DESIGN', 'ATLAS-'];
const LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ-';
const cells = [...WORDS[0]].map((ch, i) => {
  const c = document.createElement('div');
  c.className = 'cell';
  c.textContent = ch;
  board.appendChild(c);
  return c;
});

function flap(el, target, delay) {
  setTimeout(() => {
    let steps = 3 + Math.floor(Math.random() * 3);
    let i = 0;
    function tick() {
      const isFinal = i >= steps;
      el.style.transform = 'rotateX(-90deg)';
      setTimeout(() => {
        el.textContent = isFinal ? target : LETTERS[Math.floor(Math.random() * LETTERS.length)];
        el.style.transform = 'rotateX(0deg)';
        i++;
        if (!isFinal) setTimeout(tick, 65);
      }, 65);
    }
    tick();
  }, delay);
}

let wi = 1;
function run() {
  const word = WORDS[wi % WORDS.length];
  cells.forEach((c, i) => flap(c, word[i], i * 110));
  wi++;
}
setInterval(run, 2600);

A real split-flap board wraps a stack of physical half-cards, hinged in the middle, around a drum, and flips one down at a time to reveal the next character. On screen, you fake this by having each cell cycle rapidly through a handful of characters before stopping on the target — insert a few random intermediate letters between the current one and the target, and give each step a brief flip-like transition (a short rotateX, or an up/down slide).

What sells the real board's feel is that cells don't all stop at once — either they settle left to right in sequence, or entirely at random, giving the sense that "it's still computing." A start delay proportional to column index reads as a sweep settling left-to-right; fully randomized delays give the busier, more mechanical feel of the real thing.

There's no physical constraint forcing this on a screen — it's used purely for the trust and nostalgia of "information is being refreshed." Flapping every cell from scratch on every value change is usually too much; flap only the cells that actually changed and leave the rest still.

When to use

Use it for live-updating numbers or statuses — dashboards, leaderboards — where you want the change itself to feel trustworthy. For values that update often, don't replay the full animation every time; flap only the cells that changed.