Split Text Reveal

Reveal a heading letter by letter with a flip, or word by word with a short rise.

Dependencies: motion
Size: 162 lines
Controls: 10 controls

example.tsx

1import { SplitTextReveal } from "@/components/onycx/split-text-reveal";23export default function Example() {4  return (5    <SplitTextReveal6      text={"Earth & Form"}7      split={"chars"}8      stagger={0.05}9      duration={1}10      rotate3d11      trigger={"mount"}12      size={"xl"}13      serif14      color={"#f7f3ed"}15      accent={"#e23e28"}16    />17  );18}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/split-text-reveal.json

1 · Dependencies

npm install motion

2 · Copy the source

components/onycx/split-text-reveal.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the split-text-reveal.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
text	string	—	Line to animate. Asterisks mark italic accent words.
split	"chars" \| "words"	"chars"	Animate each character or each word.
stagger / duration	number	0.05 / 1	Seconds between units and seconds per unit (opacity and transform share both).
rotate3d	boolean	true	Characters start folded at rotateX(−90°); words always rise 20px without rotation.
trigger	"mount" \| "inView"	"mount"	Play immediately (heroes) or once when 30% visible.
size	"md" \| "lg" \| "xl"	"xl"	xl is the original hero scale (72px / 160px / 224px, growing past 1800px).
serif	boolean	true	Whole line in the serif display face; false inherits the page font.
color / accent	string	"#f7f3ed" / "#e23e28"	Text (sand-50) and accent-word (brand red) colours.
align	"left" \| "center"	"center"	Flex-wrap justification.
as	"h1" \| "h2" \| "p"	"h2"	Element; use h1 for a page hero.