↓ Scroll down for the snowglobe
This whole thing started with a doodle of a snow globe on a napkin while I thought "maybe I can make that move". I am not a physics programmer, not even close, and I still have to Google what half the Matter.js settings do, so this was a little bit difficult for me. It was messy, kind of ridiculous, and surprisingly fun once I stopped pretending I knew exactly what I was doing.
The core idea is a canvas that renders a 1024 by 1024 scene, then a physics world that keeps a bunch of snowflake particles inside a circular boundary. I used Matter.js because it is approachable, battle tested, and it let me get a "good enough" result without writing my own solver, which would have been a catastrophe. The globe itself is a static body, and the snow is a swarm of tiny circles with just enough friction and air resistance to settle instead of skittering around.
Shake the snowglobe!
If you poke around the component, you will see I load a handful of transparent layers and draw them in order, like a little stage play: background, castle, snow, glass, reflection, base. That order matters, and I learned it the hard way when my snowflakes looked like they were floating outside the glass. There is a translation step that keeps the visuals glued to the globe body, which was another humbling lesson in coordinate space.
Shaking is the fun part, and also the most difficult part. Dragging the globe is basically a controlled cheat, because I pin the globe to the mouse and manually set velocity so the snow gets nudged around. It is not physically pure, but it feels ok, which is the real goal. I tried a more "correct" approach first and the globe just slammed into the floor, which was funny, but not the vibe I was looking for.
The snow behavior is a mix of gravity, drag, and a little sideways sway so the flakes feel alive instead of dead weight. I also added a "sleep" rule for flakes that have settled, because if you keep everything awake forever, the bottom pile starts to jitter and you get a weird popcorn effect, that you can probably still see a little of. That tweak saved the scene from looking too glitchy, and it is the kind of thing you only discover after staring at a wobbly pile of dots for a half hour.
There are still quirks I can see, like the flakes occasionally clustering near the center when you stop shaking. I could probably clean up the math, and maybe I should, but there is something honest about the scrappy parts too. This was a stretch project, and I am okay admitting it was beyond my comfort zone.
Stay in the Loop
Get notified when we add new tools and features
Thank You!
You're all set. We'll keep you updated with the latest tools and features.
I learned a lot from this, mostly that I can do more with physics than I thought, but also that patience beats cleverness. There were moments where I wanted to toss the whole thing, particularly when the snow refused to settle or the layering was off by a few pixels, but then it clicked. That feeling, when the flakes finally tumble the way your brain more or less expects, is glorious. So go ahead, drag the globe around, and if it feels like a little winter magic, I will take the win.