Text Highlighter

Text Animations

An inline highlighter that sweeps a marker band, drawn underline, or framed box across text left-to-right as it scrolls into view. Wraps naturally across lines and keeps the glyphs fully legible throughout; under prefers-reduced-motion the highlight is shown complete with no sweep.

Inspired by Cult Pro / Componentry — text highlight (pattern) — independently built, not affiliated. Attribution policy

Ship work that feels unmistakably yours, backed by proof, and never theoretical.

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/text-highlighter.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/text-highlighter.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="flex w-full max-w-md flex-col gap-4 px-6 text-center">
    <p className="text-lg font-medium leading-relaxed text-white/90">
      Ship work that feels{" "}
      <TextHighlighter variant="marker" color="#8b5cf6">
        unmistakably yours
      </TextHighlighter>
      ,{" "}
      <TextHighlighter variant="underline" color="#22d3ee" delay={0.28}>
        backed by proof
      </TextHighlighter>
      , and{" "}
      <TextHighlighter variant="box" color="#f5a623" delay={0.56}>
        never theoretical
      </TextHighlighter>
      .
    </p>
  </div>

Props

TextHighlighterProps extends Omit< React.HTMLAttributes<HTMLSpanElement>, "color" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" >

Prop	Type	Default	Description
children*	React.ReactNode	—	The text (or inline nodes) to highlight.
variant	Variant	"marker"	Highlight style: a marker band, a drawn underline, or a framed box.
color	string	"#8b5cf6"	Highlight colour. Hex values get sensible low-alpha treatment per variant.
duration	number	0.9	Sweep duration in seconds.
delay	number	0	Delay before the sweep starts, in seconds.
amount	number	0.6	Fraction of the element that must be visible before the sweep fires.
once	boolean	true	Animate only the first time it enters the viewport.

npm dependencies

motion