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: scripting
@duolingoInstagram as an example input for the Instagram import.
- 📸 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.
Switch to Hand Mode in the bottom menu to control the tree with "magic":
- Zoom In: Open your palm with fingers spread 🖐️
- Zoom Out / Reset: Close your hand into a fist ✊
- Move / Pan: While your hand is open, move it around to look at different parts of the tree.
This feature uses MediaPipe Hands, a high-fidelity palm and finger tracking solution by Google.
- It works by performing real-time AI inference on your webcam feed.
- It identifies 21 3D hand landmarks (joints).
- Our script calculates the distance between your thumb and index finger, and counts how many fingers are curled, to translate those shapes into 3D camera movements in Three.js.
When you enter a username:
- The app sends a request to a backend webhook powered by Bubble Lab (YC W26 - the open-source, Typescript-native agentic workflow builder).
- Bubble Lab's service uses a Headless Browser to securely visit the public Instagram profile.
- It identifies the most recent high-quality image URLs from the profile's grid.
- These images are processed, optimized, and sent back to the app to be instantly "hung" as Polaroids on the 3D tree.
- Clone & Enter:
git clone https://github.com/gracetyy/christmas-tree.git cd christmas-tree - Install:
npm install
- Launch:
npm run dev
- View: Open http://localhost:3000 in your browser.
For local development, create a .env file in the root directory. For deployment, configure these in your platform (e.g., Vercel):
INSTAGRAM_WEBHOOK_URL: The webhook endpoint URL for processing Instagram data imports.
You can use .env.example as a template.
- React & Three.js (React Three Fiber): For rendering the 3D scene.
- MediaPipe: For the AI hand gesture tracking.
- Bubble Lab (YC W26): Open-source, Typescript-native agentic workflow builder for the Instagram scraping and image processing API.
- Tailwind CSS: For the user interface.
MIT License.