Text Roll 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 TextRoll from "./TextRoll";

export default function Example() {
  return (
    <TextRoll
      text={"MAKE IT MOVE"}
      stagger={30}
      duration={550}
      direction={"up"}
      color={"#eee5f2"}
      hoverColor={"#d1b0e8"}
      style={{
        "fontSize": 44,
        "fontWeight": 550,
        "letterSpacing": "-.05em"
      }}
    />
  );
}

Using Text Roll

Use a short label with enough line height for the rolling transition. color and hoverColor define the two appearances.

Use active to coordinate the roll with another interaction. stagger controls the spacing between letter starts and direction chooses the movement direction.

Props

Name	Type	Required	Default	Description
text	string	No	""	Text to animate. Spaces and Unicode characters are preserved.
active	boolean	No	undefined	Optional controlled animation state; otherwise hover and keyboard focus trigger the effect.
stagger	number	No	25	Delay between letters in milliseconds.
duration	number	No	500	Each letter transition duration in milliseconds.
direction	string	No	"up"	"up" or "down".
color	string	No	"inherit"	Initial text colour.
hoverColor	string	No	"#cfbae8"	Revealed text colour.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.