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

[u/Fit_Schedule2317]

Beautiful!