Split Text React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import SplitText from "./SplitText";

export default function Example() {
  return (
    <SplitText
      text={"Make a move."}
      delay={35}
      duration={650}
      distance={24}
      color={"#c5bbef"}
    />
  );
}

Using Split Text

Use as to choose the semantic element that fits the page, such as a heading or paragraph. Pass the copy through text.

delay controls the spacing between character starts, while duration controls each reveal. Use a modest distance to keep the entrance readable.

Props

Name	Type	Required	Default	Description
text	string	No	""	Your text
as	string	No	"span"	HTML element used for the text wrapper.
delay	number	No	35	Character delay
duration	number	No	650	Reveal duration
distance	number	No	24	Travel distance
color	string	No	"inherit"	Text color
className	string	No	""	Additional CSS class names, merged with base component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.