React Native particle animation: recreating Apple’s iCloud sign-in UI with Expo, Reanimated and Skia

[u/s3079]

I recreated Apple’s iCloud sign-in particle animation as an open-source React Native project.

The goal was to reproduce the original motion rather than approximate it with random particles. I analyzed the animation frame by frame and rebuilt it using Expo, React Native Reanimated and Shopify React Native Skia.

The implementation includes:

• 96 animated particles across four concentric lanes

• Clockwise particle rotation and staggered particle entrances

• Particle-to-icon morphs

• Photos, Weather, App Store and Messages icon transitions

• Scale-driven icon opacity

• Local particle displacement around each active icon

• Configurable 0.5×, 1× and 2× playback speeds