Highlight sweepPro

A marker drawn behind the phrase a citation supports, line by line in reading order.

Markdown

On this page

ProPoint at a citation and the sentence it supports is marked, line by line.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/highlight-sweep

Usage

tsx

import {
  HighlightSweep,
  HighlightSweepGroup,
  useHighlightSweepTrigger,
} from "@/components/ui/chatcn/pro/highlight-sweep"

<HighlightSweepGroup>
  <p>
    Because <HighlightSweep id="a">it has to pull heat out of colder air</HighlightSweep>
    <Citation index={1} source={source} {...useHighlightSweepTrigger("a")} />
  </p>
</HighlightSweepGroup>

A wrapped phrase is several line boxes, so the marker is one rect per line, each revealed with clip-path: inset() from the reading start at one speed: a short last line takes less time than a full one, and each line begins as the one before ends. In right to left text the sweep starts at the right. Turning off fades the marker instead of wiping it back. Use active on its own, or a group with triggers on citations, source rows or HighlightSweepTrigger.

Examples

States

ProTones, underline, a phrase over four lines, reduced motion and triggers.

Props

Prop	Type	Notes
`active`	`boolean`	Draw the highlight. Or use `id` in a group
`id`	`string`	Ties the phrase to triggers in a `HighlightSweepGroup`
`tone`	`"accent" \| "amber" \| "neutral"`	Default `accent`
`variant`	`"marker" \| "underline"`	Default `marker`
`speed`	`number`	Pixels per second. Default 900
`reducedMotion`	`boolean`	Force it on or off
`HighlightSweepGroup`	`value`, `defaultValue`, `onValueChange`	Which phrase is lit
`useHighlightSweepTrigger(id)`		Pointer and focus props for any element

Accessibility

The marker layer is decorative; the phrase and its citation stay plain text and links.
Triggers light the phrase on focus as well as on pointer over, so keyboard users get the same link.
In forced colors the marker uses the system Highlight color.

Motion

Each line sweeps at constant speed, 90 to 420 ms per line, and the last line eases out. Off is a 150 ms fade. Reduced motion keeps a 150 ms fade and no sweep.