Put Text stroke inside the heading or paragraph whose text it draws and keep typography on that element; the pieces and their outlines inherit it. Each piece draws its outline in the text color, then the text fills in over the second half of the reveal and the outline fades. The outlines are the browser’s own strokes of the font, laid exactly over the text, so nothing around the text moves. A standalone text reveals the first time it enters the viewport.
Inside a Scroll trigger that coordinator owns the timing.
Links and inline formatting keep working, the outlines are hidden from assistive technology, and screen readers read the text once. Under reduced motion the text appears filled immediately and the events still fire.
Words and characters
split sets the pieces that draw one after another, with stagger milliseconds between them: words by default, or chars to draw glyph by glyph. Characters turn off kerning from the first frame, so the text never re-wraps when it splits.
Word by word
Default density
Compact density
Restart from the initial state
Show the copyable source
Built for teams that ship every day
Built for teams that ship every day
<p style="margin:0;inline-size:100%;text-align:center;font-size:2.25rem;line-height:1.15;font-weight:700">
<tp-mo-text-stroke split="words lines" stagger="140" reveal-repeat>Built for teams that ship every day</tp-mo-text-stroke>
</p>
Outline
--tp-mo-text-stroke-width sets the outline width, and --tp-mo-text-stroke-length the dash that draws one glyph: every glyph draws at once, so a glyph with a longer outline draws faster. A slower duration suits light weights and large sizes.
Heavier outline
Default density
Compact density
Restart from the initial state
Show the copyable source
reveal-hold keeps a ready text waiting, unfilled and undrawn. Setting it on a revealed text hides it, fading the fill and undrawing the outlines; removing it reveals the text again.
Hide and reveal
Default density
Compact density
Restart from the initial state
Show the copyable source
Fonts whose glyphs are built from overlapping contours, common in variable fonts, show the overlaps as lines while the outline draws; the fill covers them as the reveal ends.
API Reference
Every element also accepts motion-policy.
Attributes
AttributePropertyTypeDefaultDescriptionsplitsplitstring'words'Units to create: tokens of chars, words, lines. The finest unit animates; each word, or
each character when characters are split, carries the outline of its glyphs.staggerstaggernumber30Milliseconds between consecutive pieces.stagger-fromstaggerFromStaggerFrom'first'The piece the stagger starts from.reveal-repeatrevealRepeatbooleanfalseReveal again on every viewport entry instead of only the first.reveal-holdrevealHoldbooleanfalseWhile set, a ready reveal waits in its start state. Setting it on a revealed text hides it,
playing the reveal backwards; removing it reveals the text again.
Properties
PropertyTypeDefaultDescriptionlinesread-onlyHTMLElement[]—The line pieces, in order (empty unless lines are split).wordsread-onlyHTMLElement[]—The word pieces, in order.charsread-onlyHTMLElement[]—The character pieces, in order (empty unless characters are split).masksread-onlyHTMLElement[]—The mask wrappers, in order.revealedread-onlyboolean—Whether the reveal has played (false again after a repeat reset).
Events
EventTypeDescriptiontp-text-splitCustomEvent<{ lines: HTMLElement[]; words: HTMLElement[]; chars: HTMLElement[]; masks: HTMLElement[]; }>{ lines, words, chars, masks } after every split.tp-reveal-changeCustomEvent<{ revealed: boolean; effect: string; }>{ revealed, effect } when the reveal starts or a repeat resets it.tp-reveal-change-completeCustomEvent<{ revealed: boolean; }>{ revealed } after the last piece settles.
Methods
MethodReturnsDescriptionsplitText()voidSplits again from the original content (after revert(), or to force a recalculation).revert()voidRestores the original content and stops splitting until splitText() is called.
Slots
SlotDescriptiondefaultThe text, with inline formatting and interactive elements.
CSS custom properties
PropertyDefaultDescription--tp-mo-text-stroke-duration—Per-piece reveal duration. Default var(--tp-duration-slow).--tp-mo-text-stroke-easing—Reveal easing. Default var(--tp-easing-enter).--tp-mo-text-stroke-width—Outline width. Default 0.03em.--tp-mo-text-stroke-length—Dash length that draws one glyph outline; longer outlines draw faster. Default 6em.