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#

PropTypeDefault
color

Colour of the highlight, as any CSS colour.

stringtext colour at 14%
duration

Duration of the stroke, in seconds.

number0.8
delay

Delay once in view, in seconds.

number0