STEM-ED runs the Aerospace Robotics Competition: middle and high school teams build a quadcopter, code it to fly a mission, pilot it head to head, and answer an ethics question out loud. We replaced their template site with a world students want to enter.
Live component
The code lab: every line of flight script moves the drone through the gates. Built in code from the product's own design tokens, so it stays sharp at any size.
The product, in motion
The brief
Make a competition about building, coding, and flying feel like all three before a student reads a word, and still work for the parent paying the registration fee and the teacher reading the rulebook.
Design system
Void
#04050D
Panel
#0F1226
Build
#FF7A1A
Code
#22E6FF
Fly
#B8FF3C
Ink
#EEF2FF
Inside the build
01
A night launch field, a gate course, and a quadcopter. Each chapter of the page moves the camera: showcase, exploded build, coded flight, piloted gate run.
How: three.js WebGPU renderer with a WebGL2 fallback; a procedural drone; low-power devices get a still poster.
02
Every part of the competition kit floats apart with a live label. Hover a part in the kit list and it lights on the model.
How: Labels pinned to 3D anchors projected to screen space every frame.
03
Students write a few lines in a tiny flight language and watch the drone fly them, with the running line highlighted.
How: A small interpreter driving the same 3D scene the page uses.
04
A keyboard-flown gate run with a telemetry HUD. Finished runs post to a public top-ten.
How: Run results written through Parlor Forms; headings resolve in like a decoding signal while staying server-rendered.
Technology
Next project
Silver Dollar
One calm place for a family looking after Mom and Dad: care, medication, money, calendar, and the stories worth keeping.
Want one like this?
Tell us about the business. You leave the first call with a direction and a written estimate.