Twinkle

• 

  Room interface have all the multisensory learning materials in the bookshelf

• 

  Prompt interface to prepare the interactive room for kids to learn

• 

  Game for math learning

• 

  Point of View: How dyslexia people reads

• 

  Multisensory way of learning new vocabulary

Inspiration

The last time I worked, I was a part-time teacher at a primary school where I had the chance to teach students with ADHD. I realized something strange: these kids are actually very curious about their surroundings and the material I taught. Yet, they still suffered from poor school performance, were bullied by friends, and often ate lunch alone.

I started to ask my colleagues about this and discovered some shocking realities:

Mental Health Crisis: Many kids suffer deeply, and some even commit suicide, because they cannot stand the stress of not being understood by their parents and the consistent bullying from peers.
Systemic Gaps: The childhood education system in Malaysia is not yet fully matured regarding special needs. Teachers often deliver the same material to ADHD students as they do to neurotypical students. This mismatch causes ADHD kids to lose willingness to learn, get distracted, and feel fundamentally misunderstood.

What it does

Twinkle is a gamified educational platform specifically designed for children with ADHD. It transforms traditional, often overwhelming learning materials into an immersive 3D game experience. Crucially, Twinkle is prompt-driven: a child or parent simply enters a topic of interest, and the system dynamically generates a tailored 3D lesson in real-time. By utilizing a "clean environment" design philosophy, Twinkle minimizes external distractions while providing the necessary multi-sensory engagement to keep neurodivergent students focused. It serves as a bridge to restore a child's love for learning and confidence, offering a custom-built alternative to one-size-fits-all education systems.

How we built it

We adopted a modern client-server architecture to ensure a responsive and interactive experience:

Frontend: Built with Next.js 15 (App Router) and TypeScript. We leveraged Three.js and React Three Fiber (along with @react-three/drei) to render the 3D game world. Tailwind CSS handled the UI styling, while Framer Motion powered the smooth animations.

Backend: A lightweight Node.js and Express.js server handles API requests.

AI Integration: We integrated Anthropic's Claude 3.5 Sonnet (@anthropic-ai/sdk) to power the natural language processing. The AI interprets the child's input prompt to procedurally generate relevant 3D assets and educational content on the fly.

Challenges we ran into

Balancing Stimulation: Designing a UI that was engaging enough to hold an ADHD child's interest without becoming over-stimulating or distracting was a difficult design paradox to solve.

3D Performance: Optimizing the 3D rendering within a React environment to ensure smooth performance across devices required careful tuning of React Three Fiber components.

Systemic Gaps: Translating the complex, emotional reality of the Malaysian special needs education crisis into a digital solution required deep empathy and research.

Accomplishments that we're proud of

Purpose-Driven Design: We are proud of creating a tool that directly addresses the "Systemic Gaps" and mental health crises facing ADHD students in Malaysia.

Seamless AI & 3D Integration: Successfully merging a high-fidelity 3D game environment with the intelligence of Claude 3.5 Sonnet to create a cohesive learning buddy.

Generative Learning: Building a system where the curriculum isn't static, but alive—changing instantly based on what the child wants to explore.

What we learned

The Reality of ADHD: We learned that ADHD students are not "unwilling" to learn; they are often intellectually curious but are failed by rigid delivery methods.

The Mental Health Toll: We discovered the shocking correlation between poor educational support, bullying, and severe mental health issues (including suicide risks) among neurodivergent children.

Technical Growth: We gained significant experience in migrating AI providers (moving from OpenAI to Anthropic) and managing 3D states in a Next.js framework.

What's next for Twinkle

Mobile Adaptation: Developing a tablet-first version, as touch interfaces are often more intuitive for younger students.

Curriculum Expansion: Expanding the gamified content to cover more subjects beyond the prototype phase.

Educator Dashboard: Creating a portal for teachers and parents to track progress and understand the specific learning patterns of their students, helping to bridge the gap between home and school.

Built With

• anthropic
• cors
• nextjs
• react
• three.js
• typescript