Glin UI
Radix UIBase UI
Primitive / Moleculebeta

Split Text

Splits text into characters, words or lines and animates them in with the active animation engine.

Edit on GitHub

Motion that respects the people using it

Every effect has a static twin and honors reduced motion.

Installation

Install from
pnpm dlx @glinui/cli@latest add split-text

Prefer the package?

Usage

Motion engine

Motion that you can turn off

// pnpm add motion (separate dependency, optional)
// Once at your app entry:
import "@glinui/motion/register/motion"



import { SplitText } from "@glinui/ui"



export function Demo() {
  return <SplitText engine="motion" text="Motion that you can turn off" as="h3" className="type-h3" />
}

GSAP engine

Motion that you can turn off

// pnpm add gsap (separate dependency under GreenSock's own license, not bundled by GLINUI)
// Once at your app entry:
import "@glinui/motion/register/gsap"



import { SplitText } from "@glinui/ui"



export function Demo() {
  return <SplitText engine="gsap" text="Motion that you can turn off" as="h3" className="type-h3" />
}

Static (animations off)

Motion that you can turn off

import { SplitText } from "@glinui/ui"



export function Demo() {
  return <SplitText motion="none" text="Motion that you can turn off" as="h3" className="type-h3" />
}

Accessibility

  • The container carries aria-label with the full text and a visually hidden copy, so screen readers read the sentence once.
  • Every animated word or character is aria-hidden, which avoids letter-by-letter announcements.

ARIA Attributes

  • aria-label on the container
  • aria-hidden on the animated parts

Reduced Motion

Under prefers-reduced-motion the engine drops travel, blur and scale and only fades opacity. motion="none" renders the final state immediately and never loads an animation library.

Affected properties

opacitytransformfilter

API Reference

PropTypeRequiredDefaultDescription
textstringYes-Text to split and reveal.
asSplitTextTagNo"p"Element to render.
by"words" | "chars"No"words"Reveal granularity.
variantRevealVariantNo"blur-slide"Visual treatment of each part.
stepnumberNo40 (words), 18 (chars)Delay between parts in ms.
orderStaggerDirectionNo"forward"Order parts appear in.
duration / delay / spring / once / threshold / immediatesee Reveal--Same behavior as Reveal.
engineEngineNameNo"css"Animation engine. css is built in with zero dependencies; motion and gsap are opt-in (import "@glinui/motion/register/<name>" and install the package). Falls back to MotionEngineProvider, then data-glin-engine on <html>, then css.
motionMotionLevelNo"system"none renders the final state with no animation, subtle animates opacity only, system follows prefers-reduced-motion.
delaynumberNo-Auto-generated from TypeScript source.
durationnumberNo-Auto-generated from TypeScript source.
immediatebooleanNofalseAuto-generated from TypeScript source.
oncebooleanNotrueAuto-generated from TypeScript source.
springSpringInputNo-Auto-generated from TypeScript source.
thresholdnumberNo-Auto-generated from TypeScript source.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { SplitText } from "@glinui/ui"

Source Files

Dependencies

@glinui/ui@glinui/motion

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/split-text.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

SplitTextProps

SplitTextProps

PropTypeRequiredDefaultDescription
asSplitTextTagNo"p"-
by"words" | "chars"No"words"Reveal granularity. Default `words`.
delaynumberNo--
durationnumberNo--
engineEngineNameNo-Engine override: `css` (default), `motion`, `gsap` or a registered custom engine.
immediatebooleanNofalse-
motionMotionLevelNo-Motion override. `none` renders the static final state, `subtle` is opacity only.
oncebooleanNotrue-
orderStaggerDirectionNo"forward"-
springSpringInputNo--
stepnumberNo-Delay between parts in ms. Default 40 for words and 18 for chars.
textstringYes-The text to split. Plain string only.
thresholdnumberNo--
variantRevealVariantNo"blur-slide"-