Focus 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 FocusText from "./FocusText";

export default function Example() {
  return (
    <FocusText
      text={"Find your focus."}
      defaultIndex={1}
      blur={4}
      color={"#e8e0f1"}
      accentColor={"#d0b8ec"}
      style={{
        "fontSize": 54,
        "fontWeight": 500,
        "letterSpacing": "-.055em"
      }}
    />
  );
}

Using Focus Text

Use a phrase whose individual words can carry emphasis. blur controls the softness of the words outside the selected position.

Use activeIndex with onActiveChange to coordinate the focus with other content, or defaultIndex to set its initial position.

Props

Name	Type	Required	Default	Description
text	string	No	""	Text to split into selectable words.
defaultIndex	number	No	0	Initially focused word index.
activeIndex	number	No	undefined	Optional controlled word index.
onActiveChange	function	No	undefined	Called with the selected word index on pointer or keyboard input.
blur	number	No	3	Blur radius for inactive words in pixels.
color	string	No	"#e8e0f1"	Text colour.
accentColor	string	No	"#d0b8ec"	Corner frame 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.