25 complete home pages for this same library of work, built to find the best way to show it: from a GPU particle storm and a walk-through gallery to an arcade cabinet, a vending machine and a playable step sequencer. The favourite, Pixel Potion, became the live front page.
The idea
The library needed a front page, and I couldn't settle on one look. So I built them all. Every design in the lab is a complete home page for the same projects, and the lab puts them side by side so they can be compared properly.
How it works
Every design reads one shared file of projects, so a new project appears in all of them at once, with its colours, video and write-up. Each design has its own folder and its own code, and none of them use image files for their visuals: the particles, planets, rooms, towns and records are all drawn in code, mostly on the graphics card.
The hard parts
Making effects this heavy run smoothly on ordinary laptops and phones. The particle designs simulate hundreds of thousands of points on the GPU and step down on slower devices, and the WebGL designs fall back to a simpler page when a browser can't run them. The best of them, Pixel Potion, became the live front page.
What I built
- 25 designs, each a complete home page that reads the same library file, so a new project shows up in every one of them
- Visuals drawn entirely in code: WebGL 2 particle engines with up to 410,000 particles, an ink simulation, a ray-traced galaxy and a three.js studio
- Playable pieces: pinball physics, a pixel-art town with pathfinding, a WebAudio step sequencer and a light-cycle game with a cheat-checked leaderboard
Updates
New front page: Pixel Potion. Hundreds of thousands of particles, simulated on the graphics card, spell the name, flow into the logo and turn into each project's video when you rest on it.
Back to the front page →