Dimas Andrian
Solary

Solary

A web-based educational game that lets users learn about the solar system through gesture-driven 3D gameplay.

Challenge

Solar system learning can feel passive when dependent only on static textbooks or standard mouse-and-keyboard interactions.

Solution

I built a browser-based educational game with hand-tracked gesture input, interactive 3D solar system rendering, and bilingual learning modules.

Screenshot of the Solary solar system learning game

Overview

Solary is an interactive space learning experience built by Litegral Labs to make astronomy engaging and accessible for learners of all ages.

Instead of relying on standard mouse or keyboard controls, Solary uses computer vision hand tracking so players can interact with the solar system using natural hand gestures directly through their webcam.

Key Features

  • Gesture-Controlled Gameplay: Camera-based hand tracking powered by Google MediaPipe for touchless 3D interaction.
  • 3D Solar System Exploration: Real-time 3D planetary rendering powered by Three.js and animated with GSAP.
  • Interactive Learning & Quizzes: Planet discovery flows, fun facts, and level progression to reinforce learning.
  • Bilingual Support: Instant toggle between English and Indonesian language modes.
  • Zero-Install Web Format: Fully responsive web application running smoothly inside any browser.

Tech Stack & Architecture

  • Frontend & Rendering: HTML5, CSS3, JavaScript (ES Modules), Three.js
  • Computer Vision: Google MediaPipe Hands
  • Animation Engine: GSAP (GreenSock Animation Platform)
  • Analytics & Hosting: Deployed on Cloudflare / Vercel with privacy-friendly analytics