# Two-step sign-in

An animated isometric shadcn/ui scene for auth and SaaS sites: a code texted to a phone lands on the sign-in screen and signs the user in, in your theme.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** Auth and identity product sites; SaaS security and login feature sections; Developer tools explaining two-factor sign-in; Onboarding and account security pages
- **Category:** Technology · **Type:** Scenes · **Style:** Gradient, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/isometric/two-step-sign-in) · [Screenshot](https://www.craftui.space/llms.md/preview/two-step-sign-in.a719e657.jpg)

![Two-step sign-in](https://www.craftui.space/llms.md/preview/two-step-sign-in.a719e657.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/two-step-sign-in.json
```

This is a paid item (ISO-R87FKV): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import TwoStepSignIn from "@/components/isometric/two-step-sign-in";

export default function Page() {
  return <TwoStepSignIn />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `IsoTone` | `"primary"` | Brand colour: a theme token name (primary, chart-2…) or any CSS colour. |
| `accent` | `IsoTone` | — | Colour of lit details (buttons, wallpaper, the code chip). Defaults to `tone`. |
| `variant` | `IsoVariant` | `"ink"` | Flat ink drawing (default), soft tint, full colour, or blueprint outline. |
| `strokeWidth` | `number` | `0.3` | Line weight: in `ink` 0.3 is a 1.3 px outline at any size; rims or outlines elsewhere. |
| `appName` | `string` | `"Acme"` | App name shown on the text message, up to about 10 characters. |
| `code` | `string` | `"481927"` | The six-digit code sent and entered. |
| `destination` | `string` | `"+1 ••• 4242"` | Where the code was sent, shown on the screen (about 12 characters). |
| `name` | `string` | `"Jane"` | First name in the welcome line, up to about 10 characters. |
| `screen` | `ReactNode \| ((state: SignInScreenState) => ReactNode)` | — | Your own UI inside the screen instead of the built-in sign-in: any React node, or a function of the story's state (`step`, `code`) so your UI follows the phone. It renders at 472 × 236 CSS px (the screen is 11.8 × 5.9 units at 40 px per unit) and is projected into the scene; the chip still lifts off the phone and lands on it. |
| `autoPlay` | `boolean` | `true` | Play when the scene scrolls into view. Off shows the signed-in end state. |
| `loop` | `boolean` | `true` | Replay after a pause. Off plays once and holds the end state. |
| `replayOnClick` | `boolean` | `true` | Clicking the scene replays the story. |
| `rotate` | `IsoRotate` | `"pointer"` | Let the viewer turn the scene: "pointer" (leans toward the pointer and settles back), "drag" (drag sideways or use the arrow keys), or "off". |
| `orbit` | `IsoOrbit` | `built-in demo content` | How far it turns, in degrees: a number for both ways, or [min, max]. Default [-18, 30]: further toward the screen than away from it, so the copy stays readable. Each side is capped at 40. |
| `grid` | `boolean` | `true` | Dashed construction grid on the floor. |
| `grain` | `boolean` | `false` | Film grain over the scene (off in ink). |
| `title` | `string` | — | Accessible description. Without it the scene is decorative. |
| `className` | `string` | — | Classes for the wrapper; size the scene with width (it keeps its aspect ratio). |

### `SignInScreenState`

| Field | Type | Description |
| --- | --- | --- |
| `code` (required) | `string` | The six-digit code the phone received. |
| `step` (required) | `"waiting" \| "entered" \| "verified" \| "signedIn"` | "waiting" for the code, "entered" (digits in the boxes), "verified", "signedIn". |

## Files

The install adds:

- `components/isometric/two-step-sign-in.tsx`
- `components/isometric/iso-core.tsx`

npm dependencies (installed for you): `motion`.