remocnSignupFlow
A cursor-driven signup card — labeled fields fill top-to-bottom, then submit with success feedback
import { SignupFlow } from "@/components/remocn/signup-flow";export const Scene = () => <SignupFlow />;A composition scene that renders a real shadcn-style signup card — header, labeled Full Name / Email / Password / Confirm Password fields, a primary "Create account" button, a "Sign up with Google" outline button, and a sign-in footer. The cursor fills each field top-to-bottom, then submits and receives a success confirmation via toast. Each step is driven by primitives orchestrated on a shared timeline.
Installation
$ pnpm dlx shadcn@latest add @remocn/signup-flowInstalling signup-flow automatically installs the shared remocn-ui core and all composed primitives via registryDependencies: cursor, input, button, and toast. You do not need to install them separately.
Composed primitives
- Cursor — animated pointer with click ripples
- Input — text reveal animation with active/typing states (one per field)
- Button — hover/press/loading/success progression (primary) and a static outline button
- Toast — success message auto-dismiss
The card chrome (surface, header, field labels, descriptions, and footer) is static layout drawn from the resolved theme. The card surface uses theme.background so the Input and Button atoms blend into it in both light and dark; the stage sits on theme.muted so the card lifts off the page via tone, border, and shadow.
Timeline narrative
The scene opens with the cursor parked in the top-left. It clicks the Full Name field at frame 18 (the field focuses and types in), then Email at 52, Password at 96, and Confirm Password at 134 — each cursor-click frame matches that field's active frame, and each field's typed value reveals before the cursor moves on. At frame 176 the cursor reaches the Create account button (hover), which presses at 186, enters loading (spinner) at 192, and resolves to success at 234. Simultaneously at 234 the success toast slides in, auto-dismissing at 300.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Create an account" | Card title. |
description | string | "Enter your information below to create your account" | Card description under the title. |
fullName | string | "John Doe" | Value typed into the Full Name field. |
email | string | "m@example.com" | Value typed into the Email field. |
password | string | "••••••••" | Masked value typed into the Password and Confirm fields. |
createLabel | string | "Create account" | Primary submit button label. |
googleLabel | string | "Sign up with Google" | Outline (social) button label. |
signinText | string | "Already have an account?" | Footer prompt shown before the Sign in link. |
toastTitle | string | "Account created" | Success message shown in the toast. |
theme | RemocnTheme | — | Optional theme override (concrete oklch/hex/rgb values). |