UI Animations, Gamification & Microinteractions

This hub covers the polish layer: animations, gamification (streaks, rewards, progress rings), haptics, and microinteractions that make an iOS app feel alive. Build the screens from a free VP0 design and add motion that communicates state, respecting Reduce Motion and accessibility.

What this hub covers

Animations and motion
Gamification and streaks
Microinteractions and haptics
Lottie and Reanimated
Accessible motion

Guides in this hub (9)

Wheel of Fortune Spinner UI Template for iOS

A free SwiftUI spinner pattern: a smooth spin that lands fairly on a segment, with disclosed odds, Reduce Motion support, and no pay-to-spin. A reward, not gambling.

Confetti Cannon Animation in SwiftUI (Free Pattern)

A confetti cannon celebrates a real win with a burst of particles. Build it in SwiftUI, fire it only on genuine success, and respect Reduce Motion.

Duolingo-Style Streak Flame Animation in SwiftUI

Build a Duolingo-style streak flame animation in SwiftUI: a flame that grows with the streak and celebrates a daily win, from a free VP0 design.

Custom Haptic Patterns With Core Haptics in React Native

Add custom haptic patterns to a React Native app with Core Haptics: tap, buzz, and bespoke textures, from a free VP0 design. Tasteful, restrained feedback.

Leaderboard Podium Animation for iOS (Free SwiftUI Pattern)

Build a leaderboard podium that ranks your top three with a satisfying rise-into-place animation in SwiftUI, accessible and free, starting from a VP0 design.

Lottie vs Rive for React Native Animations

Lottie and Rive both add rich animation to React Native, but they solve different problems. A clear comparison, plus how to pair either with VP0.

Meditation Breathing Circle Animation in SwiftUI

Build a calming breathing-guide animation in SwiftUI: a circle that expands and contracts to pace breathing, with haptics, from a free VP0 design.

Rive Interactive Button in React Native

Build an interactive button with Rive in React Native: idle, press, loading, and success states in one animation, from a free VP0 design.

Tinder-Style Swipe Trivia UI in React Native

Build a swipe-to-answer trivia game in React Native: card-stack questions, swipe for true or false, and snappy feedback, from a free VP0 design.

Related topic hubs

React Native & Expo: Mobile Frontend Architecture Native Apple & SwiftUI: The iOS Ecosystem Free iOS Templates, UI Kits & Components Vibe Coding: iOS App Template Strategy Native Hardware, Sensors & Device Features Web3, Telegram Mini-Apps & Crypto UI AI App Builders & Vibe Coding Tools App Store Publishing, Build Errors & Deployment B2B, Enterprise, Healthcare & Industry Apps Compliance, Localization & Accessibility Maps, Location, Mobility & Delivery UI Payments, Monetization & Regional Fintech Backend, Auth & Data Integrations AI/ML Product Templates & Agentic UX

New here? Start with the VP0 Journal, or browse free iOS components. VP0 is the free iOS design library for AI builders, copy a design and your AI tool rebuilds it in SwiftUI or React Native.