A camera made of paper: cinematic transitions for five-minute games

A break room game is meant to take about five minutes. An opening cinematic is allowed up to about three seconds. That's one percent of the break, spent before you've touched anything, which is a good reason to be suspicious of it.

The founder's request was specific about what he'd seen elsewhere. He wanted to watch a game "move through the environment to the game board itself", the way It Takes Two and Life is Strange move their cameras. He also set the condition that decided most of the design: "the game still needs to feel like they belong in The Margin."

Borrowed craft, our paper#

So the grammar is borrowed and the materials are ours. The establishing shot, the push-in, the match cut and the focus pull all come from film and big games. What moves on screen is paper, pencil and ink.

Paper Plane opens with the notebook's page turning. Table for Six and Stack arrive the way a drawing does, pencil lines first and then ink and color settling in. On the web, the shelf card you tapped becomes the table in Table for Six, and in Volley a pencil dot on the page becomes the knot in the net's tape before the camera eases back to the whole court. The push-in is one continuous move from the season's scenery down to the board, with no cut. Play again gets a rewind scribble, the loop you'd draw in a margin to mean "go back".

Under all of it is one shared camera, platform-free like the rest of the games. It works in 2.5D: a position, a zoom, a small roll, a depth per layer of scenery so near things slide faster than far ones, and a focus pull that fakes depth of field by softening and fading whichever layers are out of focus. A shot is a timeline of camera keys with easing. Openings stay under about 3 seconds, and the beats between levels and on a win or a loss stay under about 1.5.

The skip rules#

A tap or any key skips whatever is playing. "Skip openings" is a setting and it stays set. With reduced motion on, every camera move becomes a plain cross-fade. Input is never held for longer than one beat, and the whole thing has to fit inside the frame budget the scenery already uses.

Here is what the scripts ask for. Volley opens in 2.6 s. Loose Ends and Catch the Tasks take 2.7 s, The Week, Table for Six and Stack 2.8 s, and Paper Plane 2.9 s. A level start or a retry is 0.9 s, the end of a round or the next level 1.1 s, a win or a loss 1.5 s. A test keeps every opening within 3 s and every beat within 1.5 s, and checks that each one leaves the camera at rest.

We measured before launch on a CPU canvas in Node, on a 390 by 720 phone surface at 1.5x, on a box that was busy at the time, so read them as ceilings. The cinema's own JavaScript averages 0.03 to 0.08 ms a frame. The worst frame is about 2 ms, the first time it allocates a caption slip or a sketch. In a typical frame the overlay makes 60 to 440 draw calls, and about 690 at the peak of The Week's sketch-in, where the test's cap is 1,200. Over the same scenery at rest, the camera adds about 0.5 to 1.5 ms of raster time. A cut costs one extra full-surface copy while it fades, for under a second, and nothing is blurred frame by frame.

Nothing holds your input. During an opening, the first press or key only skips it (a tap meant to skip shouldn't drop a Stack card) and the camera eases to rest in 0.2 s. During a beat, your input goes straight to the game, with the pointer mapped through the moving camera.

Before launch we drove six of the seven games (Volley was still being rebuilt) through their real web wrappers, on a 390 by 844 touch screen and a 1440 by 900 desk. On the phone we tapped during each opening, and the start card came up 77 to 328 ms after the tap. On the desk nobody touched anything, and every opening finished and handed over by itself.

We still have mixed feelings. The sketch-in is lovely, and it is also three seconds between you and the thing you came for. The skip setting is there because both of those are true.