VisuMath

Landing Page
Community Gallery
Playground of Video and Interactive Tools
Playground of Video and Interactive Tools

Inspiration

Web development has evolved from static websites with fixed content, to dynamic sites that generate real-time content based on user interactions. However it seems a new trend is on the horizon, generative websites where the code itself is generated dynamically. This is a trend that is very exciting to us and has a lot of potential transformative user experiences.

Concepts like eigenvectors, matrices, and trigonometry become much easier to grasp when visualised, and if you can play around with the ideas. While there’s a wealth of information available, most resources lack an interactive component—making it difficult to experiment and truly grasp these ideas. We bridge this gap by taking a prompt and dynamically creating code to render animations to explain mathematical topics, and create code that displays a interactive UI that allows you to play around with the concepts. We wanted to devise a method to let you, the user, generate detailed videos, on-the-fly, on any mathematical topic you want.

What it does

You can enter a prompt about something you want to learn. You can see community generated playgrounds, and if you want you can generate your own. Your playground will contain a video that explains the topic of your prompt, and interactive tools that helps to play with the concepts and understand them.

How we built it

Frontend: React, Tailwind CSS, and Next.js
AI-Powered Playground Generation: Claude, Langraph (agentic AI), Langsmith (observability).
Video Rendering: We utilised the Manim API to generate high-quality, intuitive mathematical visualisation.

Challenges we ran into

Generating maths animations is not an easy task. There are no tools that we know of that can create good quality videos (eg. Sora). Our agentic system consists of a high level video planner stage, a scene planner stage, a scene critiquer stage, a scene code generator stage and a scene code feedback stage stage. The tasks have to be delegated like this, and each agent must be carefully prompted to create good outputs
Rendering dynamically created React code in our frontend. Our backend uses the interactive UI agent to create React code, this then needs to be rendered.

Accomplishments that we're proud of

Creating the agent for generating Maths Animations. It is not as simple as a single call to an LLM. It was quite hard to design an architecture to create high quality videos.
Rendering an interactive UI for the user to play with using code that has been generated dynamically using an LLM.
Completing the project in 24 hours.

What we learned

One of the most valuable takeaways from this project was how AI, particularly Claude, can streamline React code generation. Instead of manually crafting every interactive component, we leveraged Claude to dynamically generate React components based on user queries—greatly speeding up development. This reinforced the power of AI in software engineering, especially for rapid prototyping and frontend development.

Additionally, we learned that simply presenting information isn’t enough—users engage best when they can see, interact, and experiment with concepts hands-on.

What's next for VisuMath

We want to perfect our architecture behind video generation, and extend to other knowledge domains like biology and finance. Instead of just responding to queries, we could implement a personalised learning system that adapts to users' progress. An AI model could analyse their interactions and suggest the next best topic, tailoring a customised curriculum for each learner.