Floodlit — 3D Sneaker & Shoe Showroom for React with a WebGL Product Gallery

Floodlit is a night showroom for a small range of sports shoes, written in raw WebGL2 with no 3D library. Pairs stand on clear acrylic shelves against a plaster wall. Point at a shelf and a strip of light inside the acrylic comes up in that shoe's own colour, lighting its sole, the edge of the slab and the wall behind it. Click, and one camera walks up to the shoe: the wall, the slab and the shoe move against each other, as they would if you walked up to them. Then you choose a size and add the pair to the bag, in a panel that belongs to the room.

It is built for 6 to 12 pairs: a launch, a capsule, a small brand's whole range. It is not a catalogue.

What it does

• One room, one camera. Every shelf is seen from the same eye, so the top row is seen from below and the bottom row from above. The light is worked out in the shader in linear light, with no blurred boxes and no painted glow.
• A walk, not a zoom. About 1.1 seconds, with weight, and the panel only enters once the camera has cleared its path. Walk along to the next pair with the arrows, the keys, a swipe or a click on the neighbour. Any command mid-walk carries on from where the camera is.
• A closer look. A torch follows the pointer across the wall, the camera looks around a little, and views and a zoom take you in as far as each picture allows.
• Buying that fits the room. Size tiles with sold-out and low-stock sizes shown, a remembered size, and an add-to-bag pill with five states, including a failed add that keeps your size. A glass bag: the world dims and softens behind it in the shader.
• Real links underneath. The wall is a list of real links, in the server's markup, placed by CSS alone. Crawlers, middle-click, keyboards and screen readers all work without WebGL. The canvas fades in over the first paint within 1 px of the same place.
• Draws only when something changes. At rest it draws nothing at all. The room runs in a Web Worker where the browser allows, and falls back to the page's own thread where it does not.
• Everywhere. Phones scroll the page and the camera follows it down the wall; in focus, the shoe sits above and the panel is a sheet below. Light, dark and auto themes. Right to left. Reduced motion. No WebGL or a lost context keeps the whole buying path, and with no JavaScript the wall and its links still work.

Measured

Text is measured against the lit pixels actually behind it, in 67 states and both themes: all at least 4.5:1. axe reports no violations. Checked at ten widths from 320 px to 3440 px, on one laptop with an Intel Iris Plus in Chrome. Frame times were not measured on a quiet machine, so no frame rate is claimed. Not tested on a real phone, Safari or Firefox.

Your pictures

The room needs a transparent side view of each shoe, about 2000 px wide. The photo pipeline that made the demo's set is included. A fromShopifyProducts mapper is included too, but a shop's own product photos are usually not transparent side views, and the room will not look right until they are.

The code is MIT. The demo's pictures are not: 5 of the 10 shoes are real photographs under their own licences, and 5 are AI-generated images made with Grok and ChatGPT. We have not verified those tools' terms for this use, so check them yourself, or replace the pictures. The store, the models and the prices are invented.