Create your account

NameEmail

Password

Make it eight charactersAdd a numberAdd a symbolUse upper and lower caseStrong password

Auth

Signup

A password that draws a line around itself as the rules are met. Closed loop, good password.

Reactno other dependencyplain CSS

One plan opens this one and every other

The prompt28,843 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-4
     --ink-5
     --ink-rgb
     --sgn-green

   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.

5. IF YOU CHANGE IT, GO ALL THE WAY. This block is
   built for every state its object can really be
   in — empty, one, full, refused, undone, pressed
   twice, interrupted halfway — and not only the one
   the demo opens on. Adapt it and the same standard
   holds: work out that list before you write, and
   build the whole of it. Never settle for the
   minimum that makes the screenshot right. A
   component somebody has to come back and finish is
   the thing this was written to replace.

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 that draws a line around
   itself as the rules are met.

   THE METER IS THE FIELD. A strength bar is a second object
   put under the first to talk about it, and four rules with
   four checkboxes is a form grading a form. Here the four
   rules are one stroke that starts at the top of the password
   field and travels around it: a quarter for each rule, a
   quarter of the way round. It is not a score and there is
   nothing to read — when the line has gone all the way round
   and met itself, the password is good. That is the whole
   instrument, and it is the field you are already looking at.

   THE STROKE IS ONE NUMBER. How many rules pass, over four.
   The line grows to it and shrinks back from it on the same
   easing, so deleting a character walks the stroke backwards
   the way it came. No segment blinks on by itself; a loop
   that fills in one direction is a thing being closed, and
   parts that light independently are a status display.

   ONE LINE, NOT FOUR. The list is gone but the guidance is

The rest — the source and its comments — is what the plan opens.