What it does

A complete "enter the code we sent you" card. Six slots sit on a thin line of light. A glowing ring glides to the slot that takes the next digit, each digit rolls up into its slot, and the line lights up as the code fills. While the code is checked, a spark runs along the line. A wrong code shakes the line like a plucked string and the digits drop out. A right one melts the slots away while the line rises and bends into a check, the card turns green and a Continue button appears.

Good for

Two-step sign-in, phone and email confirmation, magic-link fallbacks, any screen that asks for a one-time code.

How it works

One real input sits invisibly over the slots, 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 slots.

Specs

Price

$12, one payment

Version

1.0.0

Code size

8.7 KB gzipped

Dependencies

None

Built with

HTML, CSS, JavaScript

Category

Form

Licence

Unlimited personal and client projects

In the zip

• strand.css strand.jsthe component
• index.htmla plain example page
• README.md package.json vite.config.js LICENSE.md

Use it in your project

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

const strand = init(document.querySelector('.strand'), {
  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'; },
});

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

Questions

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