Pleat

A one-time code field on a paper strip that folds like a fan into a check.

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 $44, you save $11

Pleat: a look at the source

// Pleat — a one-time code field on a paper strip that folds like a fan into a check. No dependencies.
// One real <input> sits invisibly over the strip, so paste, SMS autofill, the numeric keyboard and
// screen readers all work the normal way. Each panel of the strip is drawn on top and folded with
// 3D transforms that turn it about the crease it shares with its neighbour.

const EASE_OUT = 'cubic-bezier(.23, 1, .32, 1)';
const EASE_IN_OUT = 'cubic-bezier(.77, 0, .175, 1)';
const RECOIL = 'linear(0, .087, .268, .464, .636, .771, .869, .933, .973, .996, 1.007, 1.011, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1.001, 1.001, 1, 1, 1)';

const DEFAULT_MESSAGES = {
  checking: 'Checking the code…',
  success: 'Verified.',
  error: 'That code didn’t match. Try again.',
  sent: 'We sent you a new code.',
  resend: 'Resend code',
  resendIn: time => `Resend code in ${time}`,
};

// The folds, in order: both ends turn in over their neighbours until the two halves meet, then the
// left half turns over onto the right. Each fold names the crease it turns about (the left edge of
// panel `crease`), its direction and the panels that travel with it.
function plan(n) {
  const range = (a, b) => Array.from({ length: b - a + 1 }, (_, k) => a + k);
  const steps = [];
  let a = 0;
  let b = n - 1;
  while (b - a >= 2) {
    steps.push([{ crease: a + 1, dir: 1, members: range(0, a) }, { crease: b, dir: -1, members: range(b, n - 1) }]);
    a++; b--;
  }
  if (b - a === 1) { steps.push([{ crease: b, dir: 1, members: range(0, a) }]); a = b; }
  return { steps, rest: a }; // `rest`: the panel the folded stack ends up lying on
}

export function init(root, {
  onComplete,          // async (code) => resolve when it matches; return false or throw when it doesn't
  onChange,            // (code) => void, on every change
  onResend,            // () => void, when the user asks for a new code
  onContinue,          // () => void, the button shown once verified
  autoSubmit = true,   // check as soon as the last digit is in
…  429 more lines in the zip

/* Pleat — a one-time code field on a paper strip that folds like a fan into a check */
.pleat {
  --pleat-accent: #3554e8;
  --pleat-ok: #1fbf8a;
  --pleat-ok-2: #0f9e72;
  --pleat-ok-ink: #ffffff;
  --pleat-bad: #e5484d;
  --pleat-ink: #1a1813;
  --pleat-muted: #6b675c;
  --pleat-card: #ffffff;
  --pleat-card-2: #f7f6f2;
  --pleat-edge: rgb(26 24 19 / .08);
  --pleat-paper: #fdfcf8;
  --pleat-paper-2: #f1eee5;
  --pleat-paper-back: #c9d1f6;
  --pleat-paper-back-2: #b6c0f0;
  --pleat-crease: rgb(80 66 30 / .16);
  --pleat-crease-light: rgb(255 255 255 / .9);
  --pleat-panel-shadow: 0 1px 1px rgb(60 48 20 / .06), 0 12px 22px -16px rgb(60 48 20 / .45);
  --pleat-aura: rgb(53 84 232 / .07);
  --pleat-button: #1a1813;
  --pleat-button-ink: #ffffff;
  --pleat-shadow: 0 1px 2px rgb(26 24 19 / .05), 0 24px 60px -28px rgb(60 50 30 / .32);
  --pleat-w: 54px;
  --pleat-radius: 28px;
  --pleat-strip-radius: 12px;
  --pleat-font: "SF Pro Text", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pleat-digit-font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, sans-serif;
  --pleat-ease: cubic-bezier(.23, 1, .32, 1);
  /* near-critical spring (damping .82, response .36s): the ring, no bounce */
  --pleat-settle: linear(0, .087, .268, .464, .636, .771, .869, .933, .973, .996, 1.007, 1.011, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1.001, 1.001, 1, 1, 1);
  /* underdamped spring (damping .68, response .42s): the green card settles with one soft overshoot */
  --pleat-spring: linear(0, .062, .205, .381, .555, .709, .834, .926, .99, 1.028, 1.048, 1.054, 1.052, 1.044, 1.035, 1.025, 1.017, 1.01, 1.005, 1.001, .999, .997, .997, .997, .998, .998, .999, .999, 1);

  position: relative;
  isolation: isolate;
  display: grid;
  gap: 22px;
  width: min(420px, 100%);
  padding: 32px 28px 24px;
…  339 more lines in the zip

Ask a question

What it does

A complete "enter the code we sent you" card with six panels joined edge to edge, like a strip of stiff paper. A glowing ring glides to the panel that takes the next digit, and each digit presses into the paper. While the code is checked, a light runs along the creases. A wrong code makes the strip buckle into a zig-zag and spring flat in red while the digits drop out. A right one folds the strip like a fan: both ends turn in over their neighbours, showing the tinted reverse of the paper, until the halves meet and fold together. The stack slides to the middle, turns over onto a green face, a check draws across it and a Continue button rises.

Good for: Two-step sign-in, phone and email confirmation, payment confirmations, any screen that asks for a one-time code and deserves a moment at the end.
How it works: One real input sits invisibly over the strip, so paste, SMS autofill and screen readers work the usual way. Your check runs as soon as the last digit is in, and its answer picks the ending. The folds are real 3D turns about each crease, worked out from the number of panels in your markup. A resend button counts down before it can be pressed.
How to use: Copy two files, paste the markup, pass your own onComplete(code).

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

Use it in your project

Copy pleat.css and pleat.js into your project.
Add the markup from index.html (the block between the COMPONENT comments). The strip is six .pleat-tiles; use as many as your code has digits.
Start it and connect your own check:

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

const pleat = init(document.querySelector('.pleat'), {
  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 strip
  },
  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 strip buckles into a zig-zag, springs flat with the digits in red, and the digits drop out so the user can type again. Resolve and the strip folds: both ends turn in over their neighbours, panel by panel, until the halves meet and one folds over the other. The folded stack slides to the middle and turns over onto its green face, a check draws across it and a Continue button appears.

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

useEffect(() => {
  const pleat = init(ref.current, { onComplete });
  return () => pleat.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 it work with 4 or 8 digits?

Yes. Add or remove .pleat-tiles; the field length and the folds follow the markup, and the strip shrinks to fit narrow screens.

Does autofill from SMS work?

Yes. It's a normal input with autocomplete="one-time-code", so iOS and Android offer the code from the message, and the digits press 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 verified. With reduced motion nothing folds.

Light and dark?

Both are designed, and 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 Pleat

All forms

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

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

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

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

7.8 KB0 depsForms

index.html

<!-- the shackle sits
     outside the body, so
     it lifts and swings -->
<svg class="hasp-shackle" …>
<div class="hasp-body">
  <!-- one real input over
       all four wheels -->
  <input class="hasp-input"
    …>
  <span class="hasp-wheel"
    aria-hidden="true">

hasp.css

/* the wheel clips a strip:
   --hasp-at picks the row,
   a spring rolls it in */
.hasp-strip {
  transform: translateY(
    calc(var(--hasp-at) *
    var(--hasp-wheel-h)
    * -1));
  transition: transform
    var(--hasp-roll, 420ms)
    var(--hasp-glide);

hasp.js

// the further it has to go,
// the longer: 40ms a row
const dist = Math.abs(
  at - from);
strip.style.setProperty(
  '--hasp-roll',
  `${Math.min(640,
  240 + dist * 40)}ms`);
// then just name the row
strip.style.setProperty(
  '--hasp-at', at);

Hasp

A combination-padlock code field whose wheels roll and whose shackle springs open

7.7 KB0 depsForms

What it does

Use it in your project

Questions

More like Pleat

Dovetail

Ember

Flap

Hasp

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Pleat

Dovetail

Ember

Flap

Hasp