Morphing Words 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 MorphingWords from "./MorphingWords";

export default function Example() {
  return (
    <MorphingWords
      words={[
        "Make it tangible.",
        "Make it thoughtful.",
        "Make it yours."
      ]}
      interval={3000}
      color={"#e5d4c3"}
      paused={false}
    />
  );
}

Using Morphing Words

Supply your own phrases through words and set typography with style. An invisible sizing layer reserves the width of the longest phrase to prevent layout jumps.

The timer pauses in hidden tabs and when reduced motion is enabled. The outgoing visual copy is hidden from assistive technology so the current phrase is read once.

Props

Name	Type	Required	Default	Description
words	string[]	No	[]	Words or phrases to cycle through.
interval	number	No	3000	Time between changes in milliseconds, with a minimum of 1000.
color	string	No	"#e5d4c3"	Text colour.
paused	boolean	No	false	Stop advancing the displayed phrase.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.