Journal

Tag

#gamification

Build a Duolingo-Style Learning Tree UI in SwiftUI: a glass iPhone app-grid icon on a mint and teal gradient
Guides 10 min read

Build a Duolingo-Style Learning Tree UI in SwiftUI

The Duolingo learning tree is a winding path of lesson nodes with states. Here is how to build it in SwiftUI from a data model, with the path, states, and motion.

Lawrence Arya · June 11, 2026
Wheel of fortune spinning animation in React Native (Reanimated): the App Store logo as a glossy glass icon on a purple and blue gradient with floating bubbles
Guides 10 min read

Wheel of fortune spinning animation in React Native (Reanimated)

Build a wheel of fortune spin in React Native with SVG and Reanimated. The key: choose the winning segment first, then animate the wheel to land on it.

Lawrence Arya · June 10, 2026
Scratch Card UI in React Native + Expo: Skia Guide: a glowing iPhone home-screen icon on a purple and blue gradient
Guides 5 min read

Scratch Card UI in React Native + Expo: Skia Guide

How to build a scratch card reveal in React Native with Expo and Skia: the erase-mask technique, reveal thresholds, haptics, and the gambling line.

Lawrence Arya · June 5, 2026
Duolingo-Style Progress Ring Animation on iOS (SwiftUI): the App Store logo as a frosted glass icon on a pink and blue gradient with bubbles
Guides 5 min read

Duolingo-Style Progress Ring Animation on iOS (SwiftUI)

A Duolingo-style progress ring is one trimmed circle, animated. Here is the SwiftUI pattern, the rounded-cap detail, and how to drive it without redrawing.

Lawrence Arya · June 4, 2026
SaaS Gamification React UI: Engagement Without Dark Patterns: the App Store logo as a glossy glass icon on a purple and blue gradient with floating bubbles
Guides 6 min read

SaaS Gamification React UI: Engagement Without Dark Patterns

Build SaaS gamification UI in React that motivates honestly: progress, streaks and badges tied to real value, not dark patterns. Start from a VP0 design.

Lawrence Arya · June 4, 2026
Wheel of Fortune Spinner UI Template for iOS: the App Store logo as a frosted glass icon on a pink and blue gradient with bubbles
Guides 4 min read

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.

Lawrence Arya · June 2, 2026
Forest Style Tree-Growing Focus Timer in SwiftUI, Free: the App Store logo on a glass tile over a blue gradient with bubbles
Guides 5 min read

Forest Style Tree-Growing Focus Timer in SwiftUI, Free

Build a Forest style focus timer in SwiftUI from a free template. A tree that grows while you focus and withers if you leave, with Claude Code or Cursor.

Lawrence Arya · June 1, 2026
Confetti Cannon Animation in SwiftUI (Free Pattern): the App Store logo on a glass tile over a blue gradient with bubbles
Guides 4 min read

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.

Lawrence Arya · May 31, 2026
Daily Check-In Calendar UI That Builds a Habit: a glowing iPhone home-screen icon on a purple and blue gradient
Guides 4 min read

Daily Check-In Calendar UI That Builds a Habit

A daily check-in calendar turns showing up into a streak. Build a motivating check-in grid from a free VP0 design, and keep the habit honest, not manipulative.

Lawrence Arya · May 31, 2026
Duolingo-Style Streak Flame Animation in SwiftUI: a glossy App Store icon on a blue, pink and orange gradient with bubbles
Guides 4 min read

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.

Lawrence Arya · May 31, 2026
Fitness App Achievement Badge UI That Motivates: a glass iPhone UI wireframe icon on a holographic purple gradient
Guides 4 min read

Fitness App Achievement Badge UI That Motivates

Achievement badges work when they mean something. Build motivating fitness badges from a free VP0 design, celebrate real milestones, and keep it honest.

Lawrence Arya · May 31, 2026
Leaderboard Podium Animation for iOS (Free SwiftUI Pattern): the App Store logo as a glossy glass icon on a purple and blue gradient with floating bubbles
Guides 5 min read

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.

Lawrence Arya · May 31, 2026
Language Learning App UI: Lessons, Streaks, and Audio: a glass photo icon surrounded by chat, music, heart, camera and shopping app icons on a pastel gradient
Guides 4 min read

Language Learning App UI: Lessons, Streaks, and Audio

A language app is a lesson path, bite-size exercises, and a streak. Build a Babbel-style learning UI from a free VP0 design with clear audio and spaced repetition.

Lawrence Arya · May 31, 2026
Spin-the-Wheel Daily Reward UI: Fun, Fair, Not Gambling: a glass photo icon surrounded by chat, music, heart, camera and shopping app icons on a pastel gradient
Guides 4 min read

Spin-the-Wheel Daily Reward UI: Fun, Fair, Not Gambling

A spin-the-wheel reward adds daily delight, if it is honest. Build a fair, transparent reward wheel from a free VP0 design that is fun engagement, never gambling.

Lawrence Arya · May 31, 2026
Duolingo-Style Gamification UI (Learn the Pattern): a glass iPhone UI wireframe icon on a holographic purple gradient
Guides 4 min read

Duolingo-Style Gamification UI (Learn the Pattern)

Gamification works when it rewards real progress, not empty points. Build streaks, XP, and wins from a free VP0 design, anchored to genuine actions in your app.

Lawrence Arya · May 30, 2026