KQ-172 · HIGHLIGHT/SWEEP

Highlight Sweep

A highlighter that draws itself across a phrase the moment it scrolls into view. The marker is a wash behind the text scaled from a left origin, so it fills the way a pen would rather than fading in; it runs once, then holds.

KQ-172 · HIGHLIGHT/SWEEP

A good spring settles with one crisp overshoot — never a wobble, and never a dead stop.

Marker sweeps on view

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/highlight-sweep

Props

children
ReactNode
default
The phrase to highlight.
tone
"accent" | "success" | "warn"
default "accent"
The marker wash colour.