Highlighter

Hand-drawn annotations on text using Rough Notation, with optional in-view animation.

Realce e anotações com traço orgânico (rough-notation), com animação opcional ao entrar na viewport via Motion (useInView). O componente está em @zexon/ui/components/highlighter.

Instalação

No monorepo Zexon, @zexon/ui já inclui rough-notation e motion. Importa assim:

import { Highlighter } from "@zexon/ui/components/highlighter";

Uso

Padrão

Exemplo simples com highlight padrão.

Tipos de anotação

A prop action aceita os mesmos tipos que o Rough Notation: highlight, underline, box, circle, strike-through, crossed-off, bracket. Com isView, a animação só corre quando o elemento fica visível (útil em páginas longas).

Todas as anotações

action="highlight"HighlightPreenchimento semitransparente por baixo do texto.

Texto com realce em marca-texto.

action="underline"UnderlineLinha ondulada sob o texto.

Sublinhado à mão.

action="box"BoxRetângulo à volta do bloco.

Conteúdo dentro da caixa.

action="circle"CircleElipse à volta do texto.

Destaque circular.

action="strike-through"Strike-throughLinha que atravessa o texto.

Texto riscado.

action="crossed-off"Crossed-offDuas diagonais (X) sobre o texto.

Marcado como concluído ou inválido.

action="bracket"BracketParêntesis ou chavetas laterais.

Bloco entre suportes.

Props principais

Prop	Tipo	Predefinição	Notas
`action`	ver tipos acima	`highlight`	Estilo da anotação
`color`	`string`	`#ffd1dc`	Cor do traço / preenchimento
`strokeWidth`	`number`	`1.5`	Espessura do traço
`animationDuration`	`number`	`600`	Duração da animação (ms)
`iterations`	`number`	`2`	Passadas do desenho
`padding`	`number`	`2`	Espaço em torno do texto
`multiline`	`boolean`	`true`	Vários retângulos em texto que quebra linha
`isView`	`boolean`	`false`	Se `true`, só mostra quando visível na viewport

O tipo HighlighterAction é exportado para reutilizares em listas ou configs.

Hover Card

Input