Halo Sign InNew

When to use

• A sign-in page for a consumer app — rentals, bookings, a marketplace — that wants to feel soft and trustworthy
• Email and password sign-in with three social providers alongside

When not to use

• Passwordless or magic-link flows — there is a password field and a show / hide toggle built in
• Dark sites; the tray, wells and shadows are drawn for white

Installation

Add Halo Sign In with the shadcn CLI — it writes the files into components/blocx/ and installs what they import — or copy it in by hand.

Requires React 19 · Next.js (it loads its fonts with next/font) · motion.

pnpm dlx shadcn@latest add "https://www.pinui.xyz/r/blocx/halo-sign-in.json"

Usage

import HaloSignIn from "@/components/blocx/HaloSignIn";

export default function Page() {
  return (
    <HaloSignIn
      onSubmit={async ({ email, password }) => {
        await signIn(email, password);
      }}
      onProvider={(provider) => signInWith(provider)}
    />
  );
}

API reference

HaloSignIn

The title, the line under it and the sign-up link are written in HaloSignIn.tsx; the mark is the small house SVG in Halo().

Accessibility

• The section is labelled by its title; both fields have real labels, visually hidden, and the browser validates them
• The show / hide toggle names what it will do and reports aria-pressed
• The social buttons are named by their providers, and the submit button's label is a polite live region as it changes

Motion

• The tray rises in, the dot field unwinds into place and keeps turning slowly, and the mark springs in and draws its house
• Each row rises and un-blurs on a stagger; the button rolls its label through Signing in… and Welcome back
• Reduced motion drops the travel and keeps the fades

Responsive behavior

• A 392px card centred in the window; below 400px its padding and title come in
• On a window shorter than 640px the halo and the gaps tighten so the card still fits without scrolling