Auth54: Quiet Sign In

A full-height sign-in split: wordmark, a serif greeting that settles in word by word, email and password fields under a full-width pill, and a switch-to-booking line on one side; on the other a photograph that clears from a blur on load, drifts as the page scrolls, and carries a serif reassurance over its foot.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/auth54?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/auth54?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/auth54.tsx, the shadcn input and label primitives the form is built on, and the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports auth54Demo alongside the block: the exact props behind the preview above. Spread it to get a working sign-in screen in one line.

import { Auth54, auth54Demo } from "@/components/beste/block/auth54";

export default function Page() {
  return <Auth54 {...auth54Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Auth54 } from "@/components/beste/block/auth54";

export default function Page() {
  return (
    <Auth54
      brand="Altair"
      heading="Welcome back."
      description="Sign in to see your upcoming sessions, read your notes, or move a slot."
      form={{
        email: "Email",
        password: "Password",
        button: "Sign in",
        forgot: "Forgotten your password?",
        forgotHref: "/reset",
      }}
      footer={{ text: "New here?", link: "Book a first conversation instead", href: "/book" }}
      image={{
        src: "/photos/lake.jpg",
        alt: "Morning mist lifting off a still lake below wooded hills",
        caption: "Your notes are only ever visible to you and your practitioner.",
      }}
    />
  );
}

Props

type Auth54Form = {
  email: string;
  password: string;
  button: string;
  forgot: string;
  forgotHref: string;
};

Behavior notes

• The heading runs with trigger="mount" rather than the component's default "view". A sign-in screen is above the fold by definition, so waiting for a scroll that never comes would leave the greeting invisible.
• Field ids come from useId, so two of these on one page (a sign-in and a sign-up, say) never collide and every Label keeps pointing at its own input.
• autoComplete is set to email and current-password, so password managers recognise the form rather than treating it as an unknown pair of fields.
• The photograph is only mounted from md up. Its scroll drift measures a column that is display: none below that, where progress simply stays at zero and nothing moves.
• It clears from blur(24px) and a 1.1 scale on decode, with a complete check on mount so a cached image is not left blurred waiting for an onLoad that already fired. The Tailwind scale-[1.2] on the same element writes the standalone scale property, so it composes with the animated transform instead of fighting it.
• The caption sits over a from-foreground/70 gradient rather than over the raw photograph, which is what keeps it readable whatever the image underneath happens to be.
• The submit button carries no handler and the form only calls preventDefault(), so nothing is posted anywhere until you wire it up.