Flap

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

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

Flap: a look at the source

// Flap — a split-flap code field. No dependencies.
// One real <input> sits invisibly over the tiles, so paste, SMS autofill, the numeric
// keyboard and screen readers all work the normal way. Each tile is two fixed halves and a
// leaf hinged across the middle: the leaf shows the old glyph on its front and the new one on
// its back, and falls through 180° to reveal the new glyph, like an airport board.

const EASE_OUT = 'cubic-bezier(.23, 1, .32, 1)';
const EASE_IN_OUT = 'cubic-bezier(.77, 0, .175, 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}`,
};

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
  resendAfter = 30,    // seconds before "Resend code" can be pressed; 0 hides the wait
  minCheck = 650,      // ms the checking light runs at least, so a fast answer doesn't flash
  stagger = 50,        // ms between tiles when several flip together (paste, autofill, reset)
  successText = 'DONE', // what the board flips to once verified; centred and cut to the number of tiles
  messages = {},
} = {}) {
  const msg = { ...DEFAULT_MESSAGES, ...messages };
  const $ = s => root.querySelector(s);
  const row = $('.flap-row');
  const input = $('.flap-input');
  const ring = $('.flap-ring');
  const status = $('.flap-status');
  const resendBtn = $('.flap-resend');
  const resendText = $('.flap-resend-text');
  const timerLeft = $('.flap-timer-left');
  const continueBtn = $('.flap-continue');
…  329 more lines in the zip

/* Flap — a split-flap code field: each digit clacks down, the right code flips the board to DONE */
.flap {
  --flap-accent: #d9941f;
  --flap-ok: #0fa877;
  --flap-bad: #e5484d;
  --flap-ink: #0e1022;
  --flap-muted: #5d6178;
  --flap-card: #ffffff;
  --flap-card-2: #f6f6fb;
  --flap-edge: rgb(14 16 34 / .08);
  --flap-face: #1f2030;
  --flap-face-2: #15161f;
  --flap-face-ink: #fafafe;
  --flap-aura: rgb(217 148 31 / .1);
  --flap-button: #0e1022;
  --flap-button-ink: #ffffff;
  --flap-shadow: 0 1px 2px rgb(14 16 34 / .05), 0 24px 60px -28px rgb(60 45 10 / .35);
  --flap-w: 58px;
  --flap-h: 80px;
  --flap-gap: 10px;
  --flap-radius: 28px;
  --flap-tile-radius: 10px;
  --flap-font: "SF Pro Text", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --flap-digit-font: "SF Pro Display", "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --flap-ease: cubic-bezier(.23, 1, .32, 1);
  /* near-critical spring (damping .82, response .36s) for the gliding ring */
  --flap-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);

  position: relative;
  isolation: isolate;
  display: grid;
  gap: 22px;
  width: min(400px, 100%);
  padding: 32px 28px 24px;
  box-sizing: border-box;
  border-radius: var(--flap-radius);
  background: linear-gradient(180deg, var(--flap-card), var(--flap-card-2));
  box-shadow: inset 0 0 0 1px var(--flap-edge), var(--flap-shadow);
  color: var(--flap-ink);
  font-family: var(--flap-font);
…  273 more lines in the zip

Ask a question

What it does

A complete "enter the code we sent you" card built like an airport departures board. Four dark tiles, each split across the middle. A glowing ring glides to the tile that takes the next digit, and each digit arrives the way a split-flap does: the top leaf falls through the hinge, casting a shadow on the half below, and lands with a small clack. While the code is checked, a light passes over the tiles. A wrong code scrambles the board: every tile clacks through two random digits in red and lands blank. A right one flips the tiles one after another to green faces that spell DONE, and a Continue button rises.

Good for: Two-step sign-in, phone and email confirmation, ticketing and travel products, anywhere a little mechanical theatre fits the brand.
How it works: One real input sits invisibly over the tiles, 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 word the board flips to is an option, so OKAY, YES or a row of ticks are a one-line change. 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 six tiles: add or remove slots.

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

Use it in your project

Copy flap.css and flap.js into your project.
Add the markup from index.html (the block between the COMPONENT comments). One empty .flap-tile per digit: four are in the example, six work the same. The halves and the leaf inside each tile are built for you.
Start it and connect your own check:

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

const flap = init(document.querySelector('.flap'), {
  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 board
  },
  onResend: () => fetch('/api/send-code', { method: 'POST' }),
  onContinue: () => { location.href = '/dashboard'; },
  successText: 'DONE', // or 'OKAY', '✓✓✓✓', 'YES' … centred across the tiles
});

onComplete runs as soon as the last digit is in. Return false or throw to show an error: the board scrambles, each tile clacking through two random digits in red before landing blank, so the user can type again. Resolve and the tiles flip one after another to the letters of successText on green faces, and a Continue button appears.

There is one real <input> under the tiles, 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 flap = init(ref.current, { onComplete });
  return () => flap.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.

Can I change the word at the end?

Yes. successText takes any text; it's upper-cased and centred across the tiles.

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 tiles clack 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 flips.

Light and dark?

Both are designed. The board itself stays dark in the light theme, like a real one, 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 Flap

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

<!-- 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

index.html

<!-- clip ends at the hole
     line, so the bar sinks
     into the case -->
<g clip-path=
  "url(#latch-clip-above)">
<g class="latch-shackle">
<g class="latch-bar">
<!-- one d, four widths: a
     round polished tube -->
<path class="latch-tube
  latch-tube-1" d="…"/>

latch.css

/* pivot on the long leg,
   in SVG viewBox units */
.latch-shackle, .latch-bar {
  transform-box: view-box;
  transform-origin:
    69px 30px; }
/* scaleX fakes the turn;
   stroke width holds */
.latch-tube { …
  vector-effect:
    non-scaling-stroke; }

latch.js

// v is kept on retarget, so
// a spin never jerks
v += (-k * (x - target)
  - c * v) * (dt / 4);
x += v * (dt / 4);
…
// speed blurs the digits
const b = Math.min(2.6,
  (Math.abs(v)*cell) / 900);
if (b > 0.25) { strip.style
  .filter = `blur(${b…}px)`;

Latch

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

11 KB0 depsForms

What it does

Use it in your project

Questions

More like Flap

Dovetail

Ember

Hasp

Latch

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Flap

Dovetail

Ember

Hasp

Latch