Inky ClipsThe write-on effect, where text appears as though it is being written by hand, is a staple of motion design. Most tutorials for it are After Effects tutorials, and they’re long for a good reason: a normal font has no idea what order its strokes were written in. Someone has to tell it. This guide explains what that involves, a much faster way to get the same result in a browser, and the cases where After Effects is still the right tool.
How it’s usually done in After Effects
The classic technique goes roughly like this:
- Type the text and convert it to shapes, or create masks from the text outlines.
- With the pen tool, draw a path that follows each letter the way you’d write it, one stroke at a time, often on a separate layer per word.
- Add a Stroke effect (or Trim Paths on a shape layer) to those paths and keyframe its end from 0 to 100%.
- Use the animated stroke as a track matte so it reveals the real letters underneath.
- Adjust the keyframes letter by letter so the speed feels like a hand, and fix the places where a thick stroke leaks into the next letter.
It looks great, and it takes anything from twenty minutes for a short word to an afternoon for a sentence in a connected script. Change one word and you redraw those paths. Plugins and templates speed it up, but they cost money, and you still need After Effects.
The shortcut: fonts that already know how they’re written
Single-line fonts (also called stroke or engraving fonts) are drawn as pen paths rather than filled shapes. Each letter is one or more lines with a start and an end, in the order a pen would travel. Animating them is just a matter of drawing those lines progressively, which is what Inky Clips does. No masks and no keyframes; type different words and the animation is already right.
The clip shows “No keyframes needed” written in Allure.
Ink: White
Doing it in the browser
Open your clip
Sign in to the editor and click Choose video. The file is read in place; it isn’t uploaded.
Add and type
Put the playhead where writing should begin and click Add text. Type your words.
Choose a pen
In the font groups, Handwriting holds the scripts, Clean and Titles hold print-style pens. Chips with a small pen icon are single-line fonts.
Time it
Draw time replaces your keyframes: it is the time from first stroke to last. Easing replaces graph-editor work, with Smooth, Linear and Ease out.
Export
Click Export, then Download MP4. It renders at your video’s resolution with the original audio.
What maps to what
| In After Effects | In Inky Clips |
|---|---|
| Hand-drawn stroke paths | Built into the single-line fonts |
| Stroke end keyframes | Draw time and Start |
| Graph editor easing | Easing: Smooth, Linear, Ease out |
| Stroke width and colour | Line width and Line colour |
| Stagger per letter or per layer | Draw: One by one or All at once |
| A particle or brush at the tip | Pointer: Glowing dot, Spark, Comet, Pencil |
| Opacity fade out | Fade out at |
| Drop shadow or stroke for contrast | Outline and Background |
Outline fonts write on too, differently
Bold fonts like TikTok Sans, Montserrat and Atkinson are ordinary filled typefaces, so they can’t be written with a single line. Inky Clips traces their outlines and then fills them in. It’s a different, cleaner look that suits captions and bold titles more than handwriting. Choosing a handwriting font for video goes through the differences.
When you still want After Effects
To be fair to the long way, here is what this approach can’t do:
- Your own font or signature. You choose from the built-in fonts; you can’t import a font file or trace a logo.
- Custom paths. Text is written along its letters only. There are no arrows, underlines or doodles.
- Per-letter control. Timing is set for the whole text, not keyframed letter by letter.
- 3D, motion tracking or text that follows a moving object. Text sits still where you place it.
- A transparent file. Export is MP4, which has no alpha channel. There is a workaround with a black or green background in the overlay guide.
For everything else (titles, labels, hooks, captions and quotes) the font-based approach gets you to the same place in a couple of minutes, and changing a word costs nothing.