MotionzHandwriting
A word written on with a pen: a gradient monoline stroke that draws itself in.
remotion
Installation
Terminal
npx shadcn@latest add https://motionz.dev/r/handwriting.jsonProps
| Name | Type | Default | Description |
|---|---|---|---|
| d | string | – | One monoline SVG path, drawn in order like a pen stroke. |
| viewBox | string | – | The path's viewBox, padded for the stroke width. |
| height | number | – | Rendered height in px; width follows the viewBox. |
| at | number | – | Frame the pen touches down. |
| frames | number | 60 | Frames to write the whole path. |
| colors | string[] | ["#1d1d1f"] | Gradient stops along the writing direction. |
| strokeWidth | number | 20 | Stroke width in viewBox units. |
| slant | number | 0 | Forward lean in degrees. |
| id | string | "handwriting" | Gradient id; make it unique when you draw more than one. |
| style | CSSProperties | – | Styles on the svg, e.g. margins to sit it on a baseline. |