Marker 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 MarkerText from "./MarkerText";

export default function Example() {
  return (
    <MarkerText
      children={"Worth a closer look."}
      color={"#c99762"}
      variant={"circle"}
      strokeWidth={3}
      duration={900}
      defaultActive={true}
      style={{
        "color": "#efe3d1",
        "fontSize": 40,
        "letterSpacing": "-.045em"
      }}
    />
  );
}

Using Marker Text

Wrap the words to emphasise in children and choose circle or underline through variant.

Use strokeWidth and duration to tune the mark. Set defaultActive to false for an interaction-led mark, or active to coordinate it with another control.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	The content to mark. The stroke follows text size and wrapping; use text or non-interactive React content.
color	string	No	"#d8ad78"	Marker stroke colour.
variant	string	No	"circle"	circle or underline.
strokeWidth	number	No	3	Stroke width in pixels, unaffected by text scaling.
duration	number	No	700	Drawing duration in milliseconds. Interrupted hover transitions reverse smoothly from their current position.
active	boolean	No	undefined	Optional controlled visibility of the mark.
defaultActive	boolean	No	true	Keep the mark visible; false makes it appear on hover or focus.
className	string	No	""	Additional classes merged with component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.