ProOnboarding and sign in

Swipe-to-pick setup

Swipe to choose your pet, then tell us about them.

Pro
Included in ShipSwift Pro: $89 a year, or $199 for life.
Get Pro

Copies a short instruction with your private download link. Paste it into your agent: it downloads the whole skill (the source code, the setup steps and the mistakes we already made for you) and builds the screen.

Works with

+70

What it does

First-run setup that needs one choice and a name (which pet, which sport, which kind of account) usually lands as a dull form. This flow makes the choice physical: tall cards fan out around a welcome card, swing like a dial as you swipe, and whatever sits in the middle is your pick. Continue lights up only when an option is centered. The second step names the thing you picked and greets it by name as you type.

Extracted from a shipped pet app (cat or dog, then "Tell us about your dog" with name and breed):

  • Card dial: horizontal paging ScrollView with .viewAligned snapping and negative spacing; scrollTransition rotates side cards ±12° around their bottom edge, scales them to 0.86 and dims them, so the row reads as a dial. scrollPosition is the selection.
  • Welcome card in the middle: flowing pastel mesh gradient (MeshGradient), an emblem, "Choose your pet" and a rocking hand "Swipe to choose". It wiggles once on appear, a decaying swing around its bottom edge.
  • Option cards: looping muted video, an image, or an emoji stand-in, with the option's name in thick material at the bottom and an accent border. Tap = pick and continue.
  • Follow-up step: small card with the same art (continuity between steps), title switching live from "Tell us about your dog" to "Tell us about Mochi", big centered name field with an underline that turns primary on focus, optional searchable picker (breeds in the demo) that opens a sheet with search, Continue pinned at the bottom over a fade.
  • Backdrop: the plasma style of ShipSwift's free SWDots (a Metal dot grid that lights up under a slow plasma), at 40% opacity, shared by both steps so nothing flickers between them.

The source app's cat and dog videos can't ship; the demo uses emoji over gradients. Set videoName (bundled mp4) or imageName on each option for the real look.

What you get

  • ✓927 lines of source code, ready to paste
  • ✓Architecture
  • ✓Dependencies
  • ✓Implementation
  • ✓Usage
  • ✓Integration Checklist
  • ✓Common Customizations
  • ✓Known Pitfalls
onboardingsetupcarouselcard pickerscrollTransitionswipeformsearchable pickerpetsfirst runSwiftUI

More in Onboarding and sign in

AI agent onboarding
Pro
Pick a side, choose a hiring style, meet your AI agent, then land on a home it has already filled.
Guided story intro
Pro
A guide walks you into the stories, learns your name, then you sign in with Apple.
Three-page intro
Free
Three short pages: snap it, pack it, dress it.
Apple sign-in with guest mode
Free
Sign in with Apple, or keep browsing as a guest.
Phone, Apple and Google sign-in
Free
Mobile number, Apple or Google, with a guest option.