This picker is Pinch

See Tuck in your colourBlue

Tuck

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

A UI component for any site
Plain HTML, CSS, JavaScript and SVG, no dependencies
Use it in unlimited client projects

Checkout opens soon.
14-day refund if it doesn’t do what the demo shows.

BundleAll forms: 11 pieces for $118, you save $29

Tuck: a look at the source

// Tuck — sign-up, sign-in and reset cards with a snail that reacts to the form.
// The behaviour lives in mascot.js; this file wires the snail's SVG and the card to it.

import { createMascot, watchForm, defaultValidate } from './mascot.js';

const SCREENS = {
  'sign-up': { busyText: 'Creating your account…', successText: 'Welcome aboard!' },
  'sign-in': {
    busyText: 'Signing in…',
    successText: 'Welcome back!',
    // signing in only needs a password, not a strong one
    validate: data => ({ ...defaultValidate({ email: data.email }), ...(data.password ? {} : { password: 'Enter your password.' }) }),
  },
  'reset': { busyText: 'Sending…', successText: 'Check your inbox' },
};

export function init(root, options = {}) {
  const screen = SCREENS[root.dataset.screen] || SCREENS['sign-up'];
  const mascot = createMascot(root, {
    eyes: [
      { el: root.querySelector('.tuck-eye--front .tuck-eye-white'), x: '--tuck-fx', y: '--tuck-fy' },
      { el: root.querySelector('.tuck-eye--back .tuck-eye-white'), x: '--tuck-bx', y: '--tuck-by' },
    ],
    body: root.querySelector('.tuck-all'),
    light: root.querySelector('.tuck-card'),
    lightVars: ['--tuck-lx', '--tuck-ly'],
  });
  const form = watchForm(mascot, root.querySelector('form'), {
    selector: '.tuck-input',
    status: root.querySelector('.tuck-status[aria-live]'),
    ...screen,
    ...options,
  });

  return {
    get mood() { return mascot.mood; },
    mascot,
    focus: form.focus,
    reset: form.reset,
    destroy() { form.destroy(); mascot.destroy(); },
…  3 more lines in the zip

/* Tuck — a sign-up card with a snail that pulls its eyes in while you type your password */
.tuck {
  /* the snail */
  --tuck-skin-hi: #ffe6c7;
  --tuck-skin: #fccb93;
  --tuck-skin-lo: #f2ad6c;
  --tuck-shell-hi: #ffb48a;
  --tuck-shell: #ff8a5c;
  --tuck-shell-lo: #e9643a;
  --tuck-eye: #fff;
  --tuck-eye-rim: rgb(60 40 30 / .28);
  --tuck-pupil: #1d1d1f;
  --tuck-mouth: #6b3b2a;
  --tuck-blush: #ff8fa3;

  /* the card — liquid glass over the scene, Apple system colours */
  --tuck-card: rgb(255 255 255 / .52);
  --tuck-glass: blur(40px) saturate(185%);
  --tuck-rim-top: rgb(255 255 255 / .95);
  --tuck-rim: rgb(255 255 255 / .55);
  --tuck-sheen: rgb(255 255 255 / .55);
  --tuck-ink: #1d1d1f;
  --tuck-muted: #6e6e73;
  --tuck-field: rgb(255 255 255 / .55);
  --tuck-field-line: rgb(29 29 31 / .11);
  --tuck-accent: #0071e3;
  --tuck-accent-hover: #0077ed;
  --tuck-link: #0066cc;
  --tuck-error: #e30000;
  --tuck-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", "Helvetica Neue", sans-serif;
  --tuck-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", "Helvetica Neue", sans-serif;
  --tuck-spring: cubic-bezier(.34, 1.56, .64, 1);
  --tuck-ease: cubic-bezier(.22, 1, .36, 1);

  /* pupil offsets, written by tuck.js every frame */
  --tuck-fx: 0; --tuck-fy: 0;
  --tuck-lx: 30%; --tuck-ly: 0%;
  --tuck-bx: 0; --tuck-by: 0;

  position: relative;
…  395 more lines in the zip

Ask a question

What it does

A liquid-glass sign-up card, Apple-style, with a snail sitting on top and a soft single-colour scene drifting behind it. The snail watches you type your email, pulls its eyes into its head when you type your password, and peeks with one eye if you show it.

Good for: SaaS and app sign-up pages, kids' and education products, playful brands, waitlists.
How it works: Tuck reacts to the form, not to a timer. It follows the pointer when idle, follows the caret while you type, hides on the password field, peeks when the password is shown, frowns on errors and hops when you sign up. The background breathes with it: it dims while Tuck hides and brightens on success. One CSS variable sets its colour.
Includes: Three screens — create account, sign in (with “Forgot password?”) and reset password.
How to use: Copy two files and the markup, then pass an onSubmit function that calls your API. Throwing an error makes Tuck frown and shows the message.

Price: $29, one payment
Version: 1.1.0
Code size: 10.6 KB gzipped
Dependencies: None
Built with: HTML, CSS, JavaScript, SVG
Category: Form
Collection: Mascot Forms
Screens: Sign up, Sign in, Reset password
Licence: Unlimited personal and client projects
In the zip: tuck.css tuck.jsthe component
index.html sign-in.html reset.htmlthe three screens with the inline SVG snail
mascot.jsthe engine behind the eyes, moods and form
README.mdmoods, setup, options, colours, React notes
package.json vite.config.js LICENSE.md

Use it in your project

Copy tuck.css, tuck.js and mascot.js into your project.
Copy the markup from index.html (the block between the COMPONENT comments), including the inline SVG.
Start it and send the data to your backend:

import { init } from './tuck.js';
const tuck = init(document.querySelector('.tuck'), {
  onSubmit: async ({ email, password }) => {
    const res = await fetch('/api/signup', { method: 'POST', body: JSON.stringify({ email, password }) });
    if (!res.ok) throw new Error('That email is already registered');
  },
});

If onSubmit throws, Tuck frowns and the error message is announced. To put the message under a field, name it: throw Object.assign(new Error('Wrong password'), { field: 'password' }). If it resolves, Tuck hops.

useEffect(() => {
  const tuck = init(ref.current, { onSubmit });
  return () => tuck.destroy();
}, []);

Questions

What exactly do I get?

The full source, the SVG character, a demo page and a README. No account, no framework.

Can I use it in client projects?

Yes, in unlimited projects. You can't resell or share the source or the character on their own.

Can I change the colours to match a brand?

Yes. The skin, shell, cheeks and button are all CSS variables.

Can I add fields like a name?

Yes. Add another input, and Tuck looks at it too.

Is it accessible?

It's a real form with labels, error messages linked to fields, and announcements. The snail is decorative and hidden from screen readers.

What if it doesn't work for me?

If it doesn't work like the demo, you get a refund within 14 days.

Still have a question? Email us. The person who made it answers.

More like Tuck

All forms

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

$12

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

$12

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

$12

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

$12

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

7.7 KB0 depsForms

What it does

Use it in your project

Questions

More like Tuck

Dovetail

Ember

Flap

Hasp

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Tuck

Dovetail

Ember

Flap

Hasp