A password field with a meter that fills as the rules are met.
The prompt25,954 characters
Add the "Signup" component from notboring to my project.
It is licensed for use in my projects — notboring.dev/license. Please:
1. Create the component at a sensible path for this
project, named Signup, from the source below.
2. It needs nothing beyond React.
3. Add the CSS to the project's stylesheet.
4. THE PART THAT NEEDS YOUR JUDGMENT. The CSS reads
these custom properties and does not define them:
--card
--font-ui
--ink
--ink-3
--ink-4
--ink-5
--ink-rgb
They are notboring's design tokens. Map each one to
whatever this project already uses for the same
job — its own ink, ground, surface and UI font —
rather than defining them as new globals. If the
project has no equivalent, define it locally on
the component's own root so nothing leaks out.
Anything ending -rgb wants three bare numbers,
because the CSS builds rgba() from it.
Keep the comments. They say why the numbers are what
they are, and they are most of what makes this worth
copying rather than rewriting.
--- Signup.tsx ---
import { useEffect, useId, useRef, useState } from "react";
/* ══ Signup ═══════════════════════════════════════════════
A name, an email, and a password with a meter under it
that fills as the rules are met.
THE METER IS THE RULES, NOT A SCORE. The usual strength bar
runs a formula over the string and colors itself red,
amber, green — and a person watching it cannot tell what to
type next. Here there are four rules, four segments, and
four lines: each rule that passes fills its segment and
checks its line, so the meter reads as a list being
completed rather than as a verdict being passed. Nothing
is scored; a password is strong when all four are true.
THE SEGMENTS FILL IN ORDER, AND EMPTY IN REVERSE. Meet two
rules at once and the second segment waits 60ms for the
first; delete a character that breaks three and the third
empties first. A bar that reads left to right is filling
up; one whose parts blink independently is a status
display. Direction is the whole difference.
NO FORM SUBMITS. The fields sit in a group, not in a form
with a submit: Chrome offers to save a password when a form
The rest — the source and its comments — is what you are buying.