Flow

Flow: the words around the value

A <scritto-text> animates its own box, and whatever follows it on the line moves when the browser reflows, in a single frame. Wrap the line in <scritto-flow> and those neighbouring words move on the same clock as the roll. The cost is one snapshot: the flow lists the words once, at connect.

<scritto-flow>
  You have <scritto-text id="n"></scritto-text> unread messages.
</scritto-flow>

Words become elements

The flow walks its text nodes and wraps every run of non-whitespace in an inline-block span. Those spans are what it animates; the whitespace stays text, so the line still breaks normally.

A lone token counts. The full stop after a value is its own word, and left as bare text it jumps to its new place in a single frame while every word around it slides. On the homepage counter that is a 7px jump.

That list is captured once, at connect. Anything that replaces a word's element later, by writing textContent over a container for instance, leaves the flow animating a node that is no longer on the page. Write into the word, not over it.

Two reads, one clock

The flow measures every visible word before the change and again after, in flow-relative coordinates, not viewport ones. The two reads straddle a layout change, and a scroll in between would look like every word on the page changing line at once.

Only the visible slice is measured. A long article with a counter in the third paragraph does not pay for the words below the fold.

Sliding: a word that keeps its line

The simple case. Measure the two positions and animate the difference.

Handoff: a word that changes line

Flying a word diagonally from the end of one line to the start of the next drags the reader's eye through unrelated text. Instead it is handed off between two ghosts, copies of the word drawn where layout no longer puts it: one on the line it left, one on the line it joined. Both are dissolved by a mask on the flow's edges, so the word reads as going around the corner rather than across the paragraph.

A ghost travels with the line it joins or leaves, at the distance the words keeping that line are sliding. Held at a fixed offset instead, it sits still while its line moves under it and lands on a standing word, which is what makes a roll read as two paragraphs over each other. On a phone-width card that cost 9 to 11 words drawn on top of one another per roll; travelling with the line it costs none.

The pair is a relay, not a dissolve. The leaving copy is gone by halfway and the arriving one starts after it, so a word is never two solid copies at once.

A value that re-breaks the whole paragraph is handed off like any other. Half the words changing line used to be unreadable, and the fix was to re-break in one frame with no animation at all. That was the fixed offset above, not the count: with every ghost travelling with its line, the same change measures zero words drawn on top of each other at phone and desktop width, so the rule is gone and the words always slide.

Gutters: where the edge mask lives

The edge mask lives in the gutters past the text, not on the content box. One rem of fade is exactly a 16px stage padding; more than that and the card clips it.

It is on every flow from the constructor, so nothing needs turning on; the trap is the container. Less than 16px of room with overflow hidden cuts the fade off partway and leaves the hard edge the mask exists to avoid, which reads as the mask being missing when it is there in full.

Ghosts and interruption

A word mid-handoff is visibility: hidden at its destination while two ghosts draw it elsewhere. That gap between where a word's box is and where the reader sees it is real, measured at 30–34px, and an interruption that re-measures the box restarts the slide from a place nothing was drawn.

This is a known limitation. The transition settles correctly and leaves nothing behind. Interrupting a wrap looks wrong for a few frames.