This Christmas, a friend and I decided to see how far we could push a small idea in just one day: What if a Christmas tree could grow out of your Instagram memories and react to your hand gestures?
The result is a 3D Christmas tree where:
- Each ornament is one of your latest Instagram photos.
- You can explore the tree using hand gestures in front of your camera.
- Everything runs in the browser, so you can share it easily with friends and family.
🔗 Live demo: https://www.christmas-tree.fun/
⭐ GitHub Repo: https://github.com/gracetyy/christmas-tree/
Core Ideas
The project was built around three main goals:
- Make a playful, seasonal experience that feels magical but is still technically solid.
- Use off-the-shelf tools so other developers can easily fork and extend it.
- Treat it as a quick experiment in combining 3D graphics, real-time interaction, and social media content.
Tech Stack Overview
At a high level, the project combines:
- A 3D scene for the tree, presents and background by Three.js
- A gesture input layer that maps hand movement to camera controls (similar to MediaPipe Hands)
- A backend workflow to fetch the latest photos from a given Instagram username powered by Bubble Lab, an open-source TypeScript-native workflow automation platform where you can prompt and get both a visual flow and real TypeScript code.
Feel free to check the repo for the exact implementation details and see how the pieces fit together in code.
Things Learned / Interesting Challenges
Working on this in such a short time frame surfaced a few interesting areas:
- UX for gesture vs mouse: Making sure the tree still feels usable with traditional input while keeping gestures fun and not frustrating.
- Performance on mobile: Balancing visual detail of the tree with smooth interaction on phones.
- Camera mapping from gestures: Designing a mapping from 2D hand position to orbit-camera azimuth/elevation that feels intuitive, doesn’t cause motion sickness, and still lets users reach all sides of the tree.
Open to feedback or PRs and wish everyone have a wonderful christmas!!
gracetyy
/
christmas-tree
Merry Christmas! Decorate your own 3D Christmas Tree with Instagram photos
🎄 Make your own 3D Christmas Tree with your photos!
Transform your favorite memories into a magical, interactive 3D holiday experience! This project lets you create a beautiful, personalized Christmas tree decorated with your own photos.
✨ Try it out live at: https://www.christmas-tree.fun/
🎥 Demo
Demo: scripting
@duolingoInstagram as an example input for the Instagram import.
✨ Features
- 📸 Your Photos, Your Tree: Upload photos from your device or instantly import them from any Instagram profile!
- 🖐️ Magic Hand Controls: Control the camera with hand gestures in front of your webcam.
- 🎬 Cinematic Videos: Record high-quality videos of your tree (360° rotation or cinematic tour).
- 🖼️ Instant Postcards: Download a high-definition snapshot of your tree with a custom "Merry Christmas" greeting.
- 👤 Personalized Greeting: Enter your name to see a custom "Merry Christmas [Your Name]!" message.
🖐️ Hand Mode Tutorial
Switch to Hand Mode…
Top comments (0)