Shadcn.io is not affiliated with official shadcn/ui
Annotation Text
Handwritten SVG ink annotations — circle, underline, strikethrough, and arrow — drawn over specific words on view, hover, or mount, with hand-drawn wobble and pathLength stroke reveals for React applications built with Next.js, motion, and Tailwind CSS.
Annotation Text preview
The classic blog-and-tutorial trick of drawing a hand-scrawled mark over a single word, productionised. You pass a sentence and a list of words to annotate, each tagged with a type — circle, underline, squiggly underline strikethrough, or curved arrow — and the component draws each mark over its target word as if pulled live from a notebook. Strokes use SVG paths animated via Motion's pathLength, with a deterministic per-annotation seed driving subtle wobble so two siblings never look identical. Triggers on viewport entry, hover, or mount, with configurable stagger between marks. Built for blog highlights, marketing emphasis, before/after callouts, and product walkthroughs where one word matters more than the rest.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the annotation-text text effect into my projectRelated Components
Highlight Text
Animated marker highlight effect
Motion Highlight
Dynamic background highlight animations
Line Shadow Text
Animated diagonal line shadow effect
Stamp Text
Letters that stamp in like rubber stamps
Mask Reveal Text
Sliding panel wipe reveal
Writing Text
Word-by-word reveals with natural rhythm
FAQ
Was this page helpful?
Sign in to leave feedback.
Anagram Text
Letter-level rearrangement that physically slides each glyph from its position in the current word to its destination position in the next word with motion spring physics for React and Next.js applications.
Backspace Text
Typewriter that types a phrase, deletes back to the longest common prefix with the next phrase, then types the next, with a blinking cursor for React, Next.js, and motion.