juniegrat lab

Things that only work because they run in a browser.

Real-time 3D, rigid-body physics, hand tracking and procedural audio. Open a link, nothing to install.

Now playing AURUM
01

AURUM

A scroll-driven index of precious metals where each coin melts and reforms into the next. Raymarched liquid metal, real bloom, a HUD you can inspect.

  • Three.js
  • GLSL
  • Scroll-driven
  • Blender

Open → Source ↗

02

POPPET

A spring-bone voodoo doll you can grab, pin, burn and tear apart. Throw darts by pinching at your webcam; the hand is tracked in the doll's own 3D space.

  • Three.js
  • Spring bones
  • MediaPipe
  • Shaders

Open → Source ↗

03

BOX3D PLAYGROUND

Erin Catto's brand-new Box3D engine compiled to WebAssembly. Stack pyramids, topple jenga and dominoes, or switch to the crash and hoops scenes and shoot.

  • Box3D
  • WASM
  • Three.js
  • TypeScript

Open → Engine ↗

04

COIN PUSHER

The arcade machine, simulated properly. Jolt Physics shoves a heap of colliding discs while Three.js renders the cabinet, using AURUM's struck-coin scans.

  • Jolt Physics
  • WASM
  • Three.js
  • MediaPipe

Open →

05

BALISONG

A butterfly knife you can flip, with the pivots driven by real constraints rather than an animation. Opt in to the webcam and your hand drives the handle.

  • Three.js
  • Rapier
  • MediaPipe

Open →

06

OFFSITE

A boss rush on a procedural snowfield, five colleagues deep. Every opponent is the same figure wearing a different silhouette, and every stat it fights with is a measurement rather than a tuning pass.

  • Babylon.js
  • WebGPU
  • WGSL
  • Gamepad

Open →

07

STARFALL

A space sim with no cut between its parts. The ship you fly down through the atmosphere is the one you land and step out of, and the ore you chip out of a cave is sold at a terminal on the same unbroken surface.

  • Three.js
  • React Three Fiber
  • Rapier
  • WebGL 2

Open →

08

WATER LAB

One question with several answers: what is the best way to put convincing water on a web page? Each exhibit is a separate take. The first has no fluid in it at all — Jolt hands every floating body its own water plane each step, rebuilt from a shared wave field.

  • Three.js
  • Jolt Physics
  • WASM
  • WebGL 2

Open →

09

CLOUDS

Volumetric clouds, raymarched, and checked against photographs rather than against taste. Upload a sky photo and the scene is fitted to it: the Sun from the capture time, the cover, the cell size, even the phone's tone response. The fit then reports what still does not match.

  • Three.js
  • GLSL
  • Raymarching
  • WebGL 2

Open →