The verification code field

Forms, TransitionsGSAPMediumCompressed weight: Demo 5.6 KBGSAP 28 KBFreeDownload the zip

Six boxes for a verification code: the figures pop in and a ring with the caret slides on to the next box; if the code is right the boxes melt into a green pill, if it is wrong they turn red, shake and drop the figures.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The verification code field</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/space-grotesk@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the field: six boxes over one real input (so pasting, the keyboard, screen readers and codes read from a text
         message all work). The figures pop in, a ring slides to the next box; a right code melts the boxes into a
         green pill, a wrong one shakes them red and the figures fall out -->
    <div class="code" data-code>
      <label class="code__label" for="code-input">Enter the 6-digit code we sent you</label>
      <div class="code__field" data-field data-autoclic>
        <input class="code__input" id="code-input" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" spellcheck="false" aria-describedby="code-status" data-input>
        <div class="code__boxes" aria-hidden="true" data-boxes>
          <span class="code__ring" data-ring><span class="code__caret" data-caret></span></span>
        </div>
        <div class="code__done" aria-hidden="true" data-done>
          <svg viewBox="0 0 24 24"><path d="M5 12.5l4.6 4.6L19 7.6" data-tick/></svg>
          <span>Verified</span>
        </div>
      </div>
      <p class="code__status" id="code-status" role="status" aria-live="polite" data-status></p>

      <!-- for the demo: the next code is wrong, to see the other answer -->
      <label class="fail">
        <input type="checkbox" data-fail>
        <span class="fail__box" aria-hidden="true"><svg viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-7"/></svg></span>
        <span>Make the code wrong</span>
      </label>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

18 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The verification code field” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a white background the words Enter the 6-digit code we sent you and six light grey boxes. Tapping the boxes, a black ring with a blinking caret settles on the first one; each figure typed pops into its box with a little overshoot, the box turns white and the ring slides on to the next one; a figure deleted falls out of its box. A pasted code comes in all at once, like a little wave. With the last figure the boxes make a wave while Checking… shows below; if the code is right, the boxes slide towards the middle, shrink and melt into a green pill where a tick draws itself next to Verified. If it is wrong (tick Make the code wrong) the boxes turn red and shake, That code is not right. Try again. appears below, and the figures fall out one after the other starting from the right. In the demo, after a moment, the green pill turns back into six empty boxes.

How it works

A real field underneath

The boxes only draw: the real field is a single input lying over them, invisible, with inputmode numeric and autocomplete one-time-code. That way pasting a code, the keyboard, screen readers and the code read from a text message on a phone all work by themselves; the script keeps only the figures (LENGTH at most) and the caret always at the end.

Figures in and out

At every change the script compares the old figures with the new ones and moves only those that differ: a new figure comes in from scale 0.3 with back.out(POP), one taken away drops 16 pixels as it fades. The ring is a single element that goes to the right box with back.out; the caret inside blinks with a stepped CSS animation and hides when the boxes are full.

The check, and the right code

With the last figure the field turns readOnly, the boxes make a 7-pixel wave in CHECK seconds and then the answer comes. Right: each box moves towards the middle (its x is its distance from the middle), shrinks and fades, and the pill grows from scaleX 0.25 with back.out while the tick draws itself with stroke-dashoffset.

The wrong code

The boxes take the error class and turn red, the whole row shakes with x keyframes, the field gets aria-invalid and the status line says so; then the figures fall out one at a time from the right and the field empties, ready for another try.

The library’s preview

A click coming from a script (detail 0) makes the field type the SAMPLE code by itself, one figure every 0.11 seconds; people’s clicks land on the input and never arrive with detail 0.

Values to change

Name	File	Default	What it changes
`LENGTH`	script.js	`6`	How many figures the code has.
`POP`	script.js	`2.4`	How far a figure overshoots as it pops into its box.
`CHECK`	script.js	`0.7`	The seconds of the check before the answer.
`HOLD`	script.js	`2.6`	The seconds the green pill stays before the demo starts over.
`SAMPLE`	script.js	`'482915'`	The code the library’s automatic preview types by itself.

Try them in the Playground

When to use it

For two-step verification, confirming an e-mail address or a phone number, an access code: wherever a code of a few figures arrives to be typed.

On phones

The boxes narrow below 440 pixels. A tap opens the number keyboard, and on iPhone the code that came by text message is offered above the keyboard and goes in with a tap; the field has a 16-pixel typeface, so the page does not zoom in when it is tapped.

With reduced motion

The figures appear and disappear without popping, there is no wave, the green pill appears at once and the wrong boxes do not shake.

Pitfalls

Six separate inputs look simpler, but they break pasting, codes from text messages and screen readers: better one input underneath and boxes that only draw.
The invisible input has opacity 0 but stays as big as the boxes, with a 16-pixel typeface: any smaller and iPhone would zoom the page in on a tap.
While the code is being checked the field is readOnly and every change is put back: a figure deleted halfway through the check would leave the boxes and the field different.
The green pill is centred with the translate property while GSAP scales it: a translate(-50%) written inside transform in the CSS would be wiped out by GSAP’s transform.

Libraries

GSAP 3.15.0, Space Grotesk (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 5.6 KB; the libraries: GSAP 28 KB.

Testing

Tested on 3 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: Done

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.