Handwriting Text
Write a string on, character by character, with a nib riding the wet edge. Install with npx remotion-ui@latest add handwriting-text.
PrimitivePrimitivesAdvanced
$ npx remotion-ui@latest add handwriting-textReveals a line as if it were being written.
import { HandwritingText } from "@/remotion/primitives/handwriting-text";
<HandwritingText
text="Signed by hand"
staggerInFrames={9}
penColor="#e8b86d"
/>This takes a string; path-draw takes a path
That is the whole distinction, and it decides which one you want. A string has
no stroke order — nothing in a font records that S starts at the top right —
so the ink here is revealed by a left-to-right wipe per glyph with a nib riding
the wet edge. For a signature or a logogram, where the stroke order is the
effect, give path-draw the actual path.
order is not a prop
Writing runs left to right. Re-ranking the stagger would produce a word that assembles out of sequence, which reads as a glitch rather than as a hand.
The hand
wobble tilts each character and drifts it off the baseline by a hashed amount.
It is fixed per character, not animated, so the word does not wriggle once it is
written. Set it to 0 for machine-even type.
penSize is in em; 0 hides the nib.
Fonts
The default family is a script stack ending in the generic cursive, which
resolves to whatever the render machine happens to have. Pass a webfont through
fontFamily for a result that is identical everywhere.
Takes a string, so there is no stroke order — the ink is wiped on per glyph. `path-draw` takes a path and strokes it properly. `order` and `mode` are deliberately not props.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/handwriting-text- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: text, penSize, penColor, inkSoftness, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { HandwritingText } from "@/remotion/primitives/handwriting-text";
<HandwritingText text="Signed by hand" staggerInFrames={9} penColor="#e8b86d" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | The line that gets written. |
| penSize | number | 0.14 | Diameter of the nib, in em. 0 hides it. |
| penColor | string | - | Nib colour. Defaults to `color`. |
| inkSoftness | number | 0.18 | Softness of the ink edge, as a share of one glyph. |
| wobble | number | 1.6 | Per-character tilt and baseline drift, in degrees. Fixed, not animated. |
| staggerInFrames | number | 3 | Frames between one character and the next. This is the writing speed. |
| durationInFrames | number | 10 | Frames one character takes to be drawn. |
| delayInFrames | number | 0 | Frames before the first stroke. |
| exitAtInFrames | number | - | Frame the ink starts fading on. |
| fontFamily | string | script stack | Ends in generic `cursive`; pass a webfont for identical renders everywhere. |