SignupFlow
A cursor-driven signup card — labeled fields fill top-to-bottom, then submit with success feedback
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.
$ pnpm dlx shadcn@latest add @remocn/signup-flowComposed 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.
Props10
| Prop | Type | Default |
|---|---|---|
| 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. | |
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). | |
- titlestring
Card title.
Default
"Create an account" - descriptionstring
Card description under the title.
Default
"Enter your information below to create your account" - fullNamestring
Value typed into the Full Name field.
Default
"John Doe" - emailstring
Value typed into the Email field.
Default
"m@example.com" - passwordstring
Masked value typed into the Password and Confirm fields.
Default
"••••••••" - createLabelstring
Primary submit button label.
Default
"Create account" - googleLabelstring
Outline (social) button label.
Default
"Sign up with Google" - signinTextstring
Footer prompt shown before the Sign in link.
Default
"Already have an account?" - toastTitlestring
Success message shown in the toast.
Default
"Account created" - themeRemocnTheme
Optional theme override (concrete oklch/hex/rgb values).