Ember

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

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

Ember: a look at the source

// Ember — a one-time code field where each digit lights like an ember. No dependencies.
// One real <input> sits invisibly over the slots, 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 easeInOut = t => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
const rand = (a, b) => a + Math.random() * (b - a);

const DEFAULT_MESSAGES = {
  checking: 'Checking the code…',
  success: 'Signed in.',
  error: 'That code didn’t work. Check the message and 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 signed in
  autoSubmit = true,   // check as soon as the last digit is in
  resendAfter = 30,    // seconds before "Resend code" can be pressed; 0 = no wait
  minCheck = 700,      // ms the heat runs along the row at least, so a fast answer doesn't flash
  stagger = 50,        // ms between slots when several change together (paste, autofill)
  sparks = true,       // little sparks when a digit lights; false keeps the glow only
  messages = {},
} = {}) {
  const msg = { ...DEFAULT_MESSAGES, ...messages };
  const $ = s => root.querySelector(s);
  const field = $('.ember-field');
  const row = $('.ember-row');
  const input = $('.ember-input');
  const fx = $('.ember-fx');
  const mark = $('.ember-mark');
  const check = $('.ember-check');
  const halo = $('.ember-check-halo');
  const spark = $('.ember-spark');
  const sparkGlow = $('.ember-spark-glow');
…  426 more lines in the zip

/* Ember — a one-time code field where each digit lights like an ember and a wrong code turns to ash */
.ember {
  --ember-card: #fffaf5;
  --ember-card-2: #fcefe3;
  --ember-edge: rgb(70 35 10 / .09);
  --ember-slot: #f8eee4;
  --ember-slot-edge: rgb(70 35 10 / .11);
  --ember-slot-lit: #fffaf4;
  --ember-ink: #2b1d14;
  --ember-muted: #7a6555;
  --ember-hot: #e8590c;
  --ember-flame: #ff8a3d;
  --ember-glow: rgb(255 120 40 / .38);
  --ember-hearth: rgb(255 140 60 / .14);
  --ember-ash: #b6aa9f;
  --ember-gold: #c98a12;
  --ember-bad: #c8371f;
  --ember-button: #2b1d14;
  --ember-button-ink: #fffaf5;
  --ember-shadow: 0 1px 2px rgb(70 35 10 / .06), 0 26px 60px -28px rgb(120 50 10 / .35);
  --ember-slot-w: 54px;
  --ember-radius: 28px;
  --ember-slot-radius: 15px;
  --ember-font: "SF Pro Text", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ember-serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ember-ease: cubic-bezier(.23, 1, .32, 1);

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

Ask a question

What it does

A complete "enter your sign-in code" card, lit from below like a fire. Each slot has a small coal at its foot. When you type, the digit catches white-hot, throws a few sparks and cools to a warm glow. While the code is checked, heat runs along the row. A wrong code puts the coals out: the digits go grey and crumble away as ash. A right one makes every digit flare and burn off, and a spark etches a check that cools to gold before a Continue button appears.

Good for: Sign-in codes, two-step verification, email and phone confirmation, any screen that asks for a one-time code.
How it works: One real input sits invisibly over the slots, so paste, SMS and email 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 slots.

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

Use it in your project

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

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

const ember = init(document.querySelector('.ember'), {
  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 digits go grey and crumble away as ash so the user can type again. Resolve and the digits burn off, a spark etches a check that cools to gold, and a Continue button appears.

There is one real <input> under the slots, 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 ember = init(ref.current, { onComplete });
  return () => ember.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 digits light 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 signed in. With reduced motion there are no sparks or ash.

Can I turn the sparks off?

Yes, sparks: false keeps the glow and drops the particles.

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 Ember

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

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

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

$12

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 Ember

Tuck

Dovetail

Flap

Hasp

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Ember

Tuck

Dovetail

Flap

Hasp