velements

Brush Stroke Animations

Brush strokes: handmade texture for titles and reveals

Updated September 18, 20263 min read

How do you animate a brush stroke?

Pick a brush preset and set the stroke color, width and speed. The stroke draws itself along a path and can wipe the frame, highlight a word or splatter behind a title. Export transparent WebM to keep the paper texture over your own footage.

A painted mark adds a human hand to an otherwise perfect frame. These presets wipe with a brush, highlight with a marker, splatter and scribble, all in your colors and at your pace.

Five brush stroke animations presets to start from

Hover any card to play it. Opening one loads it in the editor with every control unlocked.

  • Brush Stroke Wipe

    1.5s

    Bold, textured paint strokes zigzag across the frame to cover the cut, then get brushed away again.

  • Marker Highlight

    3s

    A chunky highlighter sweeps behind your words like a real marker, perfect for emphasizing key phrases.

  • Splatter Reveal

    1.5s

    Colorful paint splats slap onto the screen with flying drops until the frame is covered, then vanish in a new pattern.

  • Scribble Fill

    1.5s

    A frantic marker scribble fills the whole frame at an angle, then scribbles itself away. Hand-made and fun.

  • Dry Brush Bars

    2s

    Rough dry-brush bars streak across in layers with visible bristle texture, a perfect gritty backdrop for titles.

All brush stroke animations

How to make one in the browser

  1. 01Open a brush stroke animations presetBrowse the Brush Stroke Animations category and open the preset closest to what you need. It loads in the editor with every control unlocked.
  2. 02Make it yoursRewrite the text, set your brand colors and font, adjust easing and duration, and switch the aspect ratio for the platform you are posting to.
  3. 03Export the clipChoose MP4 for a normal track or transparent WebM for an overlay, pick a resolution up to 8K, and the file renders on your own machine.

Which format should you export?

Use MP4 when the clip sits on its own track or fills the frame. Use transparent WebM whenever it has to float over your own footage: the alpha channel is real, so no keying or blend mode is needed.

Format
MP4 H.264 · WebM VP9
Alpha
Transparent WebM
Resolution
720p to 8K
Aspect
16:9 · 9:16 · 1:1 · 4:5
License
Commercial use included

Three tips that make it look intentional

  • Use a marker highlight behind a keyword rather than around a whole sentence.
  • Off-white and muted tones read as ink; pure saturated colors read as UI.
  • Let the stroke finish slightly before the word it reveals settles.

Frequently asked

Can I highlight my own text?
Yes. Marker and highlight presets take your own words and size the stroke to them.
Does it work on a light background?
Set your own stroke and background colors, so dark strokes on light plates work as well as the reverse.

Keep reading

  • Number Counters

    Number counters: make a statistic land

    Choose a counter preset, set the start and end values, decimals, prefix and suffix, then pick the duration and easing. The number counts up in the preview exactly as it will in the export, which you can drop into a report, an ad or a social post.

    Read the guide

  • Animated Infographics

    Animated charts: data that explains itself in seconds

    Enter your values and labels into a chart preset, set the colors, and choose how fast the bars grow or the line draws. Export MP4 for a slide or transparent WebM to place the chart over a presenter, with no spreadsheet or plugin involved.

    Read the guide

  • Loading Animations

    Loading animations: spinners and progress that feel fast

    A good loader starts instantly, loops seamlessly and suggests progress rather than time. Keep the motion under one and a half seconds per cycle, use a single accent color, and export a transparent WebM so it can sit over any app screen or video.

    Read the guide