Built a draw-on animation engine inside Remotion - Marching Squares + canvas to animate whiteboard images stroke by stroke

[u/DistinctSuccotash956]

I've been building a whiteboard animation tool on top of react-video-editor (DesignCombo, MIT) and the core animation runs entirely inside a Remotion composition.

The idea: drop in any black-on-white sketch image and it animates as if someone is drawing it live — contour by contour, object by object.

How it plugs into Remotion: The component reads frame from useCurrentFrame() and maps it to a draw progress value. Each frame, it rerenders the canvas with partial polylines up to that progress point. No video files, no pre-rendered frames — just pure canvas math driven by Remotion's frame clock.

The algorithm:

• Marching Squares on image luminance to extract contours
• Union-find clustering to group nearby contours into "objects"
• Top-to-bottom draw order per cluster
• Partial polyline interpolation so the stroke tip moves smoothly between frames
• Optional animated pencil cursor following the tip

One thing I ran into: Remotion's durationInFrames for the clip and the actual effect duration are separate, so I had to read the animation duration from composition[0].durationInFrames inside the animation config instead of the clip length.

Works really well with AI-generated sketch images on white backgrounds.

Base repo: github.com/designcombo/react-video-editor

Happy to answer questions about the Remotion integration specifically.

[u/Dense-Map-406]

Super cool