AIRFRAME.
Springfield Aircraft Identification
A local curiosity turned into an interactive learning experience. Identify aircraft, explore them in 3D, and build your own aircraft hangar.
Actual AIRFRAME interface, captured from the published project’s source. Personal Project — independently created, not a commissioned client website.
- PROJECT TYPE
- Personal Project
- FOCUS
- Design & development
- EXPERIENCE
- Interactive aircraft recognition
- BUILT WITH
- React & Three.js
Get to know
your local skies.
AIRFRAME starts with a simple question: “What plane is this?” It turns aircraft recognition into a game focused on Springfield, Missouri and the surrounding Ozarks.
The selection includes 30 commercial, regional, business, cargo, and general aviation aircraft. Profiles distinguish aircraft observed at Springfield-Branson National Airport, aircraft families observed there, and regional possibilities. It is a learning selection, not a claim about the 30 most frequently seen aircraft.
This was a personal project: an opportunity to bring visual design, interactive development, and a subject I enjoy into one complete experience.
Five ways to play
Practice, Quiz, Hard mode, 3D Challenge, and Random mode offer different ways to learn. Typed answers accept common aircraft names and aliases; optional multiple choice is available outside Hard mode.
Learn from each guess
An incorrect guess unlocks 3D study after one miss, or two in Hard mode. Correct and revealed answers show specifications, identification tips, facts, and local context.
A hangar that grows
Correct identifications unlock aircraft in the collection. Scores, accuracy, streaks, settings, and progress are saved in the browser without an account.
The working 3D aircraft study experience.
More than
a photograph.
The 3D viewer lets players rotate an aircraft, zoom, reset the camera, and examine features from different angles. Optional labels help identify wings, engines, and the tail without giving away the answer.
Individual aircraft assets are loaded when needed. Freely licensed simulator models and original approximate study models make this a recognition tool, rather than a claim of engineering-level accuracy.
A flight deck,
made approachable.
Charcoal surfaces, aviation-blue highlights, aircraft photography, and restrained instrument-style details establish the visual direction. Clear controls keep the experience focused on observing, guessing, and learning.
The interface brings a game, a learning resource, and a collection into one consistent system. Feedback states make correct answers, missed guesses, locked aircraft, and session results easy to distinguish.
The same experience.
A smaller screen.
Responsive navigation, stacked layouts, and touch-friendly controls keep the game usable on phones and tablets. The 3D viewer supports touch rotation and zoom as well as mouse controls.
This project demonstrates how I connect visual design with working interactions: reusable layouts, game logic, browser storage, asset handling, and responsive development.
Screenshots show the existing AIRFRAME project, not a redesign. Aircraft imagery and model credits remain available in the project’s About section. AIRFRAME’s advanced game and 3D features are separate from the standard $600 informational website package.
Homepage aircraft photograph: Royal S King, Boeing 737-800 der Garuda Indonesia, CC BY-SA 3.0. Shown within AIRFRAME’s interface in the desktop and mobile screenshots. These screenshot adaptations are shared under the same license.
King Air 350 model: SM, D-ECHO, Lesbof, Bomber, it0uchpods, GabrielYV, IAHM-COL, JWocky and contributors. FlightGear model source, GPL-2.0. AIRFRAME’s converted-model source and license are available through its About page.
Have a website in mind?
Let’s talk about what your small business needs.