# Code input
> An Enter code pill that opens into six cells, checks the code and turns green, or red to try again.
A one-time code field in a single pill. Press Enter code and it pinches, then springs open into six cells with a dark outline on the one you are typing in. The sixth digit folds the row into Verifying; a right code turns it into a green Verified pill with a glint across it, a wrong one brings the row back blushed red, its digits dropping out one by one before you try again.
A React component by Bruno Delorence: https://brunodelorence.com/components/code-input. MIT License, Copyright (c) 2026 Bruno Delorence.
Category: Inputs.
## Anatomy
1. **Shell**: One pill holds the button, the row and the status in turn, and springs between their widths. A 4 px rim shows around each face.
2. **Cell**: Fixed in size and spread edge to edge, so they part as the shell overshoots and bunch as it pinches.
3. **Digit**: Each one rises into its cell as it is typed, and drops out last-first when a code is wrong.
4. **Active cell**: A dark outline that glides to wherever the caret is. Tap a cell or use the arrow keys to move it.
5. **Caret**: Blinks inside the active cell while the field has focus, so the place to type is never in doubt.
6. **Field**: One real `` laid over the row with transparent text: numeric keyboard, paste fills every cell, screen readers hear one field of 6 digits.
## When to use
- A one-time code sent by text or email at sign-in. The field asks for `one-time-code`, so phones offer the code from the message.
- A second step that waits until it is wanted: the small button keeps the screen calm until the person has the code.
- Numeric codes of 4 to 8 digits, checked the moment the last digit lands, with no submit button.
- Checks whose result must read at a glance: Verifying, Verified, or the same row in red to try again.
## When not to use
- Passwords and PINs: the digits stay on screen. Use a password field.
- Codes with letters, dashes or more than 8 characters. A plain text field takes them, pasted.
- Showing a code the person must copy somewhere else. That is text to read, not a field.
- Checks that can take longer than a few seconds: the pill would sit on Verifying with nothing else to say.
## Installation
Install it with the shadcn CLI, into components/code-input of any React project:
```sh
npx shadcn@latest add https://brunodelorence.com/r/code-input.json
```
Or copy all the source files below into one folder of your project. Either way it needs React 19.2 and a bundler with CSS Modules (Next.js, Vite).
It has a dark colour scheme. Its colours are CSS light-dark() pairs, kept inside @supports so that builds which rewrite light-dark() for older browsers leave them alone: it follows your page’s color-scheme (light unless the page sets one) or its colorScheme prop, with nothing to configure. Browsers without light-dark() show it light.
## Usage
```tsx
import { CodeInput } from './code-input';
export function SignInStep({ email }: { email: string }) {
return (
{
const response = await fetch('/api/verify', { method: 'POST', body: JSON.stringify({ email, code }) });
return response.ok;
}}
onVerified={() => location.assign('/home')}
/>
);
}
```
## States
- **Button**: At rest it is only a small pill: `Enter code`. Pressing it opens the row and focuses the field.
- **Typing**: Digits fill from the left; the outline and caret sit on the next empty cell.
- **Verifying**: The full code is sent at once. The word types itself in and stays at least 600 ms, so a quick answer still reads.
- **Wrong code**: The row comes back blushed with red digits, holds a moment, then empties itself for another try.
- **Verified**: Green, with a glint across it. Only the letters that differ from Verifying blur across.
## How it works
- One white shell shows three faces in turn: the button, the row of cells and the status pill. Changing face is one Web Animations keyframe list on its width: an ease-out pinch to a small pill (66 ms from a pill, 170 ms from the row), then a damped spring sampled at 60 Hz out to the new face’s width: 19% over at 260 ms for the row, 9% over at 170 ms for a pill.
- The old face blurs away during the pinch while the new one blurs in on the spring: cells from the middle outwards (35 ms apart), status letters from left to right (24 ms apart), the active cell’s outline last and slower.
- The cells keep their size and are spread from edge to edge of the shell, each one’s left a calc() of the shell’s width, so they part while the spring overshoots and bunch up while it pinches, with no measuring.
- Typing goes to one real input laid over the row with transparent text and caret: inputMode numeric and autocomplete one-time-code, so phones offer the code from a message and a pasted code fills every cell. The digit at the caret is kept selected, so typing over a cell replaces it; arrows, Home, End and Backspace move and delete as in any field.
- The outline glides to the active cell in 240 ms and rounds into a D on the end cells; its caret stays hidden while it moves, then blinks. Each digit rises into its cell out of a blur.
- The status words are split into letters: on Verified only the ones that differ (ying, ied) blur across, the old over the new. The grey turns green in 160 ms, the spinner blurs into a tick, and 470 ms later a two-band glint crosses the pill.
- Every colour is a light-dark() token on the root: at night the stage is near-black, the shell and cells warm greys, the wrong cells a deep wine with coral digits. It follows the page’s color-scheme, or the colorScheme prop.
## API reference
- **length** (`number`, default `6`): How many digits the code has.
- **verify** (`(code: string) => Promise | boolean`): Checks a complete code; false, or a rejection, counts as wrong. Without it, 123456 passes after 1.2 s, as a server would.
- **onVerified** (`(code: string) => void`): Called with the code once it is verified.
- **onComplete** (`(code: string) => void`): Called with every complete code, right or wrong, before it is checked.
- **labels** (`{ enter?, verifying?, verified?, field?, wrong?: string }`): The words: the button’s (Enter code), the two statuses, the input’s name (Verification code) and what is announced for a wrong code.
- **minVerifying** (`number`, default `600`): Verifying stays at least this long, in ms, so a quick answer still reads.
- **defaultState** (`'idle' | 'typing' | 'verifying' | 'wrong' | 'verified'`): Opens on one state and holds it, with no demo, until the reader acts: the button, three digits typed, verifying, a wrong code’s red row, or verified.
- **autoplay** (`boolean`, default `true`): While on screen and untouched, a demo types a wrong code, then the right one, and starts over. It checks its own codes and never calls verify or onVerified.
- **colorScheme** (`'light' | 'dark' | 'system'`): Its colours: light, dark, or the reader’s system setting. Without it the component follows the page’s color-scheme, which is light unless the page sets one.
- **className** (`string`): Extra class for the root.
## Accessibility
- Enter code is a real button; it opens the row and moves focus to a real text input named “Verification code, 6 digits”, with inputMode numeric and autocomplete one-time-code, so screen readers, keyboards, paste and phones’ code suggestions all work as in any field.
- The cells, the outline and the status pill are drawn for the eye and hidden from assistive technology; a polite live region says Verifying…, Verified, or Wrong code, try again, and the input is marked aria-invalid while a code is wrong.
- Escape in an empty row goes back to the button. The button shows a focus ring around the pill; in the row, the outline is the focus indicator.
- Under reduced motion the shell changes size at once, nothing blurs or glides, the caret holds still, there is no glint and the demo never plays. The demo also stops whenever the field has focus.
## Source
### code-input/code-input.tsx
```tsx
// Copyright (c) 2026 Bruno Delorence. MIT License.
'use client';
import {
useEffect,
useLayoutEffect,
useRef,
useState,
type ChangeEvent,
type CSSProperties,
type KeyboardEvent as ReactKeyboardEvent,
type PointerEvent as ReactPointerEvent,
} from 'react';
import { useAutoplay } from './use-autoplay';
import styles from './code-input.module.css';
/*
* Code input: a small "Enter code" pill that opens into a row of cells for a one-time code, checks
* it, and says so: "Verifying", then "Verified", or the row again, red, to try once more.
*
* - One white shell holds three faces, only one of them current: the button, the row of cells and
* the status pill. Changing face pinches the shell (its width eases down to a small pill while
* the old face blurs away), then springs it open to the new face's width while the new one
* blurs in. The width is a single Web Animations keyframe list: the pinch, then a damped spring
* sampled at 60 Hz.
* - The cells sit at fixed sizes, spread from edge to edge of the shell (each one's left is a
* calc() of the shell's width), so while the spring overshoots they part, and while the shell
* pinches they bunch up. They blur in from the middle outwards and out from the ends inwards.
* - Typing goes to one real laid over the row, with transparent text: inputMode numeric,
* autocomplete one-time-code, so phones offer the code from a message and a pasted code fills
* every cell. The caret's place picks the active cell; the dark outline glides there.
* - Status words are split into letters. "Verifying" types itself in from left to right; on
* "Verified" only the letters that differ ("ying" for "ied") blur across, and a glint crosses
* the green pill.
* - While on screen and untouched, a demo types a wrong code, then the right one, then starts over.
* - defaultState opens it on one state (the row half typed, "Verifying", a wrong code…) and holds
* it there, with no demo, until the reader acts: for documentation and tests.
* - Light or dark: every colour is a light-dark() token in the CSS.
*/
type Face = 'button' | 'row' | 'status';
type Phase = 'idle' | 'entry' | 'error' | 'verifying' | 'verified';
/** A state to open on (defaultState). */
export type CodeInputState = 'idle' | 'typing' | 'verifying' | 'wrong' | 'verified';
type Labels = {
/** The button's words. */
enter: string;
verifying: string;
verified: string;
/** The input's accessible name. */
field: string;
/** Announced when a code is wrong. */
wrong: string;
};
const LABELS: Labels = {
enter: 'Enter code',
verifying: 'Verifying',
verified: 'Verified',
field: 'Verification code',
wrong: 'Wrong code, try again',
};
/** The code the default check accepts, and the demo types in the end: 123456 for six digits. */
const rightCode = (length: number) => '1234567890'.repeat(Math.ceil(length / 10)).slice(0, length);
/** The demo's first, wrong try. */
const WRONG_CODE = '213212';
/** The demo's typing rhythm, in ms between digits: the wrong try, then the right one. */
const RHYTHM = [300, 350, 380, 220, 200];
const RHYTHM_RIGHT = [350, 280, 350, 200, 200];
/** The wrong code's digits leave this many ms apart, the last first. */
const STAGGER = 32;
const faceOf = (phase: Phase): Face =>
phase === 'idle' ? 'button' : phase === 'entry' || phase === 'error' ? 'row' : 'status';
/* Sizes in em of the 12 px type, as in the CSS: the shell's white rim, a cell and the gap. */
const RIM = 1 / 3;
const CELL = 2.729;
const GAP = 0.4167;
/** Padding of the button and the status pill around their icon and words. */
const PAD = 1.5 + 1.4167;
/** How narrow the shell pinches between two faces: from the row, and from a pill. */
const PINCH_ROW = 5.1;
const PINCH_PILL = 6;
/** The blur that faces come and go through. */
const BLUR = 'blur(0.45em)';
/** Where each defaultState opens: the phase, and the digits already in. */
const OPENINGS: Record string }> = {
idle: { phase: 'idle', code: () => '' },
typing: { phase: 'entry', code: (length) => rightCode(length).slice(0, Math.min(3, length - 1)) },
verifying: { phase: 'verifying', code: () => '' },
wrong: { phase: 'error', code: (length) => WRONG_CODE.slice(0, length).padEnd(length, '2') },
verified: { phase: 'verified', code: () => '' },
};
/** Wait out a promise-less pause. */
const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
/** The default check: accepts 123456 (for six digits) after a short wait, as a server would. */
async function checkDemo(code: string) {
await wait(1200);
return code === rightCode(code.length);
}
/**
* A damped spring's progress from 0 to 1, sampled at 60 Hz until it settles. `ratio` is its
* damping ratio (under 1 it overshoots), `omega` its natural frequency in rad/s.
*/
function spring(ratio: number, omega: number) {
const damped = omega * Math.sqrt(1 - ratio * ratio);
const samples: number[] = [];
for (let t = 0; ; t += 1 / 60) {
const decay = Math.exp(-ratio * omega * t);
samples.push(
1 - decay * (Math.cos(damped * t) + ((ratio * omega) / damped) * Math.sin(damped * t)),
);
if (decay < 0.003) break;
}
samples[samples.length - 1] = 1;
return samples;
}
/** Opening into the row: slow, with a 19% overshoot at 260 ms. */
const ROW_SPRING = spring(0.47, 13.7);
/** Into a pill: quicker, 9% over at 170 ms. */
const PILL_SPRING = spring(0.61, 23.7);
export function CodeInput({
length = 6,
verify = checkDemo,
onVerified,
onComplete,
labels: labelProp,
minVerifying = 600,
defaultState,
autoplay = true,
colorScheme,
className = '',
}: {
/** How many digits the code has. */
length?: number;
/**
* Checks a complete code. Without it, the code 123456 passes after 900 ms. Rejecting counts
* as a wrong code.
*/
verify?: (code: string) => Promise | boolean;
/** Called with the code once it is verified. */
onVerified?: (code: string) => void;
/** Called with every complete code, right or wrong, before it is checked. */
onComplete?: (code: string) => void;
/** The words: enter, verifying, verified, field (the input's name) and wrong (announced). */
labels?: Partial;
/** "Verifying" stays at least this long, in ms, so a quick answer still reads. */
minVerifying?: number;
/**
* Opens on one state and holds it until the reader acts, with no demo: the button ('idle'), the
* row with three digits typed ('typing'), 'verifying', the red row of a wrong code ('wrong') or
* 'verified'. For documentation and tests.
*/
defaultState?: CodeInputState;
/** While on screen and untouched, a demo types a wrong code, then the right one. */
autoplay?: boolean;
/** Light or dark colours, or the reader's ('system'); without it, the page's color-scheme. */
colorScheme?: 'light' | 'dark' | 'system';
className?: string;
}) {
const labels = { ...LABELS, ...labelProp };
const { ref: root, playing, take } = useAutoplay(5000);
const opening = OPENINGS[defaultState ?? 'idle'];
const [phase, setPhase] = useState(opening.phase);
const [value, setValue] = useState(() => opening.code(length));
const [caret, setCaret] = useState(() => Math.min(opening.code(length).length, length - 1));
const [focused, setFocused] = useState(false);
/** A 'typing' defaultState shows its active cell until the reader comes in. */
const [held, setHeld] = useState(defaultState === 'typing');
/** The demo never plays while the reader is in the field, nor on a state held for the docs. */
const demo = autoplay && playing && !focused && !defaultState;
/** The wrong code's digits leaving, last first. */
const [clearing, setClearing] = useState(false);
/** The face fading out while the next comes in; it stays drawn until then. */
const [leaving, setLeaving] = useState(null);
const [message, setMessage] = useState('');
/** Status words, and the ones before them, whose differing letters blur across. */
const statusLabel = phase === 'verified' ? labels.verified : labels.verifying;
const [words, setWords] = useState({ now: statusLabel, was: '' });
const face = faceOf(phase);
if (words.now !== statusLabel)
setWords({ now: statusLabel, was: face === 'status' ? words.now : '' });
const shell = useRef(null);
const faces = useRef>({
button: null,
row: null,
status: null,
});
const input = useRef(null);
const button = useRef(null);
const statusContent = useRef(null);
const buttonContent = useRef(null);
/** Bumped on every reset, so pending timers of an earlier attempt do nothing. */
const attempt = useRef(0);
/** The demo plays without focus: it shows the active cell as if focused. */
const demoOn = useRef(false);
const shownFace = useRef(faceOf(opening.phase));
/** Stops drawing the face that left, once it has blurred away. */
const leaveTimer = useRef(0);
const phaseRef = useRef(phase);
phaseRef.current = phase;
const announce = (text: string) => setMessage((now) => (now === text ? `${text}\u00a0` : text));
const reduced = () =>
typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
/** The shell's natural width for a face, in em. */
const widthOf = (target: Face) => {
if (target === 'row') return 2 * RIM + length * CELL + (length - 1) * GAP;
const content = target === 'button' ? buttonContent.current : statusContent.current;
const size = parseFloat(getComputedStyle(shell.current!).fontSize) || 12;
return 2 * RIM + PAD + (content ? content.offsetWidth / size : 6);
};
// Moves the shell to the current face: pinch and spring, or straight there under reduced motion.
// Runs before paint, so the new face never shows at the wrong width.
useLayoutEffect(() => {
const element = shell.current;
if (!element) return;
const from = shownFace.current;
shownFace.current = face;
const size = parseFloat(getComputedStyle(element).fontSize) || 12;
const start = element.offsetWidth / size;
const target = widthOf(face);
for (const animation of element.getAnimations()) animation.cancel();
element.style.width = `${target}em`;
if (from === face && words.was === '') return;
if (reduced()) {
setLeaving(null);
return;
}
const frames: Keyframe[] = [];
let pinch = 0;
const narrow = Math.min(start, start > 15 ? PINCH_ROW : PINCH_PILL);
if (from !== face) {
// The pinch: an ease-out from the current width down to a small pill.
pinch = start > 15 ? 170 : 66;
const steps = Math.round(pinch / (1000 / 60));
for (let i = 0; i < steps; i++)
frames.push({
width: `${start + (narrow - start) * Math.sin(((i / steps) * Math.PI) / 2)}em`,
});
}
const base = from !== face ? narrow : start;
for (const x of face === 'row' ? ROW_SPRING : PILL_SPRING)
frames.push({ width: `${base + (target - base) * x}em` });
element.animate(frames, { duration: (frames.length - 1) * (1000 / 60), easing: 'linear' });
if (from === face) return;
// The old face blurs away during the pinch; the cells from the ends inwards.
const old = faces.current[from];
if (old) {
if (from === 'row') {
const cells = [...old.querySelectorAll('[data-cell]')];
const middle = (cells.length - 1) / 2;
cells.forEach((cell, i) =>
cell.animate([{}, { filter: BLUR, opacity: 0 }], {
duration: pinch + 60,
delay: (middle - Math.abs(i - middle)) * 18,
easing: 'cubic-bezier(0.2, 0.6, 0.4, 1)',
fill: 'forwards',
}),
);
} else
old.animate([{}, { filter: BLUR, opacity: 0 }], {
duration: pinch + 90,
easing: 'cubic-bezier(0.2, 0.6, 0.4, 1)',
fill: 'forwards',
});
}
window.clearTimeout(leaveTimer.current);
leaveTimer.current = window.setTimeout(() => setLeaving(null), pinch + 160);
// The new one blurs in as the spring opens: cells from the middle out, letters left to right.
const next = faces.current[face];
if (next) {
// Its own leftovers from leaving (not the caret's blink or the digits' CSS animations).
for (const animation of next.getAnimations({ subtree: true }))
if (!(animation instanceof CSSAnimation)) animation.cancel();
const blurIn = (part: Element, delay: number, duration = 240) =>
part.animate(
[
{ filter: BLUR, opacity: 0 },
{ filter: 'blur(0)', opacity: 1 },
],
{
duration,
delay: pinch + delay,
easing: 'cubic-bezier(0.2, 0.7, 0.3, 1)',
fill: 'backwards',
},
);
if (face === 'row') {
const cells = [...next.querySelectorAll('[data-cell]')];
const middle = (cells.length - 1) / 2;
cells.forEach((cell, i) => blurIn(cell, Math.abs(i - middle) * 35));
// The outline comes last, and slower (when it shows: not on a wrong code).
next.querySelectorAll('[data-indicator][data-on]').forEach((part) =>
part.animate([{ filter: BLUR, opacity: 0 }, {}], {
duration: 320,
delay: pinch + 60,
easing: 'cubic-bezier(0.2, 0.7, 0.3, 1)',
fill: 'backwards',
}),
);
} else {
next.querySelectorAll('[data-fill]').forEach((part) => blurIn(part, 0, 200));
next.querySelectorAll('[data-icon]').forEach((part) => blurIn(part, 10));
next.querySelectorAll('[data-letter]').forEach((part, i) => blurIn(part, 40 + i * 24));
}
}
}, [face, words]);
useEffect(() => () => window.clearTimeout(leaveTimer.current), []);
// Keeps the shell's width right when the code's length changes.
useLayoutEffect(() => {
if (shell.current) shell.current.style.width = `${widthOf(shownFace.current)}em`;
}, [length]);
const changeFace = (next: Phase) => {
const from = faceOf(phaseRef.current);
if (from !== faceOf(next)) setLeaving(from);
setPhase(next);
};
/** Back to the button, from anywhere. */
const reset = (focusButton = false) => {
attempt.current++;
setClearing(false);
setValue('');
setCaret(0);
changeFace('idle');
if (focusButton) requestAnimationFrame(() => button.current?.focus({ preventScroll: true }));
};
/** The button opens the row, and focuses its input unless the demo pressed it. */
const open = (focus = true) => {
attempt.current++;
setValue('');
setCaret(0);
changeFace('entry');
if (focus) input.current?.focus({ preventScroll: true });
};
/**
* A complete code: a beat for its last digit to land, then "Verifying" for as long as the check
* takes (and at least minVerifying), then "Verified" or the red row.
*/
const submit = async (code: string, check: typeof verify, report: boolean) => {
const id = ++attempt.current;
if (report) onComplete?.(code);
await wait(reduced() ? 0 : 170);
if (id !== attempt.current) return;
changeFace('verifying');
announce(`${labels.verifying}…`);
let right = false;
try {
[right] = await Promise.all([Promise.resolve(check(code)), wait(minVerifying)]);
} catch {
right = false;
}
if (id !== attempt.current) return;
if (right) {
changeFace('verified');
announce(labels.verified);
if (report) onVerified?.(code);
return;
}
changeFace('error');
announce(labels.wrong);
// The red row holds a moment, then its digits drop out, the last first.
const quick = reduced();
await wait(quick ? 900 : 330);
if (id !== attempt.current) return;
setClearing(true);
setCaret(0);
await wait(quick ? 0 : (length - 1) * STAGGER + 150);
if (id !== attempt.current) return;
setClearing(false);
setValue('');
setCaret(0);
setPhase('entry');
};
/** Puts the code in, from typing, pasting or the demo; sets the caret and submits when full. */
const enter = (digits: string, at: number, report = true) => {
const code = digits.replace(/\D/g, '').slice(0, length);
setValue(code);
setCaret(Math.min(at, length - 1, code.length));
if (code.length === length) submit(code, report ? verify : checkDemo, report);
};
/** Selects the digit at the caret, so typing replaces it; at the end the caret is plain. */
const place = (at: number, code = value) => {
const field = input.current;
const index = Math.max(0, Math.min(at, code.length, length - 1));
setCaret(index);
if (!field || document.activeElement !== field) return;
const end = index < code.length ? index + 1 : index;
field.setSelectionRange(index, end);
};
const onChange = (event: ChangeEvent) => {
if (phase !== 'entry') return;
const raw = event.target.value;
const code = raw.replace(/\D/g, '').slice(0, length);
// The caret after the edit, in digits: what came before it, without anything else typed.
const before = raw.slice(0, event.target.selectionStart ?? raw.length).replace(/\D/g, '');
enter(code, before.length);
requestAnimationFrame(() => place(before.length, code));
};
const onKeyDown = (event: ReactKeyboardEvent) => {
if (phase !== 'entry') return;
const last = Math.min(value.length, length - 1);
const moves: Record = {
ArrowLeft: caret - 1,
ArrowRight: caret + 1,
Home: 0,
End: last,
ArrowUp: 0,
ArrowDown: last,
};
if (event.key in moves) {
event.preventDefault();
place(moves[event.key]);
} else if (event.key === 'Backspace' && caret === value.length && caret > 0) {
// At the empty cell after the digits: remove the last one.
event.preventDefault();
enter(value.slice(0, -1), caret - 1);
requestAnimationFrame(() => place(caret - 1, value.slice(0, -1)));
} else if (event.key === 'Escape' && !value) {
event.preventDefault();
reset(true);
}
};
/** A click or tap picks the cell under it (or the first empty one, beyond the digits). */
const onPointerUp = (event: ReactPointerEvent) => {
const rect = event.currentTarget.getBoundingClientRect();
const cell = Math.floor(((event.clientX - rect.left) / rect.width) * length);
requestAnimationFrame(() => place(cell));
};
// While the demo plays: press the button, type a wrong code, then the right one, start over.
useEffect(() => {
if (!demo) return;
demoOn.current = true;
let stopped = false;
const pause = (ms: number) =>
new Promise((resolve, reject) =>
setTimeout(() => (stopped ? reject(new Error('stopped')) : resolve()), ms),
);
const until = async (test: () => boolean) => {
while (!test()) await pause(50);
};
const type = async (code: string, rhythm: number[]) => {
for (let i = 0; i < code.length; i++) {
if (i) await pause(rhythm[(i - 1) % rhythm.length]);
enter(code.slice(0, i + 1), i + 1, false);
}
};
(async () => {
for (let round = 0; ; round++) {
reset();
await pause(round ? 1300 : 900);
open(false);
await pause(800);
await type(WRONG_CODE.slice(0, length).padEnd(length, '2'), RHYTHM);
// Out of the row and back: "Verifying", then the red row clearing itself.
await until(() => phaseRef.current !== 'entry');
await until(() => phaseRef.current === 'entry');
await pause(480);
await type(rightCode(length), RHYTHM_RIGHT);
await until(() => phaseRef.current === 'verified');
await pause(2600);
}
})().catch(() => {});
return () => {
stopped = true;
demoOn.current = false;
// The reader takes over from wherever the demo was, except halfway through a code, or on
// its status, which goes back to the button.
if (phaseRef.current === 'entry') {
setValue('');
setCaret(0);
} else if (faceOf(phaseRef.current) === 'status') reset();
};
}, [demo]);
const showIndicator =
(phase === 'entry' && value.length < length && (focused || demo || held)) ||
(clearing && (focused || demo));
const active = Math.min(caret, length - 1);
const prefix = words.was ? commonPrefix(words.now, words.was) : 0;
const shown = (target: Face) => face === target || leaving === target;
return (
{
faces.current.button = element;
}}
className={styles.face}
data-shown={shown('button')}
// While the demo shows its status, Tab can still reach the button: focus stops the demo.
inert={face !== 'button' && !(demo && face === 'status')}
>