Christmas Tree 🎄

three.js mediapipe svelte webgl
launch project

A magical interactive 3D Christmas tree experience with hand gesture controls powered by AI. Control 900+ particles with your hands and watch them respond in real-time!

Technologies Used

  • Three.js: Beautiful 3D graphics with 900+ glowing particles.
  • MediaPipe Hands: Real-time AI hand tracking.
  • Web Worker: Smooth 60 FPS rendering off the main thread.
  • Svelte Stores: Centralized state management.
  • Atomic Design: Modular component architecture.

Key Features

  • ✋ Open Palm: Spread particles outward in floating mode.
  • ✊ Closed Fist: Gather particles back to tree shape.
  • 🤏 Pinch Gesture: Trigger rainbow LED flash effect.
  • 👋 Hand Movement: Orbit and control the 3D camera.
  • 🎵 Festive Music: Immersive Christmas ambience.

Architecture Highlights

  • OffscreenCanvas: 3D rendering runs in Web Worker.
  • Spring Physics: Smooth particle transitions.
  • Gesture Detection: Pure function extractors for testability.

Perfect for spreading holiday cheer and exploring the magic of WebGL + AI!