Scan 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 ScanText from "./ScanText";

export default function Example() {
  return (
    <ScanText
      text={"Found in the light."}
      color={"#f1d5ac"}
      dimColor={"#857467"}
      duration={4}
      beamWidth={28}
      paused={false}
    />
  );
}

Using Scan Text

Supply a short headline through text and set fontSize through style. The text wraps normally, and only one copy is exposed to assistive technology.

Choose dimColor with enough contrast to keep the headline readable between passes. Reduced motion shows the illuminated text without scanning.

Props

Name	Type	Required	Default	Description
text	string	No	""	Text to render, with one accessible copy.
color	string	No	"#f1d5ac"	Illuminated text colour.
dimColor	string	No	"#857467"	Base text colour beneath the scan.
duration	number	No	4	Time in seconds for each direction of the scan.
beamWidth	number	No	28	Spread of the light gradient.
paused	boolean	No	false	Pause the scan at its current position.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.