Message your friends and family with a unique, mesmerizing 3D interactive Christmas Tree experience! Powered by Tree.js and MediaPipe, this project brings the holiday spirit to your screen with gesture controls, personalized wishes, and photo memories.
[!NOTE] > Recommended for Desktop/PC This application is heavily optimized for desktop screens with webcam support for the full gesture control experience. Mobile access is available but functionality is limited.
Experience the magic of a 3D interactive Christmas!
 |
 |
- Gesture Control: Use your webcam to interact with the tree.
- 🖐️ Open Hand: "Explode" the tree into a galaxy of floating lights and ornaments.
- 👌 Pinch: Grab specific gift boxes or focus on photo memories.
- 🤏 Pinch & Hold: Open gifts to reveal 3D surprises.
- High-Fidelity Visuals: Enhanced bloom effects, dynamic lighting, and smooth rotational physics.
- Limited Interaction: Basic touch support allows for viewing, but advanced gesture magic and heavy particle effects are disabled for performance.
- View Only: Designed primarily for quick viewing of the tree structure.
- Personalized Wishes: Generate custom URLs (e.g.,
?name=YourName) to send addressed greetings. - Photo Memories: Upload your own photos to decorate the tree!
- Music & Atmosphere: Integrated festive background music and sound effects.
You can hang your own photos on the tree!
- Click "Select Folder" to upload an entire album at once.
- Click "Select Files" to pick specific images (
.jpg,.png). - Your photos will automatically appear as glowing ornaments on the tree.
Create a personalized greeting for someone special:
- Click the "SHARE" button.
- Enter the recipient's name (e.g., "Alice").
- A custom link and festive message will be copied to your clipboard.
- Paste it to send it to your friend!
HKey: Toggle the UI and Webcam view (Hide/Show) for a cinematic screenshot mode.
- Three.js: The core 3D engine for rendering the tree, particles, and post-processing (Unreal Bloom).
- MediaPipe: (PC Only) AI-powered hand tracking for gesture recognition.
- Vanilla JavaScript: Built for maximum performance with no heavy framework overhead.
- Vercel: Optimized for instant global deployment.
-
Clone the repository
git clone https://github.com/tanbaycu/christmas-tree.git cd christmas-tree -
Run Locally
- Since this uses ES6 modules and Webcam access, you strictly need a local server.
- VS Code: Right-click
index.html-> Open with Live Server. - Python:
python -m http.server 8000 # Open localhost:8000 in Chrome
-
Customization
- Replace images in the
assets/folder to change the default decorations. - Modify
greetingsinscript.jsto change the random messages.
- Replace images in the
If you enjoyed this project or used it to send a Christmas wish, please consider giving it a star! ⭐️
Developed with ❤️ by tanbaycu