SplitFlapText

Options

strip ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,:-

The leaves, in the order they are stacked. Position 0 is what a cell shows at rest, and a blank there is why a board starts empty. The order is the mechanism: a cell has to pass through every leaf between where it is and where it is going, so putting the digits after the letters is what makes a time take longer to land than a word.

flap 52

10 to 300 ms, good: 35 to 80

Milliseconds for one leaf to fall. This multiplies: a cell showing Z has to drop twenty six leaves to get there, so 52ms is already more than a second of travel for the back half of the alphabet. That is what a board does, and it is why they are satisfying.

stagger 110

0 to 500 ms

Milliseconds between one cell starting and the next. At 0 the whole board starts together, which is what a board does when the schedule changes, and the letters still land in alphabetical order because the strip decides that, not this.

hold 240

0 to 3000 ms

Milliseconds before the first cell starts. A board sits blank for a moment before it runs, and that moment is what tells you it is a board rather than a label that happens to be animating.

face #26261f

css colour

The face of a leaf. Dark, because that is what they are: these are painted metal or plastic tiles, and a pale one reads as a card being turned rather than a flap falling.

ink #f7f5ed

css colour

The type printed on the leaf. Off white rather than white, which is both what the real thing looks like after a few years and what keeps it from glaring out of a paper page.

seam 0.45

0 to 1

How dark the line across the middle of a cell is. It is drawn as a line rather than a gap, because on a board it is two leaves meeting and not a space between them. At 0 the cell reads as one tile and the mechanism disappears.

depth 180

0 to 1200 px, good: 120 to 400

Perspective applied to the fall. At 0 it is a flat fold, which looks like a sheet of paper creasing; low numbers are a strong perspective and read as a leaf that has thickness. Too low and the leaf swings past the front of the cell.

shade 0.55

0 to 1

How much a falling leaf darkens as it turns away from the light. At 0 the two leaves are flat shapes sliding over each other and the cell reads as a wipe rather than as something hinged.

reducedMotionTime 999

0 to 9999 s

The single frame shown when the user prefers reduced motion. For a one-shot reveal this should be a time after the board has finished, so the text simply appears, set in its cells and still.

What it needs

Category

Type, an effect

Dependencies

None at all

Browser

No WebGL

Frame budget

~0.8 ms · 0 context

Pinned to

v0.13.0

• No canvas and no WebGL. Each character becomes four layers: the top half of the glyph arriving and the bottom half of the one leaving, both still, and two leaves over them that fall and rise
• The leaves go through the strip in order. A cell cannot jump from A to R, it has to pass through everything between, which is why a real board lands its letters in the order the alphabet puts them rather than left to right. Nothing about that was designed: it falls out of modelling the strip, and it is the most recognisable thing about the object
• A character that is not on the strip stops at position 0, the blank. A board cannot show what it does not carry, and inventing a leaf for it would be the one dishonest thing in here
• Every cell is the width of the widest glyph on the strip, measured once in the real face. The flaps on a board are all the same size because they are the same part, and a board whose cells breathe is not a board
• A falling leaf darkens as it turns away from the light. It is the only shading in the effect and it is doing a lot: without it the two leaves are flat shapes sliding over each other and the cell reads as a wipe
• Pure in t. Which leaf a cell is on and how far through its fall are both arithmetic on the clock, so the recorder can seek it and a dropped frame costs nothing
• The original string stays in the accessibility tree as one label. A board read leaf by leaf is a stream of nonsense
• destroy() puts the original text back, leaving the element as it was found
• Four layers of DOM per character, two of them transformed every frame. That is the cost of building the mechanism rather than suggesting it, and it is the reason this is for a board and not for a paragraph: keep it under about forty characters
• Both moving leaves are composited transforms and a filter. The text of a leaf is only written when it changes, which is once per flap rather than once per frame