Highlighter.tsx
An animated text annotation component in Plainform using rough-notation for hand-drawn style highlights, underlines, and more
The Highlighter component adds animated hand-drawn style annotations to text using the rough-notation library. It supports multiple annotation styles and triggers animations when the element comes into view.
Usage
Basic Examples
import { Highlighter } from '@/components/ui/Highlighter';
// Underline
<h1>
<Highlighter action="underline" color="#758cff">
Headline goes here with a strong value proposition
</Highlighter>
</h1>
// Highlight
<p>
This is <Highlighter action="highlight" color="#ffd1dc">
important text
</Highlighter> to remember.
</p>
// Box
<h2>
<Highlighter action="box" color="#ff6b6b" strokeWidth={2}>
Special Offer
</Highlighter>
</h2>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | Required | Content to annotate |
action | AnnotationAction | 'highlight' | Type of annotation |
color | string | null | Annotation color. When omitted, the annotation uses currentColor from the wrapped text |
strokeWidth | number | 1.5 | Line thickness |
animationDuration | number | 600 | Animation duration (ms) |
iterations | number | 2 | Number of drawing passes |
padding | number | 2 | Padding around annotation |
multiline | boolean | true | Support multi-line text |
isView | boolean | false | Trigger on scroll into view |
Annotation Actions
Available action values:
highlight- Fills background with colorunderline- Draws line under textbox- Draws box around textcircle- Draws circle around textstrike-through- Draws line through textcrossed-off- Draws X through textbracket- Draws brackets around text
By default, color is not set. This lets the annotation inherit the current text color, so Tailwind classes like text-brand-highlight or text-foreground can control the annotation color without passing a hex value.
<Highlighter action="highlight" color="#ffeb3b">Highlighted</Highlighter>
<Highlighter action="underline" color="#758cff">Underlined</Highlighter>
<Highlighter action="box" color="#4caf50">Boxed</Highlighter>
<Highlighter action="circle" color="#ff9800">Circled</Highlighter>Features
Scroll-Triggered Animation
Animate when element enters viewport:
<Highlighter action="underline" color="#758cff" isView={true}>
Animates when visible
</Highlighter>Multi-line Support
Automatically handles text wrapping:
<Highlighter action="highlight" color="#ffd1dc" multiline={true}>
This long text wraps across multiple lines naturally.
</Highlighter>Responsive Resizing
Annotation automatically redraws on window resize or content changes.
Customization
// Thick stroke
<Highlighter action="underline" strokeWidth={3}>Thick</Highlighter>
// Slow animation
<Highlighter animationDuration={1200}>Slow</Highlighter>
// Rougher effect
<Highlighter iterations={3}>Rough</Highlighter>
// More padding
<Highlighter action="box" padding={10}>Padded</Highlighter>Common Use Cases
<h1 className="text-6xl font-bold">
<Highlighter action="underline" color="#758cff">
Build faster
</Highlighter>
{' '}Launch smarter
</h1><p className="text-xl">
Get started with{' '}
<Highlighter action="highlight" color="#ffeb3b">
zero configuration
</Highlighter>
</p><div className="text-4xl font-bold">
<Highlighter action="circle" color="#ff9800">
$49
</Highlighter>
<span className="text-lg">/month</span>
</div>Implementation Details
- Client Component: Uses React hooks and motion/react
- Animation: Uses rough-notation library for hand-drawn effects
- Performance: ResizeObserver tracks dimension changes efficiently
- Cleanup: Annotation removed on unmount to prevent memory leaks
Related
- Hero Component - Uses Highlighter for title
- Customize Hero - Change hero headline
- rough-notation - Underlying library
How is this guide ?
Last updated on