All projects
Book a call

Interactive

Kolík

Industry
Locksmith, Žilina
Business
Fictional, sample
Open the demo
Kolík, locksmith, Žilina

The brief

Show that they understand locks, and bring people in for a key copy.

The solution

A cut-away lock cylinder where customers insert the key themselves. The key copy is made as you scroll.

Fonts and colors

Kolík

Headings
Instrument Serif
Text
Instrument Sans
  • #F2F0EB
  • #1C1C1A
  • #FF4D17
  • #138A5A
  • #E3C27A

What you can try in the demo

  1. Take the key off the ring and drag it into the cylinder. The spring-loaded pins react to it.
  2. Only one key unlocks it. With a wrong one, the pin that doesn’t fit changes colour.
  3. As you scroll down, the key is copied in five steps, from clamping to holding it against the original.

Plain SVG and JavaScript, with no libraries and no WebGL.

On tablet and phone