Swipe-to-pick setup
Swipe to choose your pet, then tell us about them.
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
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
ScrollViewwith.viewAlignedsnapping and negative spacing;scrollTransitionrotates side cards ±12° around their bottom edge, scales them to 0.86 and dims them, so the row reads as a dial.scrollPositionis 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