Feature tour

Feature tours usually slide a static image and two lines of text sideways, and nobody reads them. This one stages every page like a short animation, the way polished consumer apps do it: the page assembles in front of you and the words arrive last, so each feature gets a moment of attention.

Built for a messaging app (privacy, chats, smart replies, calls, stickers, groups, then notifications), and it works for any app:

• Choreographed entrance per page: faint doodles drift in first, then every illustration piece flies in from its own direction, turned, scaled and blurred, and springs into place on its own delay. The title rises into place, the message fades in, then the title's trailing emoji pops with an overshoot.
• Page turns: Next dims straight away, the page holds a beat, blurs and shrinks out, and the next page assembles itself. The progress segment shrinks on the old step and stretches on the new one, and the button title rolls up even when it stays "Next". Back plays the same turn in reverse order of pages.
• Bespoke illustrations: each page draws whatever it wants on a 360×400 pt canvas that scales to fit. Pieces may overhang the canvas; the screen edges crop them, which is how cards seem to slide in from off screen.
• Async actions: a page can run work before moving on (ask for notification permission, save a choice); the button shows a spinner meanwhile.
• Closing permission page: showsProgress: false hides back and progress for a page that isn't a tour step, as the last "Allow notifications" page does.
• Your icon set, not emoji: prototype with emoji, then pass artwork: ["🔔": Image("Bell3D"), …] and every emoji the tour draws (title emoji, SWTourGlyph, emoji doodles, emoji inside lines of text) becomes your image. The demo was recorded with 3D clay icons this way.
• Kit for your own pages: swTourPiece (fly-in), swTourReveal (fade-up), SWTourSparkle, SWTourBlob, SWTourDoodles, SWTourGlyph.