Video in the works
StudySpark
A lesson read aloud with words lighting up, and a student answering by speaking.
About the project
StudySpark teaches the CBSE Class 8 chapter on Motion step by step. An AI voice reads every step, words light up as they're spoken, and students can answer out loud.
StudySpark teaches one CBSE Class 8 science chapter, Motion, the way Duolingo teaches a language: short steps, instant feedback, XP and streaks. The difference is voice. An AI voice reads every step, the words light up as they're spoken, and students can answer out loud.
It's made for students who learn better by listening than by reading. It's a one-chapter prototype, with a written plan for scaling to many chapters.
How it works
Pick a module
7 modules unlock in order, from "What is motion?" to a boss level.
Listen
Each step is read aloud instantly from ready-made clips, with the words lighting up as they're spoken.
Do
A story hook, a concept, multiple choice, a prediction, matching, fill in the blanks, and a speed simulator.
Answer out loud
Say "B", "option B", "second" or part of the answer.
Level up
XP, streaks, stars and 9 badges, saved in the browser.
Under the hood
- App
- Next.js 16 and React 19, with Framer Motion for 15+ animated visuals.
- Voice out
- 103 ElevenLabs clips, with a live fallback for new text.
- Voice in
- The Web Speech API, with a matcher for letters, numbers and sound-alikes.
- Progress
- Zustand, saved to the browser.
What I did
- 7 modules, from "What is motion?" to a boss level
- A lesson engine with 7 kinds of activity: story, concept, multiple choice, prediction, matching, fill in the blanks and a speed simulator
- 103 narrations made in advance with ElevenLabs, so voice starts instantly, with a live fallback
- Voice answers that accept "B", "option B", "second", "two" or part of the answer
- Karaoke-style highlighting that follows the audio word by word
- 15+ animated visuals: a train passing, racing dots, a pendulum, a formula builder
- XP, streaks, 9 badges, stars and unlockable modules
- A plan for scaling to many chapters (designed, not built)
What was new
- Voice that starts with no wait
- Students answering by speaking
- Highlighting synced to speech
Problems I hit, and how I fixed them
Calling the voice API on every step added delay and race conditions.
Fix Load a list of ready clips and only call the API for new text.
Speech recognition mishears letter answers.
Fix A map of letters, numbers and sound-alikes (like "hey" for A), plus matching part of the option text.
Hard-coded lessons and animations don't scale.
Fix Planned: chapters as data and reusable animation templates.
Screenshots
Screenshots in the works
Real screens from StudySpark go here.
To be clear
The app code was never committed to git, so there's no commit history to show for it.