Guided story intro
A guide walks you into the stories, learns your name, then you sign in with Apple.
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
A login wall on first launch loses people. This intro turns it into a short scene: a guide character wakes up, introduces itself and the stories (or features) inside your app, asks the user's name, uses it right away, and only then asks them to "leave their mark" with Sign in with Apple — by which point signing in feels like part of the story, not a gate.
Extracted from a shipped reading app, where the guide (a glass disc with two glowing eyes) walks the reader through four classic books before signing in:
- Guide character drawn every frame in
Canvas: eyes and mouth sit on an invisible sphere, so glances turn the whole face; random glances, blinks (sometimes double), a float, five moods (dormant "…" typing dots, neutral, talking, happy, thinking). No image assets. - Wake-up: the dormant "…" sits at the screen center, then springs out to its spot on the page with a burst of gold sparks; the dialogue panel slides up 0.7 s later.
- Dialogue panel in the bottom third: speaker name in small caps, serif line typed out character by character (CJK slower, pauses after sentence punctuation), a wiggling "tap to skip" hint at the end of the line, auto-advance after the estimated speaking time, reply choices / name field / Apple button fade in under the line. No panel backing: text has a shadow and sits on the art.
- Pages: every line names a page (art + where the guide parks + where the camera pushes in). When the page changes, the guide flies to its new spot and the new art spreads from the guide's position like ink soaking into paper, with an irregular edge and a darker "wet" rim. Each page then pushes in 15% over 16 s, while fire lights flicker, glows breathe, dust motes rise through light beams and mist drifts across the sky.
- Branches: replies jump to different lines; the name step feeds the name into later lines ("Avery, I'll remember that."); Sign in with Apple routes to success, cancelled ("No rush…") or failed ("Try once more") lines.
The source app's illustrations, voice-over, ambience and music can't ship with the template: pages render stand-in art (gradient + a large soft SF Symbol) until you pass your own imageName, and audio hooks in through onStepChange (see Common Customizations).
What you get
- ✓1,705 lines of source code, ready to paste
- ✓Architecture
- ✓Dependencies
- ✓Implementation
- ✓Usage
- ✓Integration Checklist
- ✓Common Customizations
- ✓Known Pitfalls