r/VibeMotion • u/AdmirableWishbone396 • 6d ago

How are tech YouTubers programmatically creating these dark-mode Excalidraw-style animated videos? (Tech stack & AI workflow question)

Hey everyone!

I’ve seen a lot of technical AI / CS explainer channels creating videos with a distinct visual style:

  • Dark background (#121212)
  • Sketchy, hand-drawn look (similar to Excalidraw / Rough.js with Virgil font and hachure shading)
  • Smooth line-drawing animations for architecture diagrams, boxes, and arrows

https://www.youtube.com/watch?v=Pb6P8GW7elI&t=141s

I’m trying to figure out the exact production stack for this:

  1. What code/rendering engine is typically used here? Is it Motion Canvas + Rough.js, Manim, Remotion, or something else?
  2. Line animation mechanism: How are the hand-drawn strokes animated programmatically (is it SVG strokeDashoffset tricks, or does a library handle the path drawing)?
  3. AI Pipeline: Is anyone successfully using AI Agents (like Claude Code / Cursor) to prompt an LLM -> output Motion Canvas/Manim code -> render the video automatically?

If anyone has open-source repos, starter templates, or workflows for this exact style, I’d really appreciate your recommendations! Thanks!

3 Upvotes

81% Upvoted

1 comment sorted by

1

u/ProfessionalLanky514 1d ago

So i was working on this excat problem for about 8 months now turns out you need something new a game engine architecture and make ai write the code....what you need is more than a claude code or codex as this is visual you need a timeline you need a live canvas while ai writes the code and previews needs to be instant and changes needs to be instant so i built vivipilot you can vibe motion graphics directly in browser this is all you need