doodleloop

An AI whiteboard that turns prompts into editable hand-drawn visuals, then replays your board as an animated story.

Comment

Inspiration

I enjoy when creators like Theo, Primeagen, or calebwritescode provide educational content along with diagram/graph design. I think it helps me learn quite a bit. So I wanted to make that style of content attainable on whatever topic I'm interested in.

What it does

Doodleloop is an AI-native infinite whiteboard for creating visual explanations. Users can ask it to draw architecture diagrams, flowcharts, charts, timelines, tables, and other visuals through a chat interface. The canvas is fully editable; once the user is happy with their canvas, they can click on the 'Video' button to generate a video walkthrough of their canvas complete with a narrated explanation. Fully .mp4 exportable.

How we built it

Mostly by spamming 5.6 Sol Extra High, but it's written in Typescript with Excalidraw, Remotion, and Zod as key libraries. I made a custom RegionGraph that serves as a sematic layout engine; this handles coordinates, nesting, reflow, and collision repair deterministically.

Challenges we ran into

Maintaining scene awareness after user edits, as well as the initial problem of getting the LLM to understand placement of diagrams from a spatial awareness standpoint. Also the video pipeline initially struggled with coordinating narration, drawing reveals, captions, and camera movement without everything slowly drifting out of sync. Our solution was to make the recorded voiceover the clock for the entire composition and compile everything else around its real duration.

Accomplishments that we're proud of

I'm happy with the the fact we can achieve a full loop. Describe an idea, watch the AI draw it, manually tweak any part, ask the AI to continue from those changes, and then turn the same board into a narrated visual essay.

What we learned

I learned that LLMs make excellent art directors and chaotic layout engines. Also that testing the app can be just as fun as building it.

What's next for doodleloop

First finish implementing all the features remaining in my brain and polishing the app. Then maybe either opensourcing or monetizing it so I can fund GPU acquisition for custom wildfire prediction modeling.

Built With

Share this project:

Updates