rough-remotion

Animated hand-drawn diagrams rendered to MP4 using Remotion and rough.js.

5-second 1080×1080 animated flow diagrams that draw themselves on screen — deterministic output, code-driven, no timeline editors.

Why

Most explainer video tools give you either stock animations or a timeline editor that takes longer than just drawing the thing. I wanted something where I edit a data array, run a command, and get an MP4 with a hand-drawn aesthetic that actually looks good in a LinkedIn feed. This is that.

What it does

• Generates animated SVG diagrams with a sketch aesthetic using rough.js
• Renders to MP4 (or GIF) via Remotion's programmatic video pipeline
• Includes a split-screen composition — talking head on top, animated diagram drawing itself on the bottom — built for social content

Compositions

Composition	Description	Output
FlowDiagram	Standalone animated flow: title → boxes → arrows drawing on screen	1080×1080, 30fps, 5s
SplitDiagram	Split-screen: top half plays a video, bottom half draws the same diagram	1080×1080, 30fps, 5s

How the animation works

• rough.js generator() instantiated at module level — drawables computed once, seeded for deterministic output across renders
• stroke-dasharray / stroke-dashoffset drives the "drawing on" effect — offset animates from 4000 → 0 per path
• interpolate() + Easing.out(Easing.cubic) for natural-feeling draw timing with frame-window clamping
• OffthreadVideo + staticFile() in SplitDiagram for hybrid video + animated overlay rendering

Tech stack

Layer	Tech
Video engine	Remotion 4.0 (@remotion/cli, compositions, frame interpolation)
Drawing	rough.js 4.6 (seeded SVG path generation, hachure fills)
UI	React 18, TypeScript 5 (strict)
Font	@remotion/google-fonts (Caveat handwriting)

Usage

npm install

# Live preview in Remotion Studio
npm run start

# Render to MP4
npm run render           # → out/flow-diagram.mp4
npm run render:split     # → out/split-diagram.mp4

# Render to GIF
npm run render:gif       # → out/flow-diagram.gif

For the SplitDiagram composition, place a video file at public/talking.mp4.

Extending

• Edit the BOXES array in FlowDiagram.tsx to change diagram content, colors, and layout
• Adjust roughness, hachureGap, fillStyle per box for different sketch aesthetics
• Change FLOW_DURATION_SECS and FLOW_FPS in Root.tsx for different video specs
• For 16:9 output (YouTube): set FLOW_WIDTH=1920, FLOW_HEIGHT=1080
• Add new compositions in Root.tsx — each is an independent React component

License

MIT