Creative Coding
Motion
Real-Time 3D
I created this gesture-driven web experience where a wish turns a shooting star into a WishStar forever in the galaxy - built in the browser with real-time WebGL 3D and hand tracking, iterated quickly with Gemini-assisted vibe coding.
INTENT:
I want to make a wish feel heard and anchored, not fleeting.
People have a tradition of wishing on a shooting star, but it passes so fast the wish can feel weightless and hard to hold onto.
CONCEPT:
I want to explore what it means to interact through motion.
no buttons,
no menus,
no clicks.
INTERACTION:
As falling stars pass through the sky,
the user makes a wish and grabs one with a fist.
The star no longer fades away — it stays in the galaxy as a WishStar,
carrying the sense that the wish has been heard by the universe.
DESIGN PRINCIPLE:
gestures should read as “natural metaphors”
👊 fist = grasp/capture the shooting star
🖐️ open palm = approach/unveil the solidified star
👋 wave =pan/rotate the star
I started with ChatGPT to structure the problem space:
defining interaction model, system behavior, and how gesture should map to response.
I moved to Gemini to implement the experience,
since I found it more fluid for coding and refining the visual quality of the experience.
When features failed to meet my expectation,
I'd request related metrics/rules and adjust based on my own judgment for precision.
❓ In early versions, meteor could still be caught when it was partially off-screen.
❌ Poor experience
💡 I set a safety margin near the screen edge so meteor couldn't be captured when close to flying out of view.
❓ When palm and fist gestures were detected in rapid alternation, the scene changed just as quickly.
❌ Broke emotional continuity of the narrative
💡 I added a one-second buffer between scene changes so transitions felt smoother and less glitchy.
❓ Meteor moved fast and randomly, making it difficult to catch.
❌ User frustration and potential drop-off at early stage
💡 I constrained the start and end points to a small range to make the trajectory more predictable, and set a medium speed so the interaction felt challenging yet achievable on the first try for most users.
To make StarWish feel fully alive, I deployed the experience and maintained the code in a GitHub repository, inviting people to interact with the work in motion.
I conducted a lightweight A/B test with six participants,
to identify which interaction felt more intuitive and required less interpretation.
✅ NO CAMERA:
SELF VIEW CAMERA:
"The experience is immersive and focused."
"Even though it wasn’t recording, it made me more aware of being on camera."
✅ CINEMATIC PROMPT:
BOTTOM ACTION PROMPT:
"This feels more emotional, and the other one just feels functional."
"The instruction has a weaker presence."
✅ SLOW SUMMER EVE (PIANO):
STAY (SONG WITH LYRICS):
"It's calm, peaceful and matches the starry atmosphere."
"The singing is distracting and more noticeable."
When working with AI, vague thinking reflects in the output. I learned to better describe timing, response, and edge cases, to get the system as close to what I actually wanted as possible.
progress saving
enable users to see their prior created stars
accessibility