Split text
The headline that assembles itself one letter at a time is the oldest trick in motion design, and everywhere else it means cutting a sentence into spans with a script and hoping nothing re-renders underneath it. BmotionSplitText does the splitting in C#: each character, word or line becomes a real animated element in the render tree, so there is nothing to re-split, nothing to undo, and the text still wraps, selects and copies like the original.
Characters, words, lines
One parameter picks the unit. By="BmSplitBy.Chars" is the headline treatment;
Words keeps the count sane on longer copy; Lines splits on the
newlines you authored, which is what you want for a stanza or an address block. Every unit
gets the same Initial / Animate pair, offset by the stagger.
Where the cascade starts
The stagger is a Bm.Stagger like any other, so the same origins apply:
First runs left to right, Last right to left, and
Center opens outwards from the middle of the line. A custom
(index, total) function covers everything else - the last stage below reverses
every other character by hand.
On scroll, and under the pointer
Because every unit is a full Bmotion element, it takes the gesture parameters
too. WhileInView with Once gives the classic reveal-as-you-scroll
headline; WhileHover lands on the individual character the pointer is actually
over, which is a per-letter interaction you would otherwise have to wire up by hand.
It still reads as a sentence
Splitting text is the classic way to break it for everyone who is not looking at it: a
screen reader handed forty one-character spans spells the headline out. By default the
container carries the whole string as its aria-label and every unit is
aria-hidden, so assistive technology reads the sentence once. Whitespace is
rendered as whitespace rather than as units, and in Chars mode each word is
wrapped in an inline-block of its own - so the text wraps between words, never mid-word,
and selecting it copies the original string back.