Split Text

SplitText renders text as separate line, word, and character objects. Use the exposed chars, words, and lines arrays when you need to animate text segments independently.

SplitText is a Container, not a sprite, so it does not have an outer anchor or anchorX/anchorY prop. Position the split text with x, y, or position; use charAnchor, wordAnchor, and lineAnchor for the segment transform origins.

Please see the PixiJS SplitText docs for detailed information about the PixiJS API.

SplitText uses regular canvas Text objects for its characters. It is a good choice for short, highly styled strings. For long strings or many animated text instances, use SplitBitmapText instead.

Demo

Code example

split-text-demo.tsx

import { onTick, PixiCanvas, SplitText, usePixiScreen } from "pixi-solid";
import type * as Pixi from "pixi.js";

const DemoComponent = () => {
  const pixiScreen = usePixiScreen();
  let splitTextRef: Pixi.SplitText | undefined;
  let elapsed = 0;

  onTick((ticker) => {
    if (!splitTextRef) return;

    elapsed += ticker.deltaMS;
    splitTextRef.chars.forEach((character, index) => {
      character.y = Math.sin(elapsed * 0.004 + index * 0.45) * 12;
    });
  });

  return (
    <SplitText
      ref={(instance) => {
        splitTextRef = instance;
      }}
      text="Animate every character"
      style={{
        fontFamily: "Arial",
        fontSize: 42,
        fill: "white",
        stroke: { color: "#263238", width: 4 },
      }}
      x={20}
      y={pixiScreen.height * 0.5}
    />
  );
};

export const Demo = () => (
  <PixiCanvas style={{ "aspect-ratio": "2/1.5" }} background="#1099bb">
    <DemoComponent />
  </PixiCanvas>
);

Segment collections

The component exposes three collections:

• chars contains each character Text instance.
• words contains containers for each word.
• lines contains containers for each line.

Set charAnchor, wordAnchor, and lineAnchor to control the transform origin for each collection. autoSplit is enabled by default, so changing text or style rebuilds the segment collections.

<SplitText
  text="Animate each character"
  style={{ fontSize: 40, fill: "white" }}
  charAnchor={{ x: 0.5, y: 1 }}
  wordAnchor={{ x: 0, y: 0.5 }}
  lineAnchor={0.5}
/>