Adding Beautiful Animations to Your App: Splash and Onboarding, State-Driven Micro-Interactions, an AI Layer That Never Blocks, PostHog Funnels and Feature Flags, and the Road to the Stores

The splash covers app start-up - longer on older phones - and doubles as a first impression. Rajat shows Claude, YouTube and Zepto, and says his own was inspired by Apple's handwritten 'hello', took '2-3 tries', and that the geometry-heavy prompt is specific to his logo; the reusable part is the skill and the method. PromptQuest's splash writes out its Q logo in a handwriting effect. Replayed on a warm app it was almost invisible, so he added a 2.5-second delay purely for the class - and warned twice not to ship one. The useful trick: while the splash plays, the app decides where to send the user - login, or the home screen where they left off.

Rajat packaged what he learned from several React Native animation libraries into a skill (as heard 'RN Animation Skills') so Claude or Codex can add motion to any React Native project without the user hunting for libraries. It is shared with the cohort and reused through the session for the progress bar and Pip's celebration. Every prompt keeps 'the same color combinations' and 'original characters' so the model does not invent new styling.

Onboarding is a short introduction with a skip for people who do not need it. Rajat's own app uses swipes and omits skip because it must ask for notification and location permissions. PromptQuest's version introduces Pip, shows a one-line value statement, gives one practice question from the real lessons, celebrates a correct answer and ends with an invitation to sign in. The class poll chose 'welcome plus one practice question with a skip' over a tour of every feature. Where does 'completed onboarding' live? On the device, not the database, so it is not tied to an account. On relaunch it does not reappear - repeat onboarding is 'annoying'.

Rajat's own app changes the whole scene by state (sleeping on a couch, typing, typing faster) so the user feels the change. The class poll chose short animations on select, continue and finish rather than motion everywhere. Three PromptQuest prompts follow one skeleton. Answer selection: a small pop and a highlight that stays; selecting does not grade, Check still grades, the post-check lock remains, Check and Continue stay instantly usable. Progress bar: advances only on Continue - not on select or Check - and the final Continue opens Results with the bar full. Pip on Results: a bounce with the same artwork, once per completed attempt, scores and the Home button usable immediately. Every prompt carries the Reduce Motion fallback.

Pip is a 2D PNG, so the agent can bounce it, slide it or spin it - little more. In his own app Rajat used a JSON-driven animation with the Lottie library ('Lotte' in the transcript), which lets a character type on a keyboard or bounce a laptop. He also showed a popular React Native animation library's site (blocks moving and scaling; name not spoken) and promised the link. Asked whether 2D and 3D can combine: it depends; PNGs make it hard, and GitHub repositories and Lottie are the place to look for richer characters.

The room answered 'all the time' (the lost delivery order). PromptQuest restores the selected answer and its right/wrong highlight when the learner leaves and returns, and Continue brings the next question - 'no matter what you're doing, we will remember'. Signed in on an iPhone and then an Android simulator, the same progress appears, because yesterday's Clerk + Supabase setup stores it per account. A poll then asked who decides whether an answer is correct: the app's own prepared data (course content.json), not an AI.

Inspired by Duolingo's 'explain my answer', the button appears only after a wrong answer is checked. The prompt asks for a 'prepared, protected' AI service (he used an OpenAI key; a Claude key works the same) and sends everything the model needs, including the prepared explanation from content.json. Grading stays in the content file - the AI only explains. When the live call failed, the prepared correction still showed and the learner could continue, which Rajat turned into the lesson: blocking Continue on a missing AI reply would be a bad experience and a support burden. A digression followed on why polish and character drive app-store reviews.

Analytics shows where people stop. Rajat uses PostHog (Firebase and Microsoft Clarity named as alternatives). The method is naming events and attaching them to buttons. His live data on 4 October: 69 people had tried the app, 8 completed attempts, 65% accuracy; a lesson funnel of 3 users through started, answered, completed, viewed; a sign-in funnel of 46 starts and 3 successes. 'Finished' means completed the questions and saw the results page, not tapped Start. EU rules require consent to track, so the lesson must work when a user opts out. He also showed Microsoft Clarity's free heat map on his resources page.

Rajat's example is a Black Friday sale asset that ships early and appears only on the day. Live, on the build the cohort downloaded the day before, the flag off showed the old plain app; switched on for all users in PostHog, the app reopened with Pip, the animated progress bar and 'explain my mistake'; switched off, it reverted. On mobile this matters because Apple and Google reviews 'are taking too long'. Flags can roll out to 10-15% of users a day or release on a schedule - a pattern he used at JPMorgan. The agent reached into PostHog by itself to find or create the flag.

Moving a web app to mobile, reuse the backend, accounts, data, lesson content and core logic; change the navigation - a bottom tab bar and a visible back button, which web apps usually omit. The poll agreed: reuse. On a real phone, test no internet, no Wi-Fi or cellular, and a larger system font. He tried Larger Text in the iOS simulator's accessibility settings and found the app 'pretty well handled', crediting the skill or iOS. A React Native connectivity plugin can show 'please connect to the internet', needed only for network features such as the AI explanation.

Until now every build ran on Rajat's own devices and simulators. Expo's EAS produces packages that connect to the App Store and Play Store; then comes review. On PromptQuest's App Store page he walked through the required fields, a sign-in toggle with a test account for Apple's reviewer, and the release option. His AfterLit, submitted 31 July, was rejected, fixed and resubmitted, and on 4 October was still waiting. TestFlight shares iPhone builds by invite or public link; Android testers download the test build from the Play Store when signed in. A reviewer needs account access, real screenshots and descriptions, an explanation of permissions and data collection, and a support address.

Supabase and Clerk handle data and auth security, but React Native apps can be probed, so sensitive values belong on the native side where the platform protects them. Payments go through providers that carry their own security (Stripe, Dodo Payments). For games or security-heavy work an experienced iOS or Android engineer is the better choice. One codebase serves both phones, and a Platform check adds per-platform touches such as a font or icon. On models: he used a high-effort setting but says medium or lower is enough when references and prompts are clear. Other answers: Clarity can tell bots from humans (unsure about PostHog); an APK can be downloaded from a website, a store app cannot; EU phones may allow third-party stores; he has no protection against 'AI going rogue' beyond Apple's own measures; a second weekend is Harshit's decision.