Emoji Loading Screen
SpriteKit physics simulation with falling emoji, gyroscope tilt, and customisable themes
A playful SpriteKit physics simulation where emoji fall, collide, bounce, and pile up with realistic gravity. Responds to device tilt via the gyroscope. Fully reusable as a loading screen, onboarding animation, or interactive element with customisable emoji sets, spawn rates, and physics parameters.
Overview
A SpriteKit physics simulation where emoji fall from the top of the screen, collide, bounce, and pile up with realistic gravity. The device gyroscope tilts the gravity vector so emojis roll and tumble when you move your phone. Built for Shopa as a playful loading screen during recipe imports, it's fully reusable for any loading state, onboarding animation, or fun interaction.
Grab the Code
Use the food emoji version as-is, or grab the reusable version for custom emoji sets and configurable physics. Preview any file before copying.
SpriteKit scene with physics, spawning, gyroscope, and cleanup
SwiftUI wrapper (UIViewRepresentable for SKView)
Generalised version with custom emoji sets, spawn rate, gravity, and limits
Features
Random Spawning
Emojis spawn at random X positions with varied sizes (40–70pt), velocities, and angular momentum
Gyroscope Tilt
CoreMotion accelerometer data dynamically adjusts gravity so emojis respond to device orientation
Collision Physics
Circular physics bodies with customisable mass, restitution, friction, and damping for realistic stacking
Pop-in Animation
Each emoji scales from 0.1 to 1.0 with a fade-in on spawn, and fades out with scale-down on stop
Memory Management
Auto-removes oldest emojis when count exceeds 100. Full cleanup on dismiss prevents memory leaks
Transparent Overlay
Renders with a clear background so it overlays on top of any existing UI without blocking touches
Quick Start
struct RecipeImportView: View {
@State private var isImporting = true
var body: some View {
ZStack {
// Your content underneath
VStack {
ProgressView()
Text("Importing recipe...")
}
// Emoji physics overlay
if isImporting {
FoodEmojiPhysicsView(isAnimating: $isImporting)
.transition(.opacity)
}
}
}
}
// Custom emoji set example
struct PartyLoader: View {
@State private var isLoading = true
var body: some View {
ZStack {
Color.black.ignoresSafeArea()
EmojiPhysicsView(
isAnimating: $isLoading,
emojis: ["🎉", "🎊", "🥳", "🎈", "🎁", "✨", "💫", "⭐️"],
spawnInterval: 0.3,
gravity: -6.0,
maxEmojis: 80
)
}
}
}Customisation Ideas
Different emoji themes
Swap the emoji array for any theme: sports (⚽️🏀🎾), weather (☀️🌧️❄️), animals (🐶🐱🐰), holiday (🎄🎅🎁), etc.
Adjust physics
baseGravity controls fall speed (-4.5 default). restitution controls bounciness (0.2–0.4 recommended for stacking). gravityMultiplier scales the gyroscope effect.
Spawn rate
The timer interval (0.4s default) controls how fast emojis appear. Try 0.2s for a rapid fill or 0.8s for a gentler effect.
Disable gyroscope
Remove the startMotionUpdates() call for a static gravity simulation. Useful for iPads or when device motion isn't wanted.