Marker Highlight

Installation

pnpm dlx shadcn@latest add @cleverui/text-marker-highlight

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { TextMarkerHighlight } from '@/components/ui/text-marker-highlight'

Exampletsx

import { TextMarkerHighlight } from '@/components/ui/text-marker-highlight'

export default function TextMarkerHighlightDemo() {
  return (
    <div className="mx-auto flex min-h-[420px] max-w-3xl flex-col justify-center gap-6 px-6 py-24">
      <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
        Marker swipe · accent ink
      </p>
      <TextMarkerHighlight
        as="h1"
        text="Cut the noise. Keep the signal."
        highlight="Keep the signal"
        className="text-4xl sm:text-5xl"
      />
      <p className="max-w-md text-sm leading-relaxed text-muted-foreground">
        The phrase draws itself in when it enters view, one hand-drawn pass, then done.
      </p>
    </div>
  )
}

API reference

TextMarkerHighlight accepts the following props.

Prop	Type	Default	Description
`text`*	`string`	–	–
`highlight`*	`string`	–	substring of text that receives the marker swipe
`as`	`'h1' \| 'h2' \| 'h3' \| 'p' \| 'span'`	`'h2'`	rendered element, keep heading levels semantic in context
`delay`	`number`	`0.2`	seconds before the swipe starts

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Related components

Annotate Callouts

Inline annotation system, marked phrases carry numbered mono superscripts wired to margin notes that reveal as each mark scrolls into view. Editorial footnotes, live on the page.

Baseline Wave

A wave travels the baseline once, characters lift and settle as it passes, like a breeze crossing the line. One pass, then stillness.

Blur Focus

Words rack into focus one after another, a camera pulling the sentence sharp. Blur, opacity and a breath of letter-spacing resolve in reading order.

Line Echo

A display line trailed by two faint offset echoes of itself that converge into one crisp line on view, print misregistration settling into register. One pass, then stillness.

Mono Caption Pair

A display statement locked to its mono caption, the caption types on only after the display settles, caret in primary ink. The library's two voices bound into one component.

Neon Bend

The tube bends first, unlit glass traces the headline stroke by stroke, gas ignites in a slow warm-up, and the React neon sign settles steady in Tailwind-token primary glow with an ink core.

Frequently asked questions

How do I install the Marker Highlight component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/text-marker-highlight`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Marker Highlight require?

Marker Highlight uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Marker Highlight to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code