ComponentsTyping
Caret morph
A caret that glides between words and reshapes to fit.
Installation
$ npx shadcn@latest add @textlab/caret-morphNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { CaretMorph } from "@/components/textlab/caret-morph/caret-morph";
<CaretMorph text="Point at any word in this sentence" />Variants
highlightbarblockProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "highlight" | "bar" | "block" | "highlight" | highlight selects the word, bar sits after it like a cursor, block inverts it. |
| autoplay | boolean | true | Tour the words while nobody is pointing. |
| interval | number | 1.3 | Seconds per word on the tour. |
| color | string | var(--tl-accent) | Highlight color. |
| as | ElementType | "p" | Rendered element. |
| 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
- Editor and writing-tool marketing where the caret is the product.
- Interactive pull quotes.
Skip it
- Real text inputs; use the browser caret.
- Long paragraphs; the tour takes too long to be noticed.
Accessibility and motion
Accessibility
- The sentence is focusable and named; Left and Right move the caret.
- Pointer and focus pause the tour.
Motion
- The caret glides in 200 ms with a strong ease-out and retargets mid-move, so hopping across words stays quick.
- Position and width ride one transform, so the glide never touches layout.
Reduced motion. The caret is hidden; the sentence is plain text.
Performance
- One absolutely positioned element. Word boxes are measured on resize, not per frame.