Tidewalker Media Back to the room

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.
The studio as a single still painting: dark screens, still water. The same studio running: three screens playing, the projector's beam, labels on everything that can be clicked.
Drag across. Underneath is one still picture; on top, everything that was built onto it.

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.

The pool, cut from the scene. Thirty seconds, no seam.

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.

Four phone views: Reel A, the feature screen, Reel B, and the floor with the pool in view.
The phone's own version, after the fix: Reel A, the feature, Reel B, and the floor.

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

harpersutton.com: a waterfall, a great moon and a stag, with the author's name across the scene.

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