Snow Globe WebGL — 3D Raymarched Simulation

Click and drag anywhere on the globe with your mouse, or swipe with a finger on touch screens — the faster the motion, the more snow lifts into the air. There is also a Shake button in the control pill for anyone who prefers a single tap or is navigating by keyboard, and on supported phones you can enable Tilt Shake to shake the globe by physically moving your device.

Every drag or swipe adds to a "shake energy" value tracked in JavaScript, which decays a little each frame like friction slowing a real spinning globe. That energy is sent to the shader as a single number: it lifts snow flecks higher and swirls them faster while it's high, and as it fades the flecks gradually fall and settle back toward the base, just like a real snow globe calming down after a shake.

Raymarching casts a ray from the camera through each pixel and steps it forward using a signed-distance function until it finds a surface, so an entire 3D scene — the glass sphere, the cabin, the pine tree, the snowy base — can be described mathematically in a single shader with no external 3D model files. It's a natural fit for a snow globe because the glass shell itself is just one more sphere the ray needs to pass through.

Rather than tracking real particle data, the shader tiles space into a repeating pattern and hashes each repeat into a unique pseudo-random flake — position, fall speed, drift phase and size all come from that hash. This "instanced field" trick lets hundreds of flakes drift and fall convincingly with no particle buffers or physics engine, just a formula evaluated per pixel.

As each flake's simulated position approaches the glass sphere's radius, its lateral drift is scaled down so it appears to hug the inside curve of the glass rather than clipping straight through it — a simple visual approximation of a soft bounce off the glass wall, without needing full particle-collision physics.

If your browser supports the DeviceMotion API, an "Enable Tilt Shake" button appears in the controls. On iOS 13 and later, tapping it triggers the browser's own motion-permission prompt (required by Apple); once granted, sudden movements of the phone add shake energy just like a drag would on desktop. If your device or browser doesn't support motion events, the button simply doesn't appear — dragging always works as a fallback.

Gentle Rain or Soft Wind Chimes from the Sound Mixer create a cosy, hushed backdrop that suits the enclosed, quiet feeling of a snow globe. Crystal Singing Bowl also works well if you'd like something a little more resonant while the snow settles.

Yes. ASMR Sanctuary is a Progressive Web App. After your first visit the Service Worker caches the page and all assets, so the snow globe simulation runs fully offline with no internet connection required.

Shrink the browser window or zoom in slightly to lower the canvas resolution — the snow field and raymarched diorama are the most demanding parts per pixel. On mobile, portrait orientation renders fewer pixels than landscape. Pausing the animation via the Pause button stops rendering entirely, which is the most effective way to save battery if you just want to look at a still frame.

It isn't a texture — the cabin's window is a small circular patch tested against the surface-hit position each frame, and when the ray lands inside that patch the shader adds a warm amber glow on top of the shaded cabin colour. It's a cheap way to fake an emissive light source without a separate light-mapping pass.