Split Text

Rise, drop, spin, pop, skew or swing; from the start, end, centre or at random. Spring-driven so the line feels physical.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add split-text

Example

import { SplitText } from "@/components/galactrex/split-text";

<SplitText text="Launch week" effect="pop" order="center" />

Installs to components/galactrex/split-text.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`text`	`string`	—	The text.
`as`	`ElementType`	`"h2"`	Element.
`by`	`"word" \| "char"`	`"char"`	Pieces.
`effect`	`"rise" \| "drop" \| "spin" \| "pop" \| "skew" \| "swing"`	`"rise"`	Entrance.
`trigger`	`"mount" \| "inView" \| "hover" \| "manual"`	`"inView"`	When it plays.
`active`	`boolean`	—	Plays when true, for trigger="manual".
`stagger`	`number`	`0.025`	Seconds between pieces.
`order`	`"start" \| "end" \| "center" \| "random"`	`"start"`	Stagger order.
`className`	`string`	—	Extra classes for the outer element.