Text Curtain 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 TextCurtain from "./TextCurtain";

export default function Example() {
  return (
    <TextCurtain
      text={"A little less.\nA little better."}
      revealed={true}
      duration={1000}
      stagger={170}
      color={"#e8d8c2"}
      style={{
        "fontSize": 54
      }}
    />
  );
}

Using Text Curtain

Separate the text into lines with newline characters. duration sets the reveal time and stagger separates the line starts.

Toggle revealed to show or hide the lines. Use the effect for a short editorial heading whose line breaks suit the available width.

Props

Name	Type	Required	Default	Description
text	string	No	""	Your text, with each newline starting a separate reveal line.
revealed	boolean	No	true	Show the lines. Toggle this prop to play or reverse the reveal; initial mount also reveals.
duration	number	No	850	Transition duration in milliseconds.
stagger	number	No	130	Delay between lines in milliseconds.
color	string	No	"currentColor"	Text colour.
className	string	No	""	Additional classes for the root element.
style	CSSProperties	No	undefined	Inline styles for caller-defined size, typography, and appearance.