Twinkle

• 

  Twinkle Landing Page

• 

• 

• 

• 

• 

• 

• 

Inspiration

While working as a part-time teacher, we observed that many children—especially those with ADHD and dyslexia—were highly curious and eager to learn, yet struggled to keep up in traditional classroom settings. These challenges often led to frustration, disengagement, and even bullying.

Through discussions with educators, we identified several key issues: a growing mental health concern among these students, gaps in the education system that rely on one-size-fits-all teaching methods, and significant social struggles that impact both confidence and academic performance.

This inspired us to create a solution that empowers these children to learn in a way that works for them.

What it does

Twinkle is a gamified, AI-powered learning platform designed specifically for children with ADHD and dyslexia. It combines interactive gameplay, multisensory learning, and a distraction-free environment to help students stay focused and engaged.

The platform includes features such as text-to-speech, interactive exercises, and customizable visuals, allowing students to learn at their own pace while improving their reading and comprehension skills. Twinkle not only supports academic growth but also helps rebuild confidence and foster a positive relationship with learning.

How we built it

Twinkle is built using modern web technologies with a focus on performance, scalability, and user experience.

a) Frontend: Developed with Next.js and TypeScript for a fast and structured application. We used React Three Fiber for immersive 3D elements and Pixi.js for high-performance 2D visuals. Tailwind CSS and Framer Motion were used to create a responsive and engaging UI, enhanced with interactive animations.

b) Backend: Powered by Next.js API routes and an Express.js service to handle core logic and API communication. AI capabilities are integrated using Claude AI for intelligent responses, along with ElevenLabs for voice synthesis features.

c) Development Tools: Tools like Code Rabbit and Cursor were used to streamline debugging, task management, and development workflows.

Challenges we ran into

One of the main challenges was balancing engagement and education—ensuring the platform remained fun without distracting from learning objectives.

We also faced technical challenges in integrating 3D elements while maintaining performance across devices, especially mobile. Additionally, implementing AI features required careful handling of API reliability, security, and response quality.

Designing for ADHD users was particularly complex, as it required achieving the right level of stimulation without overwhelming the user.

Accomplishments that we're proud of

We successfully created a unique gamified learning experience tailored to children with ADHD and dyslexia.

Our integration of AI enables personalized and interactive learning, while the platform’s clean and structured design helps users stay focused. Most importantly, Twinkle provides a supportive space that addresses not just academic challenges, but also the emotional well-being of students.

What we learned

Through building Twinkle, we developed a deeper understanding of the learning and behavioral needs of children with ADHD and dyslexia.

We also gained hands-on experience integrating advanced technologies such as 3D rendering and AI into a cohesive product. Most importantly, we learned the importance of user-centric design—continuously iterating based on real user needs and feedback.

What's next for Twinkle

Moving forward, we plan to expand Twinkle’s capabilities with features such as progress tracking, personalized learning paths, and customizable avatars.

We also aim to further optimize the platform for mobile devices and improve accessibility. In the long term, we hope to collaborate with schools and educators, and expand Twinkle globally to support more students across different educational systems.

Built With

• elevenlabs
• express.js
• next.js
• pixi.js
• react
• tailwindcss
• three.js
• typescript