Text Highlighter

Rough-notation powered text annotations — highlight, underline, box, circle, strike-through, and more, with optional scroll-triggered activation.

Good Design Whispers.

action

color

strokeWidth

animationDuration

iterations

padding

multiline

Installation

Usage

import { TextHighlighter } from '@/components/odysseyui/text-highlighter';

export default function Page() {
  return (
    <p className="text-2xl font-semibold">
      <TextHighlighter action="highlight" color="#51A2FF" iterations={3}>
        Good Design Shouts.
      </TextHighlighter>
    </p>
  );
}

Examples

Underline

<TextHighlighter action="underline" color="#f97316" strokeWidth={2}>
  Great Design Whispers.
</TextHighlighter>

Box

<TextHighlighter action="box" color="#a855f7" strokeWidth={1.5}>
  Timeless Design Endures.
</TextHighlighter>

Circle

<TextHighlighter action="circle" color="#10b981" strokeWidth={1.5}>
  Details Make the Difference.
</TextHighlighter>

Scroll-triggered

Pass isView to delay the annotation until the element scrolls into view.

<TextHighlighter action="highlight" color="#ffd1dc" isView>
  Appears when scrolled into view.
</TextHighlighter>

API Reference

TextHighlighter

Prop	Type	Default
`children`	`React.ReactNode`	-
`action?`	`"highlight" \| "underline" \| "box" \| "circle" \| "strike-through" \| "crossed-off" \| "bracket"`	`"highlight"`
`color?`	`string`	`"#ffd1dc"`
`strokeWidth?`	`number`	`1.5`
`animationDuration?`	`number`	`600`
`iterations?`	`number`	`2`
`padding?`	`number`	`2`
`multiline?`	`boolean`	`true`
`isView?`	`boolean`	`false`
`active?`	`boolean`	`true`

Text Highlighter

On this page