Use Case · Education

Show students how systems work.

Reading about a Kafka producer is different from <em>seeing</em> the message travel. Flow Mode turns static diagrams into living explainers — no Adobe stack required.

Start Free — No Credit Card See pricing
Diagram-as-presentation
Flow Mode
Animated arrows + markers
Yes
Embed in any LMS
1 tag
Languages for code blocks
200+

Features

Built for teachers who care about clarity

Replace three tools (draw.io + After Effects + GIF converter) with one URL.

Flow Mode

ByteByteGo-style animated diagrams. Place icons at nodes, connect with dashed arrows, and add looping flow markers that travel between them. Perfect for system architecture, request flows, biological systems.

Step-by-step morphing

Layer reveals across slides. Show the simple version on slide 1, then "and now we add the cache layer…" on slide 2 — the existing nodes stay put while new ones morph in.

Cinema Mode

Zoom into the part of the system you're explaining. Pull back to show context. Drop students inside a database before zooming out to the request flow. Camera tour with one-click auto-frame.

Embed anywhere

Drop the embed tag in your blog, Notion, course platform, or LMS. Web component works without iframes. Students see the diagram playing inline — no "click here to watch the video" friction.

Export to MP4 / GIF

Frame-perfect renders done in the cloud — no screen recording. Upload to YouTube, embed in PDF coursework, or attach to email. The same source plays everywhere students consume content.

Code that types itself

For programming courses: code blocks with typewriter animation. Students see the function written line-by-line, syntax-highlighted, in any of 200+ languages.

Templates

Real explainer decks

Click any template to import and adapt to your course.

Flow Mode

How Kafka Works

Producer · broker · consumer with animated message flow

Tutorial

CSS Flexbox vs Grid

Comparing layouts with morphing live demos

Lecture HD

SOLID Principles

Programming concept walkthrough · 8 slides · keyboard nav

Cinema

Concept Tour

Cinema Mode walking students through a topic

Before Animot, I'd explain the Kafka architecture with a static diagram and ask students to "imagine" the message flow. Half of them got it. Now I show them the exact same diagram with markers actually traveling between producer and consumer — the engagement is night and day.

Prof. Diego K. · Distributed systems · undergrad CS

FAQ

Common questions

Can students interact with the diagram or only watch? +
Both. Embed with controls attribute and students get play / pause / scrub controls. Embed without controls and it autoplays + loops as a passive explainer. Up to you per page.
Will it work in my LMS (Canvas, Moodle, etc.)? +
Yes — the embed is a web component that works in any HTML context. Some LMSes restrict raw HTML; in those cases use the iframe embed (still one tag) or upload the MP4 directly.
Can I export to a format I can put in PDF coursework? +
Export to MP4 for video, GIF for animated graphics, or static PNG for the final frame. PDF doesn't support video natively but most modern PDF readers support it via Adobe extensions.
How long does it take to build a Flow Mode diagram? +
A simple architecture (3–5 nodes) takes about 15 minutes the first time. Once you've built one, the same template lets you swap content in 5 minutes. Start from a template.
Is there a free tier for educators? +
The Free tier (3 decks, all features) works for most courses. If you teach a series with more decks, the Pro plan ($39.88/year launch deal · renews at $69.97) covers it with unlimited decks and no watermark. See pricing.

Ready

Stop saying "imagine the data flowing."

Just show them. Free tier includes 3 decks and all features.

Start Free — It's Free Forever