Skip to content
id0
Interface Collection
Developer card

All works Concept

Kern 75

Launch of a small batch of aluminium keyboards

Watch the Kern 75 come apart layer by layer, compare three switches on their force curves, configure the keyboard with an itemised price, and send a reservation request for batch 1.

Next.js · React · TypeScript

Kern 75: first screen on a desktop
Kern 75: first screen on a phone

Design problem

A premium keyboard is chosen on details a photo does not show: the layers inside, the feel of a switch, the typing angle. The visitor needs to see them before holding a place in a batch that ships months later.

Down the page

Kern 75 on a desktop, further down the page, frame 1Kern 75 on a desktop, further down the page, frame 2Kern 75 on a desktop, further down the page, frame 3
Kern 75 on a phone, further down the page, frame 1Kern 75 on a phone, further down the page, frame 2Kern 75 on a phone, further down the page, frame 3

Main user flow

  1. See what is inside

    Scrolling takes the keyboard apart into eight labelled layers and puts it back together.

  2. Compare switches

    Choose linear, tactile, or click; the key presses on the model and the force curve marks where it registers.

  3. Configure and reserve

    Finish, keycaps, and legends repaint the same model, the price is itemised in the visitor's currency, and a reservation request takes no payment.

Key decisions

  • The first frame arrives with the text

    A still of the lit desk paints with the headline and the live scene fades in over it once ready; devices without WebGL keep a still for each scene.

Next work Pogoda Coffee roaster's shop where every coffee has its own weather