Case study / tidewalkermedia.com
The room is the portfolio.
Most portfolios are a list of links. This one is a place: a film studio after hours, with three screens running, a projector you can switch, a pool that ripples in the fan's wind and a room that answers when the sound is on. Everything in it does something.
Designed and built by Darren Brazeal
- Role
- Concept, art direction, interaction design, sound, development
- Made of
- Plain HTML, CSS and JavaScript, one WebGL shader, the Web Audio API. No framework.
- Built for
- The desktop first, as an experiment. Phones get a lighter version of their own.
01
One painting, twenty-two moving parts
The studio began as a single wide frame, 3,376 pixels across, art-directed and then corrected by hand where the generated original got things wrong. Nothing in that frame moves.
So everything that moves was built as its own layer and laid back over it: the clips in the three screens, the wind on the water and in the leaves, two fans, the banner cloth, the sweeping rig lights, the dust in the projector's beam. They all keep one thirty-second clock, so the room loops without a seam.
02
Screens that sit in the picture
The three screens hang at angles, so each clip is pinned to its screen corner by corner, in perspective, and then given what a real screen has: glass, a darker rim, a shadow on the wall behind, and a walkway and guardrail passing in front.
The projector is not decoration. Click it and the light stutters out, the reel changes, and the beam on the centre screen dims and flares with the cuts of the film it is showing.
03
Wind on the water
The pool is the painting's own pixels, pushed around by a small shader: six trains of ripples that travel away from the fan, bunch up with distance as real ones do, and never drag the bank or a leaf into the water. Each train completes a whole number of cycles in thirty seconds, which is why you cannot find the loop.
04
A room you can hear
Sound follows rules a visitor never has to learn. An ident plays first, then the theme comes in and loops on exact sample points. Ask for a trailer's sound and the music steps out of its way. The centre screen is heard the way it would be in a hall that size: the reverb and the slap off the far wall are worked out in the browser, not baked into the files.
05
Twelve faults, one week
This room is an experiment, and it was built for a desktop first. Experiments break. In its first week twelve faults were found and fixed: six reported from real devices, six caught by testing before a visitor could meet them. More than 120 automated checks now run before every release.
- 12
- faults found and fixed in the first week
- 6
- reported from real phones and screens
- 6
- caught in testing, before launch
- 120+
- automated checks before every release
The largest was the phone. Twenty-two layers, each far bigger than its screen, were more than an older phone's graphics memory could hold, and the page blinked black on every move. Shrinking the scene would not have fixed that, so the phone was given an engine of its own: one still room, three screens pinned onto it, five layers in place of twenty-two, and 2.1 MB to open in place of 4.7.
Others were smaller and stranger. A first tap in the wrong half second asked an old phone to do six things at once, and it stopped; now it does them one at a time. A phone painted a screen's soft rim in tiles and dropped the bottom row. The projector's light began on a dead-straight line nobody had noticed until it was seen on a small screen.
06
Restraint
Nothing runs unseen. The whole room holds when the page is in the background, and on a phone only the screen being looked at plays; the eleven-megabyte trailer is fetched there only when someone asks for it. A visitor who has asked their device for less motion gets a calmer room, with still water and still fans. Every label works from a keyboard.
I directed the build the way I direct a film, with AI-assisted development: by eye, a shot at a time, until it was right.
Also designed and built
An author's world, made interactive.
harpersutton.com, an immersive site for fantasy author Harper Sutton: one continuous animated world, built with TypeScript, Vite and GSAP. Where this room is a desktop experiment, that site was designed to run anywhere, and is as much at home on a phone as on a desk.
Visit harpersutton.com