Use One Glass Shell for Login and Signup

Login and signup are the same room with different furniture. If you rebuild the glass, the orbs, and the tilt for the second screen, the two pages drift apart the first week someone edits only one file. Put the stage in one component. Pass the title, the fields, and the submit label as children. The glass login is the first room. The second room should be unmistakable as its pair.

The shell owns the scene#

GlassShell renders the dark stage, the orbs, the perspective, the back plates, and the glare. It does not know whether the form asks for a password once or twice. Children sit inside the front plate. That split means a spacing fix happens once.

export function GlassShell({ children }: { children: React.ReactNode }) {
  return (
    <section className="relative isolate overflow-hidden rounded-[2rem] bg-[#07080f] px-4 py-16">
      <div className="glass-orb -left-16 top-10 h-56 w-56 bg-violet-500/80" />
      <div className="mx-auto max-w-md [perspective:1200px]">{children}</div>
    </section>
  );
}

Change the fields, keep the order#

Both screens start with the product name, a short title, and one sentence. Login asks for email and password. Signup asks for name, email, password, and a repeat of the password. The primary button stays in the same place, full width, same gradient. A text link under the button is the only navigation between them: "Create an account" on login, "Already have an account" on signup.

Confirm the password in the browser first#

if (password !== confirm) {
  setError("Those passwords do not match.");
  return;
}
if (password.length < 8) {
  setError("Use at least 8 characters.");
  return;
}

Show that error on the form, next to the fields, before any request. Clear both password fields when you leave the screen or finish a demo. The email can stay so the visitor can correct a typo without retyping everything else.

Two routes, one design#

Use /login and /signup, or two modes on one route if the product is small. Give each mode its own document title and description so search can tell them apart. Share the shell. Do not share one heading for both jobs. A page titled "Auth" is a page nobody searches for.

• Same card width, same type scale, same button.
• Signup may be taller. Let the stage grow. Do not shrink the type to force it into the login height.
• Focus the first field on arrival so the keyboard user starts in the form.
• Keep the demo copy if the screen is still a sample. Remove it when a real account is created.