How the screen wall works
The hero at the top of the lab is a curved "control room" wall of monitors. Every monitor shows a live, animated preview of a build. Click one and the build opens in the player.
One canvas per project, many viewers
Each project has a single offscreen 2D canvas, drawn by an "attract mode" function in previews.js (640 × 400 for landscape builds, 360 × 760 for phone apps). That one canvas is the source for:
- a
THREE.CanvasTextureon the wall, - the animated thumbnail on the project's card,
- the preview on the game's own page.
The render loop only redraws a source when something visible needs it: the wall is on screen, or one of its cards is (an IntersectionObserver tracks that). Previews tick at 30 fps, which is plenty for attract mode and leaves the main thread alone.
The wall itself
Screens sit on an arc. Each column's angle is its arc-length offset divided by the radius, so wide and narrow screens pack without gaps. Phone-shaped apps span both rows at the ends. The camera's projection is shifted with setViewOffset so the wall centres on the stage area under the headline rather than on the whole canvas. Hover raycasts against the screen planes; drag rotates with inertia and a soft clamp.
Being polite
- Three.js only loads on devices that look capable (WebGL, enough cores and memory, not on data saver), and after the page has loaded. Everyone else gets a flat grid of the same live previews.
- With reduced motion on, nothing drifts or animates on its own, and there's a pause control for everything that loops.