labsUI

Marker

Highlighter-pen <mark> in four tints that wraps cleanly across lines and can draw itself on, left to right, when it scrolls into view. Highlight marks every match of a search in a string, for transcripts and search results.

npx @kznlabs/labsui add marker

A clip is worth sharing when it is short, has a clear moment and ends before anyone asks why they are still watching.

2 matches

  1. Okay, the boss is at half health, swap to the long bow.
  2. Jane, hold the left door, I will pull it toward the bridge.
  3. Wait, the bridge is breaking. Jump, jump now!
  4. That was the cleanest boss fight we have ever had.
  5. Somebody clip that before it is gone.
import { Highlight, Marker } from "@/components/ui/marker";export function Pitch() {  return (    <p>      Clips that are <Marker draw>short</Marker> get shared{" "}      <Marker draw delay={0.3} color="green">        three times more      </Marker>      .    </p>  );}// Search hits in a transcript line; query can be one term or several.export function TranscriptLine({  text,  query,}: {  text: string;  query: string;}) {  return <Highlight text={text} query={query} />;}

<Marker>

Highlighter-pen <mark>. Wraps across lines cleanly; draw sweeps it on in view (instant with reduced motion, fully shown without JS).

  • colordefault "yellow"
    "primary" | "yellow" | "green" | "red"

    Highlighter color.

  • delaydefault 0
    number

    Seconds before drawing; stagger several markers in one paragraph.

  • drawdefault false
    boolean

    Draws the highlight on, left to right, the first time it scrolls into view.

PropTypeDefault
color

Highlighter color.

"primary" | "yellow" | "green" | "red""yellow"
delay

Seconds before drawing; stagger several markers in one paragraph.

number0
draw

Draws the highlight on, left to right, the first time it scrolls into view.

booleanfalse

<Highlight>

Marks every case-insensitive match of query (one term or several) inside text.

  • query*
    string | string[]

    Term or terms to mark.

  • text*
    string

    Full text to search in.

  • color
    "primary" | "yellow" | "green" | "red"

    Highlighter color.

PropTypeDefault
query*

Term or terms to mark.

string | string[]—
text*

Full text to search in.

string—
color

Highlighter color.

"primary" | "yellow" | "green" | "red"—

* required. Every component also takes className.