How we built drakecode.com

What you see

The whole website runs inside the screen of a 3D handheld game console. A phone held upright gets a tall console; a mouse, or a phone held sideways, gets a wide one.

It opens with LOADING and PRESS START, types DRAKECODE like someone coding on an old terminal, then the line YOU DREAM IT. WE BUILD IT. Next comes the list of websites we built, each with its recorded video. At the end the console falls, the pixel dragon comes out of the screen and changes through its 3D styles, and a 3D BUILD YOURS button rewinds into the booking.

What it weighs

Every 3D model is a compressed glTF file (Draco), and the decoder is served from this website, so the page never calls another server for it. The sizes of the files as they are served:

A form that books a real call

The booking is drawn on the console's screen in its pixel font, and it books a real call: it reads the open times from our calendar, books the one you pick, and the confirmation comes by email. Underneath the screen is a real HTML form, which phone keyboards and autofill use.

Book a call has the same booking as a plain page.

Contrast, computed

Every text colour is checked against the colour behind it with the WCAG formula, not judged by eye. Normal text needs 4.5:1. These are the ratios, computed when this page was built:

Skip, and less motion

Every sequence has a SKIP button: the intro, the ending, both rewinds and the credits. On a keyboard, Escape skips too (Enter, in the credits). The intro plays once per browser.

With your device set to reduce motion, the scenes cut instead of moving: no camera orbit, no typing, and the credits wait for you instead of rolling.