React Splitting Text

React text splitting with staggered character, word, or line reveals. Smooth animations that flow naturally using Framer Motion, TypeScript, and shadcn/ui.

Motion

Framer Motion

Trying to implement text animations?

Join our Discord community for help from other developers.

Ever tried to animate text revealing and it either all pops in at once (boring) or staggers so slowly it feels like watching paint dry? Most split text animations either have terrible timing or split at weird places, making sentences look broken. This component gets the rhythm right—characters flow smoothly, words feel natural, lines cascade properly.

Character-by-character reveals with perfect timing

Text that splits and reveals with natural stagger patterns:

Loading component...

'use client'; import * as React from 'react';import {  motion,  type Variants,  type TargetAndTransition,  type HTMLMotionProps,  useInView,  type UseInViewOptions,} from 'motion/react'; type DefaultSplittingTextProps = {  motionVariants?: {    initial?: Record<string, any>;    animate?: Record<string, any>;    transition?: Record<string, any>;    stagger?: number;  };  inView?: boolean;  inViewMargin?: UseInViewOptions['margin'];  inViewOnce?: boolean;  delay?: number;} & HTMLMotionProps<'div'>; type CharsOrWordsSplittingTextProps = DefaultSplittingTextProps & {  type?: 'chars' | 'words';  text: string;}; type LinesSplittingTextProps = DefaultSplittingTextProps & {  type: 'lines';  text: string[];}; type SplittingTextProps =  | CharsOrWordsSplittingTextProps  | LinesSplittingTextProps; const defaultItemVariant: Variants = {  hidden: { x: 150, opacity: 0 },  visible: {    x: 0,    opacity: 1,    transition: { duration: 0.7, ease: 'easeOut' },  },}; export const SplittingText: React.FC<SplittingTextProps> = ({  ref,  text,  type = 'chars',  motionVariants = {},  inView = false,  inViewMargin = '0px',  inViewOnce = true,  delay = 0,  ...props}) => {  const items = React.useMemo<React.ReactNode[]>(() => {    if (Array.isArray(text)) {      return text.flatMap((line, i) => [        <React.Fragment key={`line-${i}`}>{line}</React.Fragment>,        i < text.length - 1 ? <br key={`br-${i}`} /> : null,      ]);    }     if (type === 'words') {      const tokens = text.match(/\S+\s*/g) || [];      return tokens.map((token, i) => (        <React.Fragment key={i}>{token}</React.Fragment>      ));    }     return text      .split('')      .map((char, i) => <React.Fragment key={i}>{char}</React.Fragment>);  }, [text, type]);   const containerVariants: Variants = {    hidden: {},    visible: {      transition: {        delayChildren: delay / 1000,        staggerChildren:          motionVariants.stagger ??          (type === 'chars' ? 0.05 : type === 'words' ? 0.2 : 0.3),      },    },  };   const itemVariants: Variants = {    hidden: {      ...defaultItemVariant.hidden,      ...(motionVariants.initial || {}),    },    visible: {      ...defaultItemVariant.visible,      ...(motionVariants.animate || {}),      transition: {        ...((defaultItemVariant.visible as TargetAndTransition).transition ||          {}),        ...(motionVariants.transition || {}),      },    },  };   const localRef = React.useRef<HTMLDivElement>(null);  React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement);   const inViewResult = useInView(localRef, {    once: inViewOnce,    margin: inViewMargin,  });  const isInView = !inView || inViewResult;   return (    <motion.span      ref={localRef}      initial="hidden"      animate={isInView ? 'visible' : 'hidden'}      variants={containerVariants}      {...props}    >      {items.map(        (item, index) =>          item && (            <React.Fragment key={index}>              <motion.span                key={index}                variants={itemVariants}                style={{                  display: 'inline-block',                  whiteSpace:                    type === 'chars'                      ? 'pre'                      : Array.isArray(text)                        ? 'normal'                        : 'normal',                }}              >                {item}              </motion.span>              {type === 'words' && ' '}            </React.Fragment>          ),      )}    </motion.span>  );};

Built with TypeScript and shadcn/ui, using Framer Motion for precise stagger control in React applications. Whether you split by character, word, or line, the timing feels natural and the text maintains proper spacing and flow throughout the animation.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/splitting-text.json

npx shadcn@latest add https://www.shadcn.io/registry/splitting-text.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/splitting-text.json

bunx shadcn@latest add https://www.shadcn.io/registry/splitting-text.json

Usage

import { SplittingText } from "@/components/text/splitting-text";

<SplittingText
  text="Smooth text reveals that actually work"
  type="words"
  inView={true}
  motionVariants={{
    initial: { opacity: 0, x: 100 },
    animate: { opacity: 1, x: 0 },
    transition: { duration: 0.5 },
    stagger: 0.1
  }}
/>;

Why most split text animations suck

Most developers just throw a delay on each element without considering how humans actually read. Characters that appear too fast blur together, too slow feels broken. Words that split randomly break readability. Lines that cascade without rhythm look like a broken marquee.

This React component uses different stagger timings for each split type: 50ms for characters (fast enough to feel smooth), 200ms for words (time to process each one), 300ms for lines (dramatic without dragging). We preserve proper spacing and line breaks so text never looks broken during animation.

The motion variants are customizable but the defaults were tested for readability. Text slides in from the right with opacity fade, matching how eyes naturally scan left-to-right. No bouncing, no rotating, no effects that compete with actual reading.

Examples

Word-by-word reveals

Perfect timing for headlines and taglines:

Loading component...

'use client'; import * as React from 'react';import {  motion,  type Variants,  type TargetAndTransition,  type HTMLMotionProps,  useInView,  type UseInViewOptions,} from 'motion/react'; type DefaultSplittingTextProps = {  motionVariants?: {    initial?: Record<string, any>;    animate?: Record<string, any>;    transition?: Record<string, any>;    stagger?: number;  };  inView?: boolean;  inViewMargin?: UseInViewOptions['margin'];  inViewOnce?: boolean;  delay?: number;} & HTMLMotionProps<'div'>; type CharsOrWordsSplittingTextProps = DefaultSplittingTextProps & {  type?: 'chars' | 'words';  text: string;}; type LinesSplittingTextProps = DefaultSplittingTextProps & {  type: 'lines';  text: string[];}; type SplittingTextProps =  | CharsOrWordsSplittingTextProps  | LinesSplittingTextProps; const defaultItemVariant: Variants = {  hidden: { x: 150, opacity: 0 },  visible: {    x: 0,    opacity: 1,    transition: { duration: 0.7, ease: 'easeOut' },  },}; export const SplittingText: React.FC<SplittingTextProps> = ({  ref,  text,  type = 'chars',  motionVariants = {},  inView = false,  inViewMargin = '0px',  inViewOnce = true,  delay = 0,  ...props}) => {  const items = React.useMemo<React.ReactNode[]>(() => {    if (Array.isArray(text)) {      return text.flatMap((line, i) => [        <React.Fragment key={`line-${i}`}>{line}</React.Fragment>,        i < text.length - 1 ? <br key={`br-${i}`} /> : null,      ]);    }     if (type === 'words') {      const tokens = text.match(/\S+\s*/g) || [];      return tokens.map((token, i) => (        <React.Fragment key={i}>{token}</React.Fragment>      ));    }     return text      .split('')      .map((char, i) => <React.Fragment key={i}>{char}</React.Fragment>);  }, [text, type]);   const containerVariants: Variants = {    hidden: {},    visible: {      transition: {        delayChildren: delay / 1000,        staggerChildren:          motionVariants.stagger ??          (type === 'chars' ? 0.05 : type === 'words' ? 0.2 : 0.3),      },    },  };   const itemVariants: Variants = {    hidden: {      ...defaultItemVariant.hidden,      ...(motionVariants.initial || {}),    },    visible: {      ...defaultItemVariant.visible,      ...(motionVariants.animate || {}),      transition: {        ...((defaultItemVariant.visible as TargetAndTransition).transition ||          {}),        ...(motionVariants.transition || {}),      },    },  };   const localRef = React.useRef<HTMLDivElement>(null);  React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement);   const inViewResult = useInView(localRef, {    once: inViewOnce,    margin: inViewMargin,  });  const isInView = !inView || inViewResult;   return (    <motion.span      ref={localRef}      initial="hidden"      animate={isInView ? 'visible' : 'hidden'}      variants={containerVariants}      {...props}    >      {items.map(        (item, index) =>          item && (            <React.Fragment key={index}>              <motion.span                key={index}                variants={itemVariants}                style={{                  display: 'inline-block',                  whiteSpace:                    type === 'chars'                      ? 'pre'                      : Array.isArray(text)                        ? 'normal'                        : 'normal',                }}              >                {item}              </motion.span>              {type === 'words' && ' '}            </React.Fragment>          ),      )}    </motion.span>  );};

Line-by-line cascading

Dramatic reveals for poetry or step-by-step content:

Loading component...

'use client'; import * as React from 'react';import {  motion,  type Variants,  type TargetAndTransition,  type HTMLMotionProps,  useInView,  type UseInViewOptions,} from 'motion/react'; type DefaultSplittingTextProps = {  motionVariants?: {    initial?: Record<string, any>;    animate?: Record<string, any>;    transition?: Record<string, any>;    stagger?: number;  };  inView?: boolean;  inViewMargin?: UseInViewOptions['margin'];  inViewOnce?: boolean;  delay?: number;} & HTMLMotionProps<'div'>; type CharsOrWordsSplittingTextProps = DefaultSplittingTextProps & {  type?: 'chars' | 'words';  text: string;}; type LinesSplittingTextProps = DefaultSplittingTextProps & {  type: 'lines';  text: string[];}; type SplittingTextProps =  | CharsOrWordsSplittingTextProps  | LinesSplittingTextProps; const defaultItemVariant: Variants = {  hidden: { x: 150, opacity: 0 },  visible: {    x: 0,    opacity: 1,    transition: { duration: 0.7, ease: 'easeOut' },  },}; export const SplittingText: React.FC<SplittingTextProps> = ({  ref,  text,  type = 'chars',  motionVariants = {},  inView = false,  inViewMargin = '0px',  inViewOnce = true,  delay = 0,  ...props}) => {  const items = React.useMemo<React.ReactNode[]>(() => {    if (Array.isArray(text)) {      return text.flatMap((line, i) => [        <React.Fragment key={`line-${i}`}>{line}</React.Fragment>,        i < text.length - 1 ? <br key={`br-${i}`} /> : null,      ]);    }     if (type === 'words') {      const tokens = text.match(/\S+\s*/g) || [];      return tokens.map((token, i) => (        <React.Fragment key={i}>{token}</React.Fragment>      ));    }     return text      .split('')      .map((char, i) => <React.Fragment key={i}>{char}</React.Fragment>);  }, [text, type]);   const containerVariants: Variants = {    hidden: {},    visible: {      transition: {        delayChildren: delay / 1000,        staggerChildren:          motionVariants.stagger ??          (type === 'chars' ? 0.05 : type === 'words' ? 0.2 : 0.3),      },    },  };   const itemVariants: Variants = {    hidden: {      ...defaultItemVariant.hidden,      ...(motionVariants.initial || {}),    },    visible: {      ...defaultItemVariant.visible,      ...(motionVariants.animate || {}),      transition: {        ...((defaultItemVariant.visible as TargetAndTransition).transition ||          {}),        ...(motionVariants.transition || {}),      },    },  };   const localRef = React.useRef<HTMLDivElement>(null);  React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement);   const inViewResult = useInView(localRef, {    once: inViewOnce,    margin: inViewMargin,  });  const isInView = !inView || inViewResult;   return (    <motion.span      ref={localRef}      initial="hidden"      animate={isInView ? 'visible' : 'hidden'}      variants={containerVariants}      {...props}    >      {items.map(        (item, index) =>          item && (            <React.Fragment key={index}>              <motion.span                key={index}                variants={itemVariants}                style={{                  display: 'inline-block',                  whiteSpace:                    type === 'chars'                      ? 'pre'                      : Array.isArray(text)                        ? 'normal'                        : 'normal',                }}              >                {item}              </motion.span>              {type === 'words' && ' '}            </React.Fragment>          ),      )}    </motion.span>  );};

Custom animation variants

Fully customizable motion for brand-specific effects:

Loading component...

'use client'; import * as React from 'react';import {  motion,  type Variants,  type TargetAndTransition,  type HTMLMotionProps,  useInView,  type UseInViewOptions,} from 'motion/react'; type DefaultSplittingTextProps = {  motionVariants?: {    initial?: Record<string, any>;    animate?: Record<string, any>;    transition?: Record<string, any>;    stagger?: number;  };  inView?: boolean;  inViewMargin?: UseInViewOptions['margin'];  inViewOnce?: boolean;  delay?: number;} & HTMLMotionProps<'div'>; type CharsOrWordsSplittingTextProps = DefaultSplittingTextProps & {  type?: 'chars' | 'words';  text: string;}; type LinesSplittingTextProps = DefaultSplittingTextProps & {  type: 'lines';  text: string[];}; type SplittingTextProps =  | CharsOrWordsSplittingTextProps  | LinesSplittingTextProps; const defaultItemVariant: Variants = {  hidden: { x: 150, opacity: 0 },  visible: {    x: 0,    opacity: 1,    transition: { duration: 0.7, ease: 'easeOut' },  },}; export const SplittingText: React.FC<SplittingTextProps> = ({  ref,  text,  type = 'chars',  motionVariants = {},  inView = false,  inViewMargin = '0px',  inViewOnce = true,  delay = 0,  ...props}) => {  const items = React.useMemo<React.ReactNode[]>(() => {    if (Array.isArray(text)) {      return text.flatMap((line, i) => [        <React.Fragment key={`line-${i}`}>{line}</React.Fragment>,        i < text.length - 1 ? <br key={`br-${i}`} /> : null,      ]);    }     if (type === 'words') {      const tokens = text.match(/\S+\s*/g) || [];      return tokens.map((token, i) => (        <React.Fragment key={i}>{token}</React.Fragment>      ));    }     return text      .split('')      .map((char, i) => <React.Fragment key={i}>{char}</React.Fragment>);  }, [text, type]);   const containerVariants: Variants = {    hidden: {},    visible: {      transition: {        delayChildren: delay / 1000,        staggerChildren:          motionVariants.stagger ??          (type === 'chars' ? 0.05 : type === 'words' ? 0.2 : 0.3),      },    },  };   const itemVariants: Variants = {    hidden: {      ...defaultItemVariant.hidden,      ...(motionVariants.initial || {}),    },    visible: {      ...defaultItemVariant.visible,      ...(motionVariants.animate || {}),      transition: {        ...((defaultItemVariant.visible as TargetAndTransition).transition ||          {}),        ...(motionVariants.transition || {}),      },    },  };   const localRef = React.useRef<HTMLDivElement>(null);  React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement);   const inViewResult = useInView(localRef, {    once: inViewOnce,    margin: inViewMargin,  });  const isInView = !inView || inViewResult;   return (    <motion.span      ref={localRef}      initial="hidden"      animate={isInView ? 'visible' : 'hidden'}      variants={containerVariants}      {...props}    >      {items.map(        (item, index) =>          item && (            <React.Fragment key={index}>              <motion.span                key={index}                variants={itemVariants}                style={{                  display: 'inline-block',                  whiteSpace:                    type === 'chars'                      ? 'pre'                      : Array.isArray(text)                        ? 'normal'                        : 'normal',                }}              >                {item}              </motion.span>              {type === 'words' && ' '}            </React.Fragment>          ),      )}    </motion.span>  );};

Features

Three splitting modes optimized for different content types in React applications
Stagger timing that matches natural reading rhythm and comprehension
Custom motion variants with complete animation control for JavaScript projects
In-view detection so animations trigger when users actually see them
Complete TypeScript support with full motion variant type definitions
Preserves text formatting and whitespace during all animation states
Free open source component that works seamlessly with shadcn/ui in Next.js

API Reference

SplittingText

Text animation with character, word, or line splitting options.

Prop	Type	Default	Description
`text`	`string \| string[]`	required	Text or array of lines to animate
`type`	`'chars' \| 'words' \| 'lines'`	`'chars'`	How to split text for animation
`motionVariants`	`MotionVariants`	-	Custom Framer Motion variants
`inView`	`boolean`	`false`	Only animate when visible
`inViewMargin`	`string`	`"0px"`	Viewport margin for trigger
`inViewOnce`	`boolean`	`true`	Animate only once
`delay`	`number`	`0`	Start delay in milliseconds
`className`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	Standard div attributes

Motion Variants Interface

Customize how text elements animate:

motionVariants?: {
  initial?: Record<string, any>;    // Starting state
  animate?: Record<string, any>;    // Final state  
  transition?: Record<string, any>; // Timing config
  stagger?: number;                 // Override default stagger
}

Optimal Stagger Timing

Tested values for natural reading flow:

Split Type	Default Stagger	Reading Speed	Best For
chars	0.05s	Fast	Headlines, short phrases
words	0.2s	Natural	Sentences, taglines
lines	0.3s	Dramatic	Poetry, step lists

Common gotchas

Text looks broken during animation: Make sure the container has enough width in React applications. Character splitting with narrow containers causes weird wrapping during the reveal.

Stagger timing feels wrong: Default timings work for English text with TypeScript optimization. Other languages or very long text might need custom stagger values. Test with actual content, not Lorem ipsum.

Animation performance issues: Each character/word/line creates individual animated elements in JavaScript applications. Very long text (500+ words) might be slow on older devices—consider splitting into smaller chunks.

Whitespace disappears: The component preserves spacing, but custom CSS might override it in Next.js projects. Check for white-space or word-spacing styles that could interfere.

Lines don't break properly: For line splitting, pass an array of strings, not a single string with \n characters. Each array item becomes one animated line.

React Splitting Text

Character-by-character reveals with perfect timing

Installation

Usage

Why most split text animations suck

Examples

Word-by-word reveals

Line-by-line cascading

Custom animation variants

Features

API Reference

SplittingText

Motion Variants Interface

Optimal Stagger Timing

Common gotchas

Text Generate Effect

Writing Text

Text Reveal

Blur Text

Rolling Text

Shuffle

Questions developers actually ask

On this page

React Splitting Text