Highlight Text

A marker stroke draws behind the words once they scroll into view, and follows them across line breaks.

Dependenciesmotion

Every block shares the same primitives, so any combination looks like one page.

Installation#

pnpm dlx shadcn@latest add @balick/highlight-text

Or pass the full URL: https://ui.balick.me/r/highlight-text.json

Usage#

import { HighlightText } from "@/components/ui/highlight-text"

export function Pitch() {
  return (
    <p>
      Every block shares the same primitives, so{" "}
      <HighlightText>any combination looks like one page</HighlightText>.
    </p>
  )
}

Props#

Prop	Type	Default	Description
`color` Colour of the highlight, as any CSS colour.	`string`	text colour at 14%	Colour of the highlight, as any CSS colour.
`duration` Duration of the stroke, in seconds.	`number`	0.8	Duration of the stroke, in seconds.
`delay` Delay once in view, in seconds.	`number`	0	Delay once in view, in seconds.