By Fun AI Lab
December 16, 2025
There is something undeniably magical about the holiday season. But in 2025, magic doesn’t just come from the North Pole; it comes from the GPU.
This week, we set out to build a digital snow globe for the modern web—an interactive, gesture-controlled light show that runs entirely in your browser. No apps to download, no VR headsets required. Just you, your webcam, and 6,000 dancing particles of light.
The result is Holiday Magic, a web experience where a clenched fist summons a Christmas tree, a peace sign builds a snowman, and a “snap” of your fingers changes the color palette.
Here is a look under the hood at how we combined Three.js and Google MediaPipe to code a little bit of joy.
The Ingredients: A Tech Stack for Tinsel
To build this, we didn’t need a massive game engine like Unity or Unreal. We used the “Vanilla Stack”—pure web technologies that run on any modern laptop or smartphone.
- Three.js: The 3D graphics library that powers the visuals. Think of this as our virtual canvas.
- MediaPipe (by Google): An AI solution that performs real-time hand tracking. This is our “eye.”
- Vector Math: The logic that tells the particles where to go.
Part I: The “Snow” (The Particle System)
If you look closely at the experience, you aren’t looking at solid objects. You are looking at a cloud of 6,000 individual points.
In 3D programming, this is called a Particle System. Instead of rendering a solid tree model, which can be computationally heavy, we calculate the mathematical coordinates for thousands of tiny dots.
The Mathematics of Magic
To create the Christmas Tree, we didn’t sculpt branches. We used a formula. We arranged the particles in a spiral cone shape using cylindrical coordinates:
- Height: Randomly distributed from bottom to top.
- Radius: The higher the particle, the tighter the radius (creating a cone).
- Angle: A spiraling rotation to give it volume.
For the Snowman, we simply stacked three spheres of diminishing size. For the Star, we used geometry to plot points along five lines radiating from a center.
Because these are just points in space, we can do something a solid model can’t: morphing. When you switch from a Tree to a Snowman, the particles don’t disappear and reappear. They glide to their new positions. This is done using a technique called Linear Interpolation (Lerp). It makes the transition feel fluid, like liquid mercury.
Part II: The “Eye” (AI Hand Tracking)
The real “wow” factor comes from the control scheme. We didn’t want buttons. We wanted it to feel tactile.
We utilized MediaPipe, an open-source machine learning solution. It analyzes the video feed from your webcam and attempts to find 21 specific “landmarks” on your hand—joints, fingertips, and the wrist.
Deciphering the Gestures
The code doesn’t actually “know” what a fist is. It only knows geometry. To detect gestures, we wrote simple logic checks based on the distance between points:
- The Fist (Tree): Are all fingertips closer to the wrist than their knuckles?
- The Peace Sign (Snowman): Are the Index and Middle fingers extended, while the Ring and Pinky are curled?
- The Open Hand (Explosion): Are all fingers extended and spread apart?
The “Pinch” Interaction
The most satisfying interaction is the color change. We track the distance between the Thumb Tip and the Index Finger Tip.
If that distance drops below 5% of the screen size, the system registers a “Pinch.” We added a timestamp check (a “debounce”) so the colors don’t flicker wildly. You have to pinch, release, and pinch again—mimicking a real-world switch.
Part III: The Polish
A tech demo becomes an “experience” in the details.
- Post-Processing: We added a “glow” texture to every particle. When thousands of them overlap, they create a bright, intense core that fades into a soft halo, mimicking Christmas lights.
- The Music: A Creative Commons rendition of Christmas music adds the necessary auditory cue. (Pro tip: Browsers block auto-playing audio, so we included a “Play Music” button in the UI).
- The Mirror Effect: We flipped the video feed horizontally. It sounds minor, but without it, moving your hand left moves the video right, which breaks the immersion immediately.
Why This Matters
Projects like Holiday Magic demonstrate how accessible the “Future of the Web” has become. Five years ago, running real-time computer vision and particle physics in a web browser would have melted your CPU. Today, it runs at 60 frames per second on a standard laptop.
It reminds us that code isn’t just for spreadsheets and databases. It’s a medium for art, expression, and yes—a little bit of magic.
Try It Yourself
You can try the holiday magic web application by clicking the link below, or simply scan the QR code. Feel free to share it with your kids and friends!
Happy Holidays and Happy Coding.
Leave a Reply