SpriteKit Onboarding
Interactive phased onboarding with physics-based card animations and auto-categorisation
A cinematic onboarding experience built with SpriteKit where shopping list cards float in zero-gravity, sort into auto-categories, merge into smart kits, and showcase a usage planner. Each phase transitions smoothly with physics-based animations and supports touch interaction. Built for Shopa, the code is parameterised so you can adapt it for any app. Available as both a native SpriteKit implementation and a vanilla JavaScript web version.
Overview
An interactive, phased onboarding animation built with SpriteKit. Shopping list cards float with zero-gravity physics, sort into auto-categories, merge into smart kits, and showcase a usage planner — all with smooth transitions and touch interaction. Originally built for Shopa, it walks users through each feature in a cinematic sequence.
Grab the Code — Swift
Drop these three files into your Xcode project. The config file is optional — use it to customise items, categories, and branding without touching the scene logic.
SpriteKit scene with phased animations, physics, drag interaction, and idle detection
SwiftUI wrapper with SpriteView and close button
Configuration struct with customisable items, categories, and branding
Grab the Code — Web
A standalone HTML file with vanilla JS — no build step, no dependencies. Edit the CONFIG object at the top to customise.
Vanilla JS version with DOM elements, custom physics, and configurable constants
Features
Phased Storytelling
Five distinct phases tell a product story: welcome, adding items, categorisation, kits, and planning. Each transitions smoothly into the next.
Zero-Gravity Physics
Cards float freely in a zero-gravity environment, bouncing off walls with configurable restitution and damping.
Interactive Cards
Users can drag and flick cards during the adding-items phase. Idle detection auto-advances after 2 seconds.
Auto-Categorisation
Cards smoothly animate into sorted category groups, demonstrating automatic organisation.
Progressive Drawing
The kit box outline draws itself progressively using path animation, with a fade-in title.
Cross-Platform
Runs natively on iOS with SpriteKit, or in any browser with the vanilla JS version. No dependencies.
Quick Start
struct AppOnboardingView: View {
@Environment(\.dismiss) private var dismiss
var body: some View {
InteractiveOnboardingView(
config: OnboardingConfig(
appName: "My App",
appTagline: "Your tagline here",
items: [
.init(name: "Task 1", detail: "First task"),
.init(name: "Task 2", detail: "Second task"),
.init(name: "Task 3", detail: "Third task"),
],
categories: ["📋 Work", "🏠 Home", "🎯 Goals"],
kitName: "📦 Starter Kit",
accentColor: .blue
)
)
}
}Customisation Ideas
Different item themes
Swap shopping items for tasks, notes, contacts, or any domain. The config struct accepts any array of name/detail pairs.
Adjust physics
Tune restitution for bouncier or stickier walls, damping for faster or slower settling, and initial velocity ranges for spawn energy.
Add or remove phases
The phase machine is modular. Skip phases you don't need or add custom ones by extending the OnboardingPhase enum.
Match your brand
Set your accent colour, choose font weights, and adjust card styling to match your app's design system.