Motion.page · Visual animation builder

Text that arrives one letter at a time.

Split any heading or paragraph into characters, words, or lines, then animate each piece: a mask reveal, a stagger, a scroll-triggered entrance, all without writing code. The headline above is doing it right now.

Get instant access or try free for 7 days

Loved by 6,000+ designers.

The product

Watch it actually work.

Meet Motion.page: All-in-One platform for web animation · YouTube

Three levels, one tile

Chars, words, or lines, your choice.

Each row below runs the real Motion SDK. Scroll them into view once, then hit Replay as many times as you like.

split: chars

Every letter, choreographed.

split: words

One word arrives, then the next.

split: lines

Long headlines split cleanly into their own lines, revealed in order.

You just replayed chars, words, and lines. Setting one up on your own headline takes a few minutes.

Get instant access or try free for 7 days

Inside the Builder

A mask reveal is two toggles.

Pick the level, flip Mask on, and the Builder shows exactly what plays before it does: every character parked just below an invisible edge, waiting.

Motion.page Builder showing a 'Display: chars mask reveal' timeline: the .display selector's Translate Y set to 110% on the From tab — The chars mask reveal as built. Each character starts just below the mask edge. Builder v3.2.10.

Pick a heading or paragraph

Click any text element. The Builder edits your real copy, not a placeholder.

Choose Characters, Words, or Lines

Open the Text Splitter tile and pick a split level, or start from one of the 20 Text Reveals presets and tweak. Turn on Mask for a clip-reveal: text rising from behind an invisible edge.

Set the stagger and publish

From, to, and stagger (the beat each piece waits behind the previous one) work like any other animation. Publish clean code that runs on its own, with no library to load and no dependency.

Works with every platform you already use

The Text Splitter tile

Turn on Mask, skip the CSS.

Inside the Functional property list, the Text Splitter tile gives three split levels and a Mask switch that wraps every piece in a clip-reveal container on its own.

The published pattern for a masked chars reveal: in the Builder, this is two toggles. Motion SDK, Builder v3.2.10:

Motion('headline', 'h1', {
  split: 'chars',
  mask: true,
  maskPadding: { inline: 0.15, block: 0.04 },
  from: { y: '110%', opacity: 0 },
  duration: 0.48,
  stagger: { each: 0.04, from: 'start' },
  ease: 'power3.out',
}).onPageLoad();

Text Splitter panel in the Motion.page Builder with the Characters dropdown and the Mask switch — The Text Splitter tile: Characters, Words, or Lines, plus the Mask switch. Builder v3.2.10.

Under the hood

Splitting text is easy to do badly.

Here's exactly what the splitter handles so your markup and layout stay intact.

Only bare text is touched: Existing , , and wrappers survive the split with their classes and styles intact. Only the raw text nodes inside them are split.
 line breaks survive: Manual line breaks are preserved at every split level, from a single character split to a full line split.
Emoji-safe: Characters are segmented by grapheme cluster, not by string index. Emoji, flags, and accented characters split as whole units.
Words never break mid-word: Characters inside a word share a no-wrap wrapper, so a narrow viewport can never split a word across two lines mid-character.
Mask needs zero CSS: Turn on Mask and the SDK injects the overflow:hidden wrapper itself: no clip-path or manual container required.
Gradient headings keep painting: A background-clip: text heading keeps rendering its gradient across every split character or word. The split carries the paint style with it.
Kill restores the original markup: Killing the timeline reverts the DOM to the exact HTML it started with: no leftover spans.
Line splits re-group on reflow: A line split recomputes automatically when the viewport resizes, so a headline that rewraps at a new width still gets fresh, correct line groups.
20 ready-made presets: The Builder's Text Reveals category ships 20 split-text presets to start from and tweak.
Text Flapper: Splits into characters automatically, then cycles each one through a charset before landing, departure-board style, with five other transition types.

Text Splitter SDK reference Text Splitter in the Builder

What is a split text animation?

A split text animation breaks a heading or paragraph into characters, words, or lines so each piece can animate on its own. Letters can arrive one at a time, words can step in with a stagger, or lines can reveal in sequence, instead of the whole block fading in at once.

The signature version is the mask reveal: each piece sits inside a clipped container and slides up from behind that invisible edge, so text looks like it's rising into place rather than simply fading.

Motion.page builds the split visually: pick a level (Characters, Words, or Lines), turn on Mask, and shape the stagger like any other animation. Published code runs on the site itself with zero dependencies, and killing the timeline restores the original markup exactly.

Questions about SplitText.

What is SplitText?

SplitText is the classic name for the technique; in Motion.page it's the Text Splitter tile. It splits an element's text into characters, words, or lines so each piece can animate on its own: the engine behind letter-by-letter reveals and mask-style headline entrances.

Do I need to write code?

No. Pick a heading or paragraph, open the Text Splitter tile, choose Characters, Words, or Lines, turn on Mask if you want a clip-reveal, then set your from/to values and stagger like any other animation.

Does it break my existing markup?

No, only bare text nodes are split, so existing , , and wrappers keep their classes and styles, and line breaks are preserved. Killing the timeline restores the original HTML exactly, with nothing left behind.

Does it work with gradient text?

Yes. Motion.page carries the gradient onto every split character or word so a background-clip: text heading keeps painting correctly through the split. You don't need to do anything extra.

Will splitting text hurt my SEO or screen readers?

The split happens in the browser. The HTML you publish and what crawlers index is your original, unsplit text, and killing a timeline restores that markup exactly. Screen readers encounter the split spans while a timeline is active; for a headline that must read cleanly, add an aria-label with the full sentence.

How is this different from splitting text with code?

The engine is Motion.page's own. What you're buying is the workflow: click a headline on your live page, pick Characters, Words, or Lines, flip Mask on, and publish clean dependency-free code to WordPress or Desktop. If you'd rather write it, the SDK is right there too.

Does it work in WordPress and Desktop?

Yes. The Text Splitter tile is available in both the Motion.page WordPress plugin and the Desktop app, with the same controls.

What happens to my animations if I cancel?

Timelines published as local code live in your own site and keep running. They don't phone home. CDN-hosted delivery (where we host and serve the animation file for you) and further editing require an active license.

Still deciding? Try free for 7 days →