RollButton

What separates this from a label that cross-fades over a recolouring background is that the colour travels with the word. There is one object with two faces and the pill is a window onto it, so mid-roll you get a band of the old fill still leaving at the bottom while the new one is already seated at the top — a reading that only holds because each face carries its own background rather than sharing one underneath. The roll always runs the same way, new face in from above and old face out below, instead of reversing with the direction of the toggle: a drum that span backwards on the return trip would undo the previous roll rather than continue it, and the control would read as an animation being played and rewound instead of as a thing with a far side. The button's own background tracks whichever face is arriving, which is what covers the sliver the spring's overshoot opens at the top edge — the alternative is a flash of page every time the roll rings. Width is a second spring rather than a fixed maximum, because the two labels are rarely the same length and a pill sized to the longer of them leaves the shorter one adrift in space it does not need; both labels are measured from hidden copies rather than from the live node, so the width starts moving on the same frame the label changes instead of a frame after it.