The key lock button

Buttons, Physics, SVGGSAP, CSS onlyAdvancedCompressed weight: Demo 9.8 KBGSAP 28 KBFreeDownload the zip

The Sign in button with a pin tumbler lock cut in half inside it, drawn like a technical drawing: five spring loaded pin stacks at the wrong heights. Pressed, the key slides in from the left and its teeth lift the pins one by one as they pass, the springs squeeze and stretch; when every gap reaches the shear line a thin light runs along the line, the plug turns and the button says Signed in. With the wrong key one pin stays across the line, the plug shakes and says Wrong key.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The key lock button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the button: a pin tumbler lock cut in half, drawn like a technical drawing inside the pill. Pressed, the key
         slides in from the left, its teeth lift the five pin stacks one after the other, and when every gap meets the
         shear line the plug turns. The small button under it tries a key that is cut wrong -->
    <div class="lock" data-lock>
      <button class="lock__btn" type="button" aria-describedby="lock-status" data-btn data-autoclic>
        <!-- three layers: the still housing, the plug's cut face (it only moves when the plug turns) and the moving
             parts, so a frame of the key sliding repaints only the light drawing on top -->
        <svg class="lock__art" viewBox="0 0 390 120" aria-hidden="true" data-art="base"></svg>
        <svg class="lock__art lock__art--face" viewBox="0 0 390 120" aria-hidden="true" data-art="face"></svg>
        <svg class="lock__art" viewBox="0 0 390 120" aria-hidden="true" data-art="move"></svg>
        <span class="lock__label" data-label>
          <span class="lock__word" data-word>Sign in</span>
          <svg class="lock__icon" viewBox="0 0 24 24" aria-hidden="true" data-icon><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></svg>
        </span>
      </button>
      <button class="lock__wrong" type="button" data-wrong>Try wrong key</button>
      <p class="sr" id="lock-status" aria-live="polite" data-live></p>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

28 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The key lock button” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a white page a paper coloured pill with a dark edge: on the left a lock cut in half, on the right the words Sign in with an arrow. The lock is drawn as in a manual: the grey steel housing hatched at 45 degrees, the brass plug hatched the other way, the dashed blue shear line between them and, in the five chambers, five stacks: a brass key pin with a rounded tip, a steel driver pin and a spring drawn as slanted coils. At rest the pins are down, each at a different height, and the driver pins cross the line. With the pointer on it, the tip of the key comes to the keyway and waits. Pressed (or with Enter) the key slides in: the teeth pass under the pins, which rise and drop back on their springs, the coils close up and open out, until the key is home and knocks against the stop. Then every gap is on the line: a thin light runs along the line from left to right and leaves it lit, the plug turns (its cut face flattens towards the axis, the round brass shows and the head of the key becomes a thin edge of metal) and the words become Signed in in green, with a tick. After a few seconds the plug turns back, the key comes out and the pins drop. Under the pill a small button, Try wrong key, tries a key with one cut wrong: the light runs as far as the fourth pin and turns red, that pin stays across the line, the plug tries to turn and shakes, the words say Wrong key in red and the key comes out.

How it works

A real lock, in numbers

The measures are those of a pin tumbler cylinder: the shear line, the plug, the keyway and five chambers. Everything else comes from CUTS, the height of the key’s edge under each pin: each brass pin is as long as it must be for its top to reach the line exactly with the right key. The wrong key has a single cut that differs, and its pin goes past the line.

The key’s profile

The key’s edge is a function: at each distance from the tip, the lowest of the tip’s ramp and, for each cut, the bottom of the cut plus a 45 degree climb. The same profile draws the key (sampled every pixel into an SVG path) and holds up the pins.

Pins on damped springs

Each stack is a spring pushing down, with a preload, and some damping. Its floor is the key’s edge under the pin, sampled over the whole rounded tip: the pin never goes through it, and if the edge rises fast it throws the pin up at its speed. So the teeth make the pins jump and the springs bring them down. Eight small steps a frame, with the key sliding on between steps, and a stop when the spring is closed solid.

Springs redrawn every frame

A spring in a technical drawing is a row of slanted strokes: dark in front, lighter behind. The script works it out every frame from its length, between the end of the chamber (a drill point, at 118 degrees) and the top of the driver pin, and the coils close up and open out by themselves.

The light and the turn of the plug

With the key home the script checks that every gap is on the line within a pixel. The light is a gradient running along the line with a white head, plus a blurred copy. The plug’s turn flattens its cut face towards its axis by the cosine of the angle, while the edge of the key shows, as tall as the sine; the hatched face is an SVG layer of its own that turns as a picture, and the hatching is not repainted while the key slides.

Values to change

Name	File	Default	What it changes
`INSERT`	script.js	`1.5`	The seconds the key takes to slide all the way in.
`PIN`	script.js	`[2400, 30]`	The pin springs: how hard they push the pins down, and how damped they are.
`CUTS`	script.js	`[16, 8, 20, 12, 6]`	The key’s cuts: how high its edge is under each pin, from 2 to 22 (the pins are made to match).
`TURN`	script.js	`90`	How far the plug turns once the pins line up, in degrees.
`SIGNED`	script.js	`2.6`	The seconds it stays signed in before the key comes out.
`WRONG`	script.js	`false`	true: the main button tries the wrong key too, to see the lock jam.

Try them in the Playground

When to use it

For the sign in of an app about security (a password manager, a bank, a file vault) or for the last step of a login form. It stands alone on a light background; on a real site the wrong key button goes, and WRONG, or your own failed login, shows Wrong key.

On phones

The pill scales to the width of the screen (at 390 pixels it is 358 wide) with all of the drawing. A finger resting on it brings the key to the keyway, lifting it slides the key in; the wrong key button is big enough for a thumb.

With reduced motion

The key does not slide: it appears already in, with a fade, the pins already in place. The line lights up with a fade, the plug is shown turned without an animation, the words change with a fade; with the wrong key it does not shake, the red light stops at the wrong pin.

Pitfalls

The key moves once a frame, the pins’ physics eight times: on the first step the edge jumped at once and threw the pins out of the drawing. The key now slides on between steps too, the edge’s speed has a limit and the spring closed solid acts as a stop.
The hatching, an SVG pattern, was repainted every frame along with the key, and a slow computer stalled: the drawing is three SVG layers, the still housing, the plug’s face (it only moves with the turn, as a CSS transform) and the moving parts with no hatching.
With all the brass pins the same length the right key could not exist: each pin’s length comes from its cut, so changing CUTS keeps the lock openable.
With the shear line alone you could not tell the plug had turned: the cut face flattens towards the axis by the cosine, the round brass shows under it and the head of the key becomes its thickness.
The drawing over the button took the pointer and moving across its parts was costly: the SVG layers and the words have pointer-events: none, the real button gets everything.

Libraries

GSAP 3.15.0, Geist (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 9.8 KB; the libraries: GSAP 28 KB.

Testing

Tested on 5 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: Done

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.