Latch

A one-time code field that dials in like a combination lock and springs open on the right code.

A UI component for any site
Plain HTML, CSS and JavaScript, no dependencies
Use it in unlimited client projects

Checkout opens soon.
14-day refund if it doesn’t do what the demo shows.

BundleAll forms: 11 pieces for $118, you save $29

Latch: a look at the source

// Latch — a one-time code field that dials in like a combination lock. No dependencies.
// One real <input> sits invisibly over the wheels, so paste, SMS autofill, the numeric
// keyboard and screen readers all work the normal way. Everything else is drawn on top.

const EASE_OUT = 'cubic-bezier(.23, 1, .32, 1)';
const STOPS = 11;  // every wheel has a blank stop, then 0–9
const LAPS = 6;    // the strip repeats so a spin never runs off either end
const HOME = 3;    // the lap a resting wheel sits in

// damped spring as a 0→1 curve, and as a CSS linear() easing for WAAPI
function spring(zeta, response) {
  const w0 = (2 * Math.PI) / response;
  const wd = w0 * Math.sqrt(1 - zeta * zeta);
  return t => 1 - Math.exp(-zeta * w0 * t) * (Math.cos(wd * t) + ((zeta * w0) / wd) * Math.sin(wd * t));
}
function easing(curve, ms, steps = 40) {
  const out = [];
  for (let k = 0; k <= steps; k++) out.push(k === steps ? 1 : +curve((k / steps) * (ms / 1000)).toFixed(4));
  return `linear(${out.join(', ')})`;
}
const POP = easing(spring(0.42, 0.3), 640);     // the shackle springs up: one hard bounce
const SWING = easing(spring(0.74, 0.7), 1000); // then turns on its long leg
let uid = 0;

// a spring you can retarget, kick or shift at any moment; it carries its velocity through
function follower(paint, { response = 0.5, zeta = 0.82 } = {}) {
  const k = ((2 * Math.PI) / response) ** 2;
  const c = (4 * Math.PI * zeta) / response;
  let x = 0, v = 0, target = 0, raf = 0, last = 0;
  const frame = now => {
    const dt = Math.min((now - last) / 1000, 1 / 30);
    last = now;
    for (let s = 0; s < 4; s++) { v += (-k * (x - target) - c * v) * (dt / 4); x += v * (dt / 4); }
    if (Math.abs(x - target) < 0.002 && Math.abs(v) < 0.02) { x = target; v = 0; raf = 0; paint(x, 0); return; }
    paint(x, v);
    raf = requestAnimationFrame(frame);
  };
  const run = () => { if (!raf) { last = performance.now(); raf = requestAnimationFrame(frame); } };
  return {
    get x() { return x; },
…  449 more lines in the zip

/* Latch — a one-time code field that dials in like a combination lock and springs open on the right code */
.latch {
  --latch-card: #f4f5f7;
  --latch-card-2: #e3e6ea;
  --latch-edge: rgb(20 28 40 / .1);
  --latch-grain: rgb(255 255 255 / .5);
  --latch-recess: #c9ced5;
  --latch-face: #fdfdfe;
  --latch-face-edge: #c6ccd3;
  --latch-ink: #1b2129;
  --latch-muted: #5f6873;
  --latch-brass: #a8781f;
  --latch-brass-glow: color-mix(in srgb, var(--latch-brass) 34%, transparent);
  --latch-go: #12996a;
  --latch-go-glow: rgb(18 153 106 / .32);
  --latch-bad: #cc3b2e;
  --latch-lamp-off: #b9c0c8;
  --latch-shade: rgb(70 80 96 / .5);
  --latch-steel-top: #ffffff;
  --latch-steel-hi: #eef1f4;
  --latch-steel-mid: #d9dee4;
  --latch-steel-lo: #a9b1bb;
  --latch-steel-edge: rgb(20 28 40 / .2);
  --latch-brush-opacity: .35;
  --latch-chrome-edge: #59616b;
  --latch-chrome-body: #a3acb6;
  --latch-chrome-light: #e3e8ed;
  --latch-chrome-core: #ffffff;
  --latch-dial-hi: #343a43;
  --latch-dial-lo: #0e1114;
  --latch-dial-ink: #eef1f5;
  --latch-floor-opacity: .45;
  --latch-button: #1b2129;
  --latch-button-ink: #f4f5f7;
  --latch-shadow: 0 1px 2px rgb(20 28 40 / .08), 0 28px 60px -30px rgb(20 28 40 / .45);
  --latch-wheel-w: 52px;
  --latch-radius: 26px;
  --latch-font: "SF Pro Text", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --latch-digits: "DIN Alternate", "Bahnschrift", "D-DIN", "DIN 2014", "Barlow", "SF Pro Display", system-ui, sans-serif;
  --latch-ease: cubic-bezier(.23, 1, .32, 1);
…  350 more lines in the zip

Ask a question

What it does

A complete "enter your security code" card built like a piece of hardware. Every digit is a number wheel in a machined slot. When you type, the wheel spins and settles on the digit, a lamp under it lights, and the numbered dial on the padlock above is turned right, then left, bringing each digit's number under the index, the way a combination is dialled. The padlock is drawn like the real thing: a polished shackle that sits in its holes, a brushed steel body and a black dial with a knurled brass rim. While the code is checked, the tumblers are tried one after another. A wrong code turns the lamps red, the shackle is yanked twice and stops hard against the latch, the dial spins back to zero and the wheels to blank. A right one turns the lamps green one by one, then the shackle springs up out of its hole and turns open on its long leg before a Continue button appears.

Good for: Sign-in codes, two-step verification, unlocking a vault, wallet or private area, phone and email confirmation.
How it works: One real input sits invisibly over the wheels, so paste, SMS autofill and screen readers work the usual way. Your check runs as soon as the code is complete, and its answer picks the ending. A resend button counts down before it can be pressed.
How to use: Copy two files, paste the markup, pass your own onComplete(code). Four or eight digits: add or remove wheels.

Price: $12, one payment
Version: 1.0.0
Code size: 11 KB gzipped
Dependencies: None
Built with: HTML, CSS, JavaScript
Category: Form
Licence: Unlimited personal and client projects
In the zip: latch.css latch.jsthe component
index.htmla plain example page
README.md package.json vite.config.js LICENSE.md

Use it in your project

Copy latch.css and latch.js into your project.
Add the markup from index.html (the block between the COMPONENT comments). One empty .latch-wheel per digit: six are in the example, four or eight work the same. The script fills each wheel in.
Start it and connect your own check:

import { init } from './latch.js';

const latch = init(document.querySelector('.latch'), {
  onComplete: async (code) => {
    const res = await fetch('/api/verify', { method: 'POST', body: JSON.stringify({ code }) });
    if (!res.ok) throw new Error('That code has expired. Send a new one.'); // shown under the field
  },
  onResend: () => fetch('/api/send-code', { method: 'POST' }),
  onContinue: () => { location.href = '/dashboard'; },
});

onComplete runs as soon as the last digit is in. Return false or throw to show an error: the lamps go red, the padlock is tugged and holds, and the wheels spin back to blank so the user can type again. Resolve and the lamps turn green one by one, the padlock's shackle springs up and turns open on its long leg, and a Continue button appears.

There is one real <input> over the wheels, so the things that normally work with a code field still do: paste, SMS autofill (autocomplete="one-time-code"), the numeric keyboard on phones, and screen readers.

useEffect(() => {
  const latch = init(ref.current, { onComplete });
  return () => latch.destroy();
}, []);

Questions

What exactly do I get?

The full source, an example page and a README. No account, no framework.

Can I use it in client projects?

Yes, in unlimited projects. You can't resell or share the source itself.

Does it check the code?

It calls your function with the code and shows the answer. Checking belongs on your server; the demo only compares against a fixed code.

Does autofill work?

Yes. It's a normal input with autocomplete="one-time-code", so phones offer the code from the message, and the wheels spin in one after another.

Is it accessible?

One labelled field, numeric keyboard on phones, live status messages, aria-invalid on errors, and focus moves to Continue once unlocked. With reduced motion nothing spins.

Can I leave out the padlock?

Yes. Delete its SVG and the wheels, lamps and messages work the same.

Light and dark?

Both are designed: brushed aluminium and graphite. Every colour is a CSS variable.

What if it doesn't work for me?

If it doesn't work like the demo, you get a refund within 14 days.

Still have a question? Email us. The person who made it answers.

More like Latch

All forms

index.html

<!-- eyes before the head:
     they sink behind it -->
<g class="tuck-eye
  tuck-eye--back">
…
<path class="tuck-body" …/>
<!-- the engine finds the
     password by this -->
<input class="tuck-input
  tuck-input--secret" …
  data-mascot="secret" …>

tuck.css

/* hide: stalks shrink to
   their base, the eyes sink
   behind the head */
.tuck[data-mood="hide"]
  .tuck-stalk, …
{ transform: scaleY(0); …
.tuck[data-mood="hide"]
  .tuck-eye--front, …
{ transform:
  translate(4px, 54px); …

mascot.js

// the eyes chase the caret:
// width of the text before
// it, in the input's font
ctx.font = `${cs.fontWeight}
  ${cs.fontSize} …`;
…
// scrolled fields shift the
// text; clamp to the field
x: clamp(left + ctx
  .measureText(text).width
  - input.scrollLeft, …

Tuck

$29

Sign-up, sign-in and reset forms with a snail that pulls its eyes in while you type your password

10.6 KB0 depsForms

index.html

<!-- one real input; js
     draws each piece's
     outline as an svg -->
<div class="dovetail-row">
  <input
    class="dovetail-input"
    …>
  <span
    class="dovetail-piece"
    aria-hidden="true">
  </span>

dovetail.css

/* js sets each slide's
   length; a cut-off one
   resumes where it is */
.dovetail-piece {
  translate: 0 0;
  transition:
    translate
    var(--dovetail-move)
    var(--dovetail-glide), …
.dovetail-piece.is-lifted {
  … scale: 1.06; }

dovetail.js

// tab and socket share
// points: they meet exactly
function outline(s,
  socket, tab) {
  return rounded([
    ...(tab ?
      tabPoints(W, s) : []),
    …
    ...(socket ?
      tabPoints(0, s)
      .reverse() : []),

Dovetail

$12

A one-time code field of puzzle pieces that slide together and lock into a check

11 KB0 depsForms

index.html

<!-- a coal per slot; the
     check has no d, js
     fits it to the row;
     sparks spawn in fx -->
<span class="ember-slot" …>
  <span class="ember-wick">
  </span></span>
…
<svg class="ember-mark" …>
<path class="ember-check"/>
<span class="ember-fx" …>

ember.css

/* two copies of the digit:
   a blurred one behind it
   carries the heat */
.ember-num, .ember-heat {
  grid-area: 1 / 1;
…
.ember-heat {
  color: var(--ember-flame);
  filter: blur(7px);
  opacity: .3; …

ember.js

// one eased k draws the
// stroke and puts the spark
// at its tip, via along(k)
const k = easeInOut(
  Math.min(1, (now - t0)
  / dur));
const [x, y] = along(k);
… p.style.strokeDashoffset
  = String(1 - k);
… c.setAttribute('cx', x);

Ember

$12

A one-time code field where each digit lights like an ember and a wrong code turns to ash

9.3 KB0 depsForms

index.html

<!-- one real input on top;
     the tiles stay empty,
     flap.js adds halves
     and a hinged leaf -->
<div class="flap-row">
  <input class="flap-input"
    id="otp" type="text" …>
  <span class="flap-tile"
    aria-hidden="true">
  </span>
  …

flap.css

/* one leaf, two faces:
   the back waits folded
   behind the front */
.flap-tile {
  perspective: 480px; …
.flap-leaf-front,
.flap-leaf-back {
  backface-visibility:
    hidden; …
  transform:
    rotateX(180deg); }

flap.js

// new glyph: top half and
// leaf back; the old one
// stays on the leaf front
paint(c.top, glyph, tone);
paint(c.back, glyph, tone);
// fall to -180, bounce 5°
// back and settle: clack
const a = c.leaf.animate(
  … 'rotateX(-180deg)',
  offset: 0.86, …
  'rotateX(-175deg)', …

Flap

$12

A split-flap code field that clacks each digit down and flips the board to DONE

7.8 KB0 depsForms

What it does

Use it in your project

Questions

More like Latch

Tuck

Dovetail

Ember

Flap

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Latch

Tuck

Dovetail

Ember

Flap