Annotation text
Hand-drawn pen marks draw themselves around words in view: circles, underlines, boxes and strikes, chained one after another.
Text, in view, once, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/annotation-text.tsx https://motion-brew.com/r/annotation-text.tsxOne self contained file for React and Tailwind CSS: annotation-text.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { AnnotationText } from "@/components/annotation-text";
export default function Page() {
return (
<p className="text-3xl font-semibold">
Ship <AnnotationText type="circle">faster</AnnotationText>, sleep{" "}
<AnnotationText type="underline" delay={0.8}>better</AnnotationText>
</p>
);
}Props
| Prop | Type | Default | Description | |||
|---|---|---|---|---|---|---|
| children | ReactNode | The annotated words | ||||
| type | "underline" \ | "circle" \ | "box" \ | "strike" | "underline" | Mark to draw |
| color | string | "#e5484d" | Pen color | |||
| strokeWidth | number | 2.5 | Stroke width, px | |||
| delay | number | 0 | Seconds before drawing, for chaining marks | |||
| duration | number | 0.7 | Seconds the stroke takes | |||
| className | string | Classes on the wrapper |
More text
- Backspace text: Types a word, holds, backspaces it letter by letter and types the next, with a blinking caret.
- Binary text: Text scrambles into 0s and 1s, then decodes left to right.
- Wave text: A heading whose words warp like liquid under your cursor: noise-driven displacement bends each glyph into flowing bands, then it settles back to crisp type.
- Blur text: Words rise out of a soft blur one after another as the line scrolls into view, then settle sharp.