Splitting Text

Advanced text animation component that splits text into characters, words, or lines with staggered motion effects. Perfect for React applications requiring sophisticated typography animations with Next.js integration and TypeScript support.

Framer Motion

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>  );};

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

Features

Three splitting modes - Characters, words, or lines with different animation behaviors
Staggered animations with customizable timing and delay between elements
Intersection Observer support with configurable margins and single-trigger options
Custom motion variants with complete control over initial, animate, and transition states
TypeScript support with comprehensive type definitions and variant interfaces
shadcn/ui integration using design system utilities and responsive classes
Flexible text input supporting string or string array for different splitting modes

Examples

Words Animation

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>  );};

Lines Animation

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 Variants

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>  );};

Use Cases

This free open source React component works well for:

Hero sections - Animated headlines and taglines built with Next.js
Content reveals - Progressive text disclosure using TypeScript and Tailwind CSS
Storytelling interfaces - Narrative text animations with shadcn/ui integration
Marketing pages - Eye-catching text effects for React applications
Interactive presentations - Slide-in text effects with motion controls

API Reference

SplittingText

Prop	Type	Default	Description
`text`	`string \| string[]`	required	Text content or array of lines to animate
`type`	`'chars' \| 'words' \| 'lines'`	`'chars'`	How to split the text for animation
`motionVariants`	`MotionVariants`	-	Custom animation variants for elements
`inView`	`boolean`	`false`	Enable intersection observer triggering
`inViewMargin`	`string`	`'0px'`	Margin for intersection observer
`inViewOnce`	`boolean`	`true`	Trigger animation only once when in view
`delay`	`number`	`0`	Delay before starting animation (milliseconds)
`className`	`string`	-	Additional CSS classes for container

Motion Variants Structure

motionVariants?: {
  initial?: Record<string, any>;    // Starting state
  animate?: Record<string, any>;    // End state
  transition?: Record<string, any>; // Transition config
  stagger?: number;                 // Custom stagger timing
}

Animation Types

chars - Splits text into individual characters (default stagger: 0.05s)
words - Splits text into words preserving spaces (default stagger: 0.2s)
lines - Treats string array as separate lines (default stagger: 0.3s)

Default Animation Behavior

Initial state - Elements start 150px right and transparent
Animate state - Elements move to position with full opacity
Transition - 0.7s duration with easeOut easing
Stagger - Progressive timing based on splitting type

Implementation Notes

Uses intersection observer for scroll-triggered animations when inView is enabled
Preserves whitespace for character splitting using white-space: pre
Automatically adds spaces between words when using word splitting mode
Supports line breaks when using lines mode with string arrays
Built with motion/react for smooth, performant animations
Elements are wrapped in inline-block spans for proper animation behavior
Integrates seamlessly with shadcn/ui typography and spacing system

Reactsplitting-text

Reactsplitting-text

Reactsplitting-text

Reactsplitting-text

On this page