# Motion Text Annotate

Pricing copy that circles or highlights one-time payment or no credit card needed.

- id: `motion-text-annotate`
- Page: https://agentic-ui-kit.com/components/motion-text-annotate
- Live preview: https://agentic-ui-kit.com/live/component/motion-text-annotate

## Install

```bash
agentic-ui add motion-text-annotate
npx shadcn@4.17.0 add @agentic-ui/motion-text-annotate
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** hand-drawn-annotation, underline-variant, highlight-variant, box-variant, circle-variant, strike-variant, draw-on-view, manual-trigger-and-replay, deterministic-wobble-seed, annotation-state-callback, semantic-colour-tokens, final-state-without-js, reduced-motion-fallback
- **Intents:** communicate
- **Suits domains:** saas, ecommerce, devtools, knowledge, education
- **Interaction:** scroll, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Pricing copy that circles or highlights one-time payment or no credit card needed, Landing hero that underlines the key benefit once the headline is in view, Changelog or comparison copy that strikes through the old limit and boxes the new one
- **Avoid when:** Dense app screens, tables or forms, where decoration competes with data, Long phrases that would wrap across lines, More than two or three annotations visible at the same time, Protected enterprise screens where the personality does not allow the text group
- **Preserve when adapting:** plain-text-in-reading-order, decorative-svg-aria-hidden, transform-and-opacity-only, final-state-without-motion, highlight-aa-contrast, work-only-in-view
- **Replace when adapting:** variant, tone, trigger, timing, stroke-width, padding, seed
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** select, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion