Circle annotate

A pen circles the word that matters.

The only plan that scales with you

Installation

$ npx shadcn@latest add @textlab/circle-annotate

Needs @textlab in your components.json. Setup takes a minute.

Usage

usage.tsx

import { CircleAnnotate } from "@/components/textlab/circle-annotate/circle-annotate";

<p>The only plan that <CircleAnnotate>scales</CircleAnnotate> with you</p>

Variants

circleboxbracket

Props

Prop	Type	Default	Description
children*	ReactNode	–	The word or phrase to mark.
variant	"circle" \| "box" \| "bracket"	"circle"	Loop around it, frame it, or bracket it.
color	string	var(--tl-accent)	Pen color.
thickness	number	2.5	Stroke width in px.
padding	number	0.25	Room around the word in em.
as	ElementType	"span"	Rendered element.
trigger	"mount" \| "inView" \| "hover" \| "manual"	"inView"	What starts the animation. manual follows `active`.
active	boolean	false	Drives trigger="manual".
once	boolean	true	In view: play once instead of on every entry.
delay	number	0	Seconds before the first part moves.
duration	number	0.9	Seconds each part takes.
reducedMotion	"user" \| "always" \| "never"	"user"	user follows the OS setting; always shows the still version.
className	string	–	Merged onto the root.

When to use it

Reach for it

Pointing at the one word that sells the sentence.
Pricing tiers, comparisons and testimonials.

Skip it

Several marks in one view; each one weakens the others.
Buttons and links.

Accessibility

Decorative SVG; the text is untouched.
Add <strong> or <mark> if the emphasis must be conveyed to assistive tech.

Motion

One continuous stroke with an overshoot, drawn with the standard ease.

Reduced motion. The mark is drawn from the start.

Performance

One SVG path animated with pathLength.