Disperse 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 DisperseText from "./DisperseText";

export default function Example() {
  return (
    <DisperseText
      text={"BREAK FORM"}
      distance={22}
      rotation={18}
      duration={650}
      color={"#ebdcca"}
      style={{
        "fontSize": 56
      }}
    />
  );
}

Using Disperse Text

Use a short word or phrase with room around it for the letters to separate. distance and rotation control the amount of movement.

Use active to coordinate the effect with another interaction. Reducing distance is a useful way to fit the effect into a tighter layout.

Props

Name	Type	Required	Default	Description
text	string	No	""	Text to scatter. Accessible text is announced once.
distance	number	No	25	Maximum displacement in pixels.
rotation	number	No	18	Maximum rotation in degrees.
duration	number	No	650	Scatter and return transition duration in milliseconds.
color	string	No	"inherit"	Text colour.
active	boolean	No	undefined	Optional controlled scatter state; otherwise pointer hover or keyboard focus activates it.
className	string	No	""	Additional classes merged with component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.