Text Scribble
Hand-drawn scribble, underline, and strike marks that draw themselves onto text.
textscribbleunderlinestrike throughannotationsvgtypography
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The inline content to annotate. |
type | "scribble" | "underline" | "strike-through" | "scribble" | Annotation style. All three stroke on top of the text and track line wrapping. |
color | string | chili (brand) | Stroke color. Defaults to the Wensity brand (chili). |
strokeWidth | number | 2 | Stroke width in CSS pixels. |
duration | number | 0.9 | Seconds for the draw-on. |
delay | number | 0 | Seconds to wait before drawing. |
trigger | "view" | "hover" | "mount" | "view" | When to draw. View draws once on-screen; hover draws and retracts. |
iterations | number | 2 (scribble) / 1 | Sketch passes for the hand-drawn look. Clamped 1–4. |
padding | number | 2 | Extra px around the text before the mark is drawn. |
drawn | boolean | - | Force the draw state. When omitted the trigger drives it; reduced motion always draws instantly. |
as | keyof JSX.IntrinsicElements | "span" | Outer element tag. |