COMPONENT · 85
OTP Verification v2
Verify your number
Enter the 4-digit code we sent to +1 415 ••• 0142
Didn't receive the code?
Verified and secure
Type it, paste it, or let the message fill it — 8402 is the good one.
index.html
<!-- four boxes, four wires -->
<div class="wire">
<span data-wire="top"></span>
<span data-wire="left"></span>
<span data-wire="right"></span>
<span data-wire="bottom"></span>
</div>
<label class="slot">
<input inputmode="numeric"
autocomplete="one-time-code">
<span class="slot__vin">
</label>
app.css
/* a fold that only translates
is a slide - so the row is a
3D stage and every box tips
through depth on the way */
.code { perspective: 1000px; }
/* circuit closed: four inputs
become one object */
.sheet[data-wired] .slot {
box-shadow: inset 0 0 0 1.8px
var(--ok);
}
app.js
// they turn about the CENTRE of
// the square, not their own
// middle - an arc, not a line
const T = 42 * PI / 180;
const mx = cx + (rx * cos(T)
- ry * sin(T));
slot.animate([
{ transform:
`translate(${mx}px)
rotate(22deg)` },
{ ... }
]);