Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Setup-only DOM text splitter — wraps every word / character / line of the target element's text content in its own `<span>` so per-piece animations (rotateX, opacity, color, position) can target the pieces individually. Runs once at bind time; the spans persist for the page lifetime. Each span gets a class based on the split mode: `ft-split-word`, `ft-split-char`, or `ft-split-line` — use these in downstream selectors (e.g. `.headline .ft-split-char` for `staggerWrite`).
Type splitTextCategory textContext canvasDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Outputs
| Port | Type | Description |
|---|---|---|
count | float | Number of spans created at bind time. Useful for downstream math that needs to know how many pieces exist (compute per-element stagger window, normalize an index, etc.). |
pieceSelector | string | Live CSS selector that targets the spans this node creates — format `<target> .ft-split-<mode>`. Wire into a downstream `staggerWrite` / `domPoseWrite` / `domPropertyWrite` / `domVariablesWrite` `selector` input port to keep the consumer in lockstep with this node, no string-copy-paste needed. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | "" | CSS selector for the element whose text gets split. The element's textContent is replaced with one `<span>` per piece. Multiple matches are processed (each gets its own splits). Common targets: a single `.headline`, all `.line` paragraphs, etc. |
mode | enum | "words" | How to break up the text. `words` = whitespace-separated tokens (good for word-level reveals). `chars` = every character including punctuation (good for typewriter / wave effects). `lines` = visual lines after CSS wrapping (good for paragraph reveals). The resulting span class is `ft-split-<mode>` — e.g. `.ft-split-char` for chars mode. options words, chars, lines |
Use cases
- Per-character text animation — pair with `staggerWrite` (rotateX, translateY, opacity) for typewriter, wave, fade-in, or rolling-tube text effects. Selector pattern: `<lineSelector> .ft-split-char`.
- Word-level reveal — `mode: words` + a stagger-driven opacity/translate tween gives a per-word entrance with natural reading cadence. Selector pattern: `<lineSelector> .ft-split-word`.
- Line-by-line fade — `mode: lines` for paragraph reveals where each visual line (after wrapping) animates in. Selector pattern: `<lineSelector> .ft-split-line`.
- Char-count driven layouts — wire the `count` output into expression / mathUtil to scale a downstream effect by the number of pieces (e.g. compute totalStagger = X / count).
Related nodes
Envelope
Use splitText as the node type inside a graph node envelope. Add id, optional params, optional connections, and optional activeWhen based on the guide context.
Generated source
Registry faster-motion-docs/node-registry.jsonCategory page /help/faster-motion/faster-motion-node-category-text/