EduReels

EduReels was inspired by the engaging nature of TikTok and Instagram Reels and our belief that the same format could make learning faster and more enjoyable. Users enter any topic, and EduReels generates six vertical, swipeable lessons featuring AI-generated explanations, spoken narration, synchronized word-by-word captions, and interactive WebGL animations. We built the application using Next.js, React, and TypeScript, with scroll snapping, automatic playback using the Intersection Observer API, tap-to-pause controls, and a fallback pipeline that uses Groq or an offline lesson generator when the primary AI provider is unavailable. One of our biggest challenges was synchronizing narration, captions, and animations because browser text-to-speech does not provide reliable word timing, so we developed an independent, deterministic caption timeline. We also had to transform unpredictable AI-generated content into meaningful visual explanations while keeping the WebGL scenes smooth and readable on different devices. Through this project, we learned how to combine generative AI, real-time graphics, browser audio, animation systems, and responsive interface design into a dependable educational experience.

Built With

• claude
• codex
• css
• elevenlabs
• javascript
• typescript