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, …Forms
Tuck
$29Sign-up, sign-in and reset forms with a snail that pulls its eyes in while you type your password
10.6 KB0 depsForms