Steep

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

A UI component for any site
Plain HTML, CSS and JavaScript, 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 $44, you save $11

Steep: a look at the source

// Steep — password field with a liquid strength meter. No dependencies.
// The built-in scorer is a quick heuristic; pass your own `score` (e.g. zxcvbn) for real checks.

const COMMON = /^(password|passw0rd|qwerty|letmein|welcome|admin|iloveyou|monkey|dragon|abc123|123456|111111)/i;

export function defaultScore(pw) {
  if (!pw) return { score: 0, hint: '' };
  const classes = [/[a-z]/, /[A-Z]/, /\d/, /[^\w\s]/].filter(r => r.test(pw)).length;
  let points = 0;
  if (pw.length >= 8) points++;
  if (pw.length >= 12) points++;
  if (pw.length >= 16) points++;
  points += Math.max(0, classes - 1);
  if (COMMON.test(pw) || /^(.)\1+$/.test(pw)) points = 0;
  const score = Math.max(1, Math.min(4, Math.round(points * 4 / 6)));
  const hint =
    pw.length < 8 ? 'Use at least 8 characters' :
    classes < 3 ? 'Mix in numbers or symbols' :
    pw.length < 12 ? 'A few more characters' : '';
  return { score, hint };
}

const LABELS = ['', 'Weak', 'Fair', 'Good', 'Strong'];

export function init(root, { score = defaultScore, labels = LABELS, onChange } = {}) {
  const input = root.querySelector('.steep-input');
  const eye = root.querySelector('.steep-eye');
  const wave = root.querySelector('.steep-wave');
  const meter = root.querySelector('.steep-meter');
  const text = meter.querySelector('.steep-meter-text');
  const reducedMotion = () => matchMedia('(prefers-reduced-motion: reduce)').matches;
  let last = 0;

  function update() {
    const { score: s, hint } = score(input.value);
    root.dataset.score = String(s);
    const strong = document.createElement('strong');
    strong.textContent = labels[s];
    text.replaceChildren(...(s ? [strong, hint ? ` · ${hint}` : ''] : []));
    if (s !== last) {
…  40 more lines in the zip

/* Steep — a password field that fills with liquid as the password gets stronger */
.steep {
  --steep-ink: #0b1220;
  --steep-muted: #5a6475;
  --steep-field: #fff;
  --steep-line: rgb(15 25 45 / .12);
  --steep-accent: #007aff;
  --steep-weak: #ff3b30;
  --steep-fair: #ff9500;
  --steep-good: #ffcc00;
  --steep-strong: #34c759;
  --steep-h: 52px;
  --steep-font: "SF Pro Text", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --steep-level: 0%;
  --steep-color: var(--steep-weak);

  display: grid;
  gap: 8px;
  font-family: var(--steep-font);
  color: var(--steep-ink);
}
.steep[data-score="1"] { --steep-level: 30%; --steep-color: var(--steep-weak); }
.steep[data-score="2"] { --steep-level: 52%; --steep-color: var(--steep-fair); }
.steep[data-score="3"] { --steep-level: 74%; --steep-color: var(--steep-good); }
.steep[data-score="4"] { --steep-level: 100%; --steep-color: var(--steep-strong); }

.steep-label { font-size: 13px; font-weight: 600; letter-spacing: -.005em; }

.steep-field {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--steep-h);
  border-radius: 16px;
  background: var(--steep-field);
  box-shadow: inset 0 0 0 1px var(--steep-line), 0 1px 2px rgb(15 30 60 / .05);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow 160ms ease-out;
}
…  110 more lines in the zip

Ask a question

What it does

A password input whose background fills from the bottom with a gently moving liquid. The colour changes from red to orange to yellow to green as the password gets stronger. A strong password fills it to the top.

Good for: Sign-up forms, account settings, password reset pages.
How it works: As you type, each password gets a score from 1 to 4. The liquid rises to that level with a slosh, and a short hint tells you what would make it stronger.
How to use: Copy two files, paste the markup, call initAll(). You can plug in your own scorer, such as zxcvbn.

Price: $5, one payment
Version: 1.0.0
Code size: 2.8 KB gzipped
Dependencies: None
Built with: HTML, CSS, JavaScript
Category: Form
Licence: Unlimited personal and client projects
In the zip: steep.css steep.jsthe component and a built-in scorer
index.htmla plain example page
README.md package.json vite.config.js LICENSE.md

Use it in your project

Copy steep.css and steep.js into your project.
Add the markup from index.html (the block between the COMPONENT comments).
Start it:

import { init, initAll } from './steep.js';
initAll();

Questions

What exactly do I get?

The full source, 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 itself.

Is the built-in check secure?

It's a quick in-browser heuristic for feedback. Always check passwords on your server too, or plug in zxcvbn (the README shows how).

Is it accessible?

It's a real labelled input. The strength text is announced politely, and the show/hide button uses aria-pressed.

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 Steep

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

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

What it does

Use it in your project

Questions

More like Steep

Dovetail

Ember

Flap

Hasp

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Steep

Dovetail

Ember

Flap

Hasp