Screen Annotations — CON-013 Registration Complete
Screen ID: CON-013
Flow: Authentication → Registration Complete
Previous: CON-012 Registration (Name)
Next: CON-020 Address Prompt
Full-Screen Design: This is an immersive success screen using the dark green (primary) background. No status bar, no header, no bottom nav. Creates a celebratory "moment" in the flow.
Animation Sequence:
- Checkmark circle pops in with a spring animation (0-0.6s)
- Checkmark icon draws/appears inside the circle (0.3-0.7s)
- "Welcome, Sarah!" heading fades up (0.5-1s)
- Subtext fades up (0.65-1.15s)
- CTA button fades up (0.8-1.3s)
Personalization: "Sarah" is dynamically populated from the name entered in CON-012. The greeting should use the first name only for a friendly, personal feel.
Auto-Navigate: If the user takes no action within 2 seconds after animations complete (~3.3s total), auto-navigate to CON-020 Address Prompt. The button provides an immediate manual option. The auto-navigate should be cancelled if the user interacts with the screen (tap/scroll).
Back Prevention: The hardware/gesture back button should be disabled on this screen since registration is complete. Going "back" to the registration form would be confusing.
Decorative Elements: Three semi-transparent lime accent circles in the background add depth without being distracting. These are purely decorative and use pointer-events:none.