Forms.

Fields, sign-up cards and everything that helps someone fill one in.

11 components

Sort

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

A one-time code field of puzzle pieces that slide together and lock into a check

11 KB0 depsForms

index.html

<!-- a coal per slot; the
     check has no d, js
     fits it to the row;
     sparks spawn in fx -->
<span class="ember-slot" …>
  <span class="ember-wick">
  </span></span>
…
<svg class="ember-mark" …>
<path class="ember-check"/>
<span class="ember-fx" …>

ember.css

/* two copies of the digit:
   a blurred one behind it
   carries the heat */
.ember-num, .ember-heat {
  grid-area: 1 / 1;
…
.ember-heat {
  color: var(--ember-flame);
  filter: blur(7px);
  opacity: .3; …

ember.js

// one eased k draws the
// stroke and puts the spark
// at its tip, via along(k)
const k = easeInOut(
  Math.min(1, (now - t0)
  / dur));
const [x, y] = along(k);
… p.style.strokeDashoffset
  = String(1 - k);
… c.setAttribute('cx', x);

Ember

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

9.3 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

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

A combination-padlock code field whose wheels roll and whose shackle springs open

7.7 KB0 depsForms

index.html

<!-- clip ends at the hole
     line, so the bar sinks
     into the case -->
<g clip-path=
  "url(#latch-clip-above)">
<g class="latch-shackle">
<g class="latch-bar">
<!-- one d, four widths: a
     round polished tube -->
<path class="latch-tube
  latch-tube-1" d="…"/>

latch.css

/* pivot on the long leg,
   in SVG viewBox units */
.latch-shackle, .latch-bar {
  transform-box: view-box;
  transform-origin:
    69px 30px; }
/* scaleX fakes the turn;
   stroke width holds */
.latch-tube { …
  vector-effect:
    non-scaling-stroke; }

latch.js

// v is kept on retarget, so
// a spin never jerks
v += (-k * (x - target)
  - c * v) * (dt / 4);
x += v * (dt / 4);
…
// speed blurs the digits
const b = Math.min(2.6,
  (Math.abs(v)*cell) / 900);
if (b > 0.25) { strip.style
  .filter = `blur(${b…}px)`;

Latch

A one-time code field that dials in like a combination lock and springs open on the right code

11 KB0 depsForms

index.html

<!-- one real input; the
     panels are drawn on
     top, so paste and
     autofill just work -->
<input class="pleat-input"
  …>
<div class="pleat-strip">
  <span class="pleat-tile"
    aria-hidden="true">
  </span>

pleat.css

/* each panel turns about
   its top-left corner,
   two faces back to back */
.pleat-tile {
  transform-origin: 0 0;
  transform-style:
    preserve-3d;
}
.pleat-front, .pleat-back {
  backface-visibility:
    hidden;

pleat.js

// a fold turns panel j
// about crease X: shift
// over, rotate, shift back
const d = g.x[fold.crease]
  - g.x[j];
parts.push(
`translateX(${d}px)
rotateY(${fold.dir *
180 * …}deg)
translateX(${-d}px)`);

Pleat

A one-time code field on a paper strip that folds like a fan into a check

10.1 KB0 depsForms

index.html

<!-- the input is real and
     invisible, laid over
     drawn tiles: paste and
     autofill just work -->
<div class="riffle-grid">
  <input
    class="riffle-input"
    type="text" …>
  <span class="riffle-tile"
    aria-hidden="true">
  </span>

riffle.css

/* a spring sampled into
   linear(): one soft
   overshoot on landing */
--riffle-glide: linear(0,
  .062, .205, … 1);
/* js sets the length
   per move */
.riffle-tile {
  transition: translate
    var(--riffle-move)
    var(--riffle-glide), …

riffle.js

// a move is a lookup:
// slot now → slot next
const MOVES = {
  cw:   [1, 3, 0, 2],
  diag: [3, 2, 1, 0],
…
// css glides translate to
// the new slot; a cut-off
// move resumes mid-way
pos = pos.map(p => map[p]);
  place(i);

Riffle

A 2×2 one-time code field whose tiles shuffle and lock into a check

9 KB0 depsForms

index.html

<!-- the picture the tiles
     solve into: any svg,
     sliced six ways -->
<svg class="shunt-check"
  viewBox="0 0 300 200" …>
  <circle cx="150"
    cy="100" r="80"/>
  <path d="M113 103 139
    128 189 76"/>

shunt.css

/* each back holds the
   whole picture, shifted
   by its home slot */
.shunt-art {
  top: calc(var(--shunt-py)
    * -100%);
  left: calc(
    var(--shunt-px)
    * -100%);
  width: 300%;
  height: 200%;

shunt.js

// the gap walks `path`,
// a piece slides into each
// slot it leaves
for (const q of path) {
  const e = trail[…];
  if (!near(e, q)) continue;
  at[e] = at[q];
  at[q] = null;
  trail.push(q);
}
// the ending: in reverse

Shunt

A 3×2 one-time code field that solves itself like a sliding puzzle into a check

10.7 KB0 depsForms

index.html

<!-- the score lives on the
     root; CSS maps it to a
     level and a colour -->
<div class="steep"
  data-score="0">
  <span class="steep-liquid"
    aria-hidden="true">
<!-- strength is spoken,
     not just coloured -->
  <p class="steep-meter"
    … aria-live="polite">

steep.css

/* a score is only a level
   and a colour */
.steep[data-score="2"] {
  --steep-level: 52%; …
/* y1 above 1: the liquid
   overshoots, settles */
.steep-liquid { …
  height:
    var(--steep-level);
  transition: height 700ms
    cubic-bezier(.34, 1.3, …

steep.js

// JS writes the score;
// CSS does the rising
root.dataset.score =
  String(s);
// a new level sloshes the
// surface: stretch, squash
if (s !== last) { …
  wave.animate([ …
    { scale: '1 2.2' },
    { scale: '1 .7' }, …

Steep

A password field that fills with liquid as the password gets stronger

2.8 KB0 depsForms

index.html

<!-- one invisible input on
     top: paste, autofill,
     screen readers work -->
<input class="strand-input"
  id="otp" type="text" …>
<span class="strand-slot"
  aria-hidden="true"></span>
<!-- four strokes, one d -->
<svg class="strand-line" …>
<path class="strand-track"/>
<path class="strand-halo"/>

strand.css

/* one ring; its spring is
   a baked linear() curve */
.strand-ring { … transition:
  transform 600ms
  var(--strand-spring), …; }
/* pathLength=1, so offset
   = share still unlit */
.strand-halo, .strand-lit {
  … stroke-dasharray: 1 1;
  stroke-dashoffset: 1; }

strand.js

// 3 points spring from
// wherever they are now, so
// the check can turn back
const from = pts.map(
  p => [...p]);
…
const k = t * 1000 >= settle
  ? 1 : curve(t);
pts = from.map((p, i) => [
  p[0]+(to[i][0]-p[0])*k,
  p[1]+(to[i][1]-p[1])*k]);

Strand

A one-time code field strung on a line of light that bends into a check

8.7 KB0 depsForms

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

Sign-up, sign-in and reset forms with a snail that pulls its eyes in while you type your password

10.6 KB0 depsForms

All components

Forms.

Dovetail

Ember

Flap

Hasp

Latch

Pleat

Riffle

Shunt

Steep

Strand

Tuck

Your cart

Saved for later