Inspiration
I kept seeing impressive demos of AI-generated advertisements and motion graphics. They looked beautiful, but they were not designed for education. Educational content requires more than visual spectacle—it needs conceptual clarity, deliberate pacing, readable diagrams, and a sequence that helps the learner build understanding.
I love building educational tools, and whenever I encounter a new technology, my first thought is: How can this be applied to education?
That question led me to build Chalk: an agentic educational video generator that transforms a question into a structured whiteboard explainer video. The goal is not simply to generate something visually interesting, but to produce a video that genuinely helps someone learn.
How I built it
Chalk uses a multi-stage agentic pipeline:
- A planning agent breaks the topic into a clear learning progression.
- A narration agent writes an explanation with appropriate pacing.
- A visual director converts each idea into a structured scene graph using educational visual grammar.
- An asset layer searches a curated icon library and generates missing visuals when necessary.
- A spatial layout engine arranges diagrams, labels, connectors, and annotations while repairing overlaps.
- A timeline system synchronizes narration with progressive visual reveals.
- A deterministic renderer converts the approved scene plan into reproducible frames and a downloadable video.
I also added automated quality checks for layout collisions, text readability, visual density, scene composition, narration timing, and media duration.
Challenges
The biggest challenge was that educational videos cannot rely on random, attractive imagery. Every visual must support what is being explained at that exact moment.
Creating consistently readable layouts was particularly difficult. Text, icons, arrows, and labels could overlap or become too small when a scene contained many ideas. I addressed this by building constraint-based layout repair, connector routing, semantic grouping, density checks, and visual-quality feedback loops.
Another challenge was balancing AI creativity with determinism. The agents should be able to reason about how to explain a topic, but the rendering system must remain predictable and testable. I solved this by using AI for planning and directing while representing its decisions through a structured intermediate format that a deterministic rendering engine can validate and reproduce.
What I learned
I learned that prompting alone is not enough to build a reliable educational system. Professional results require structured representations, clear visual rules, validation, repair loops, and deterministic execution.
I also learned that visual grammar is not just decoration. Hierarchy, spacing, timing, icon consistency, and progressive disclosure directly affect whether a learner can understand an explanation.
Most importantly, this project reinforced my belief that generative AI can do more than create impressive demos. When it is designed around how people learn, it can become a tool for making difficult ideas clearer and more accessible.
Built With
- convex
- ffmpeg
- google-cloud-text-to-speech
- hls.js
- lucide-icons
- next.js
- node.js
- openai-api
- radix-ui
- react
- rough.js
- sharp
- svg
- tailwind-css
- typescript
- zod
Log in or sign up for Devpost to join the conversation.